*{margin:0;padding:0;box-sizing:border-box;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}

:root{
    --bgcol:#37474F;
    --mcol0:#29B6F6;
    --mcol1:#2196F3;
    --mcol2:#1976D2;
    --txtcol0:#90A4AE;
    --txtcol1:#795548;
    --whitecol:#ECEFF1;
    --darkcol:#263238;
}
#side-puzzle-container {
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    margin: 20px auto; 
    width: 1000px;
    height: 650px;
    box-shadow: 2px 6px 12px 6px rgba(233,225,225,0.26);
    background: white;
}
#side-puzzle-container .settings {
    text-align: right;
    margin: 1% 3% 3% 1%;
    padding: 10px 0 10px 0;
    border-bottom: 1px solid black;
}
#side-puzzle-container .settings i {
    font-size: 1.3em;    
    margin-left: 5px;
    color: black;
}
#side-puzzle-container .settings .fa-home {
    font-size: 1.5em;
}
.dark-mode #side-puzzle-container .settings a:hover {
    color: grey;
}
#side-puzzle-container .settings i:hover {
    cursor: pointer;
    color: grey;
}

.dark-board {
    background-color: black!important;
}
/* dark mode */
.dark-mode #side-puzzle-container .settings {
    border-bottom: 1px solid white;
}
.dark-mode #side-puzzle-container .settings i {
    color: white;
}

#puzzle_container {
    position: relative;
    width: 50vh;
    height:50vh;
    background-color:white;
    border-radius:8px;
    border:20px solid #8bc34a;
    margin: 20px auto;
    background-color: aliceblue;
}

.puzzle_blocks {
    position:absolute;
    left:0;
    top:0;
    width:33%;
    height:33%;
    margin: 5px 0 0 5px;
    border: 2px solid wheat;
    background-color:var(--txtcol1);
    color:var(--whitecol);
    text-shadow: 2px 2px 4px #0B325E;
    font-size:10vh;
    font-weight:bold;
    text-align:center;
    cursor: pointer;
    user-select:none;
    transition:left 0.3s,top 0.3s;
}

#side-puzzle-container .menu {
    font-family: 'Helvetica';
    position: absolute;
    top: 12%;
    right: 3%;
    background-image: url(../images/fruits/back-menu.jpg);
    border-radius: 20px;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    user-select: none;
}

/* turns */
#side-puzzle-container .menu .show-turns {
    text-align: center;
    
} 
#side-puzzle-container .menu .show-turns h3 {
    color: white;
}
#side-puzzle-container .menu .show-turns h3 #winner {
    padding-left: 6px;
}

/* win modal */

#side-puzzle-container .menu #new-game {
    display: none;
    padding: 6px 10px;
    margin: 10px;
    width: 120px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid black;
    font-weight: bold;
    box-shadow: inset -3px -3px 5px 0px #0B325E;
}

#side-puzzle-container .menu #new-game:hover {
    box-shadow: inset 2px 2px 5px 0px #0B325E;
    padding: 7px 10 px 5px 10px;
}

#side-puzzle-container .modal {
    display: none;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.7);
}
#side-puzzle-container .modal .modal-content {
    position: absolute; 
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 2px solid var(--grey);
    margin: 5% auto;
    padding: 20px;
    width: 80%;
    color: #2e3239;;
    max-width: 450px;
}
#side-puzzle-container .close {
    float: right;
    font-size: 2em;
    font-weight: bold;
    margin: -10px;
    color: firebrick;
}
#side-puzzle-container .close:hover,
#side-puzzle-container .close:focus {
    color: #e91313;
    text-decoration: none;
    cursor: pointer;
}

/*difficulty container*/
#difficulty_container {
    display:flex;
    flex-direction:row;
    background-color: white;
    border-radius:8px;
}
#difficulty_container ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.difficulty_button {
    flex-grow:1;
    background-color:inherit;
    color:var(--txtcol1);
    text-align:center;
    font-weight:bold;
    padding:4px 0 6px 0;
    margin:4px;
    cursor: pointer;
    width: 90px;
    background-color: antiquewhite;
    transition:font-size 0.3s;
    box-shadow: 2px 3px 3px black;
    border-radius: 5px;
}
.difficulty_button:hover {
    opacity:0.8;
/*    font-size:3.5vh;*/
}
.difficulty_button.active{
    background-color:inherit;
    color:var(--mcol0);
}

#side-puzzle-container #win-announce {
    display: none;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.7);
}
#side-puzzle-container .small-modal .modal-content {
  position: absolute; 
  left: 50%;
  top: 20%;
  transform: translate(-50%, 0);
  background-color: white;
  border: 2px solid var(--grey);
  margin: 5% auto;
  padding: 20px;
  width: 80%;
  color: var(--default);
  text-align: center;
  max-width: 300px;
}
#side-puzzle-container .small-modal .modal-content .fa-trophy {
  font-size: 3em;
  color: gold;
  padding: 0 0 20px 0;
  text-shadow: 2px 2px 5px #601414;
}
#side-puzzle-container .small-modal .modal-content .game-btn {
  font-family: Arial, Helvetica, sans-serif;
  padding: 8px 20px;
  font-size: 1.2em;
  color: white;
  background: #10ab10;
  font-weight: 600;
  border: none;
  border-radius: 20px;
  margin-top: 20px;
} 
#side-puzzle-container .small-modal .modal-content .game-btn:hover {
  background: #15c915;
  cursor: pointer;
}

/* The Close Button */
#side-puzzle-container #win-announce .close {
  float: right;
  font-size: 2em;
  font-weight: bold;
  margin: -10px;
  color: firebrick;
}

#words-container .close:hover,
#words-container .close:focus {
  color: #e91313;
  text-decoration: none;
  cursor: pointer;
}
#words-container .hidden {
    display: none;
}

.dark-board {
    background-color: black!important;
}

#side-puzzle-container .show-turns select {
    border: none;
    padding: 5px 10px;
    font-family: 'sans-serif;';
    font-weight: bold;
    font-size: large;
    box-shadow: inset 2px 2px 4px 0 #0B325E;
    border-radius: 10px;
    margin-bottom: 1rem;
}
#side-puzzle-container .show-turns select:focus {
    outline: none;
}
#side-puzzle-container .show-turns select:hover {
    cursor: pointer;
}
#side-puzzle-container .show-turns select option {
    background: #eef0f6;
}
#side-puzzle-container .show-turns select option[value="1"] {
    background: #cfdaec;
}
#side-puzzle-container .show-turns select option[value="2"] {
    background: #c1d8f0;
}

#side-puzzle-container #help-modal .modal-content .img {
    width: 390px;
    margin: 15px 5px;
}
#side-puzzle-container #help-modal .modal-content .close-help {
    margin: -25px -17px;
    float: right;
    font-size: 2em;
    font-weight: bold;
    color: firebrick;
}

#side-puzzle-container #help-modal .modal-content .close-help:hover,
#side-puzzle-container #help-modal .modal-content .close-help:focus {
    color: #e91313;
    text-decoration: none;
    cursor: pointer;
}

/* media querries */
@media only screen and (min-width: 767px) and (max-width: 1024px) {
    #puzzle_container {
        width: 45vh;
        height: 45vh;
        margin-left: 20px;
    }
    #side-puzzle-container {
        width: 90%;        
    }
}
@media only screen and (max-width: 767px) {
    #side-puzzle-container #help-modal .modal-content .img {
        width: 260px;
    }
    #side-puzzle-container {
        width: 100%;
        height: auto;
    }
    #side-puzzle-container .menu {
        position: unset;
        margin: 15px auto 0;
        width: 85%;
    }
    #side-puzzle-container .wrapper {
        display: flex;
        flex-direction: column-reverse;
    }
}
@media only screen and (max-width: 360px) {
    #puzzle_container {
        width: 45vh;
        height: 45vh;
    }
    #side-puzzle-container #help-modal .modal-content .img {
        padding-top: 10px;
        width: 230px;
    }
}
@media only screen and (max-width: 320px) {
    #puzzle_container {
        width: 50vh;
        height: 50vh;
    }
    #side-puzzle-container #help-modal .modal-content .img {
        width: 200px;
    }
}