body {
    font-family: 'Open Sans', sans-serif;
}

header {
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-rows: 1fr;
    /* background-color: deepskyblue; */
}

h1 {
    font-size: 48px;
    grid-column: 2 / 3;
    justify-self: center;
}

h2 {
    display: block;
}

input[type=text] {
    display: inline;
    width: 60px;
    height: 60px;
    font-size: 40px;
    text-align: center;
    border: 2px solid black;
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    margin: 0 5px;
}

input[type=text]:focus {
    caret-color: transparent;
    outline: none;
    border: 2px solid blue;
}

#compWins:focus {
    outline: none;
    border: 2px solid black;
}

button {
    appearance: none;
    width: 200px;
    height: 60px;
    margin: 5px;
    padding: 5px;
    background-color: black;
    color: white;
    text-transform: uppercase;
    font-size: 20px;
    border-radius: 12px;
    border-style: none;
    box-shadow: 5px 5px 10px gray;
    cursor: pointer;
}

button:hover {
    box-shadow: 7px 7px 12px gray;
}

button:active {
    box-shadow: 2px 2px 5px gray;
}

/* CSS SWITCH TUTORIAL FROM W3WCHOOLS */
/* https://www.w3schools.com/howto/howto_css_switch.asp */

.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

.switch input {
opacity: 0;
width: 0;
height: 0;
}

/* The slider */
.slider {
position: absolute; /* keeps the span in position around the switch */
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc; /* makes the background of the slider grey */
-webkit-transition: .4s;
transition: .4s; /* runs the slide animation over .4 seconds */
}


.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}

/* plus selector is for elements immediately after but not inside */
/* so it is targeting the .slider class, but only when the input before it has been checked */
input:checked + .slider {
background-color: #2C3B69;
}

/* slight shadow to give it some depth */
input:focus + .slider {
box-shadow: 0 0 1px #2C3B69;
}

/* moves the slider over */
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}

/* W3SCHOOLS TUTORIAL END */

#difficultyLabel {
    -webkit-transition: .4s;
    transition: .4s;
}

.compTurn {
    background-color: lightgray;
}

.compWins {
    border-color: darkred;
    font: white;
    background-color: lightcoral;
}

.userWins {
    border-color: darkgreen;
    font: white;
    background-color: lightgreen;

}

#scoreboard {
    grid-column: 1 / 2;
    justify-self: center;
    text-align: center;
}

#pointsToWin {
    font-size: 30px;
    font-family: 'Open Sans', sans-serif;
}

#checkers {
    color: gray;
}

#gameSpace {
    display: grid;
    grid-template-rows: 100px 2fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 4fr 1fr;
    justify-items: center;
}

#difficulty {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
    text-align: center;
    align-self: end;
    color: gray;
}

#threeStrikesP > span {
    padding: 5px;
    margin: 5px;
    font-size: 36px;
}

.strikeOn {
    color: #2C3B69;
    font-weight: 600;
}

#wordsLeft {

    grid-row: 1 / 2;
    grid-column: 2 / 3;
    display: flex;
    justify-content: center;
    align-self: start;
}

#wordsLeft > p {
    margin: 0 0 25px 0;
}

#message {
    margin: 10px 0;
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 30px;
    /* background-color: aqua; */
}


#word {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    display: flex;
    justify-content: space-evenly;
    /* background-color: darksalmon; */
}

#options {
    grid-row: 3 / 4;
    grid-column: 2 / 3;
}

#userPointsDiv {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    font-size: 36px;
    font-weight: 500;
    text-align: center;
    /* background-color: aquamarine; */
}

#compPointsDiv {
    grid-row: 2 / 3;
    grid-column: 3 / 4;
    font-size: 36px;
    font-weight: 500;
    text-align: center;
    /* background-color: darkorchid; */
}