*{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;
}

#nr_puzzle_container{
    position: relative;
    width: 50vh;
    height:50vh;
    background-color:white;
    border-radius:8px;
    border:20px solid var(--mcol0);
    margin: 20px auto;
}

.puzzle_block{
    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;
}

/*difficulty container*/
#difficulty_container{
    display:flex;
    flex-direction:row;
    background-color: white;
    border-radius:8px;
    margin-bottom: 10px;
}
#difficulty_container ul {
    list-style-type: none;
    margin: 0;
    padding: 0 1.8rem;
}
.difficulty_button{
    flex-grow:1;
    background-color:inherit;
    color:var(--txtcol1);
    text-align:center;
/*    font-size:3vh;*/
    font-weight:bold;
    padding-top:5%;
    margin:4px;
    cursor: pointer;
    transition:font-size 0.3s;
}
.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;
}

/* menu */
#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;
}


#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: 768px) and (max-width: 1024px) {
    #nr_puzzle_container {
        width: 45vh;
        height: 45vh;
    }
}
@media only screen and (max-width: 767px) {
    #side-puzzle-container #help-modal .modal-content .img {
        width: 260px;
    }
    #side-puzzle-container .menu {
        position: unset;
        margin: 15px auto 0;
        width: 85%;
    }
}
@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;
    }
}