html, body {
    font: 16px;
    font-family:'Courier New', Courier, monospace;
    background-image: url(./assets/BG-nyanCat.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 1920px;
    /* height: 100vh; */
    
}
a {
    text-decoration: none;
    color: #000000;
    font-weight: 500;
    text-shadow: 1px 1px 3px #000000;
    margin: 0 1rem;
}

.page {

    background: rgba(202, 210, 246, 0.6);
    min-height: calc(100vh - 30px - 2rem);
    user-select: none;
}


.container {
    max-width: 500px;
    padding: 1rem ;
    padding-bottom: 0;
    margin: 0 auto;

}

.title {
    text-align: center;
    margin: 0rem auto 1.5rem;
    color:blueviolet;
    font-size: 3rem;
    text-shadow: 2px 2px 4px #000000;


}

.controlButtons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.buttonControl {
    height: 2rem;
    padding: auto auto;
    font-size: 1.1em;
    color: aliceblue;
    background-color:rgb(45, 86, 208);
    border-radius: 3px;
    border: 1px solid darkslategrey;
    -webkit-box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.5);
    -moz-box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.5);
    box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.5);
    margin-bottom: 0.5rem;
    cursor: pointer;

}


.buttonControl:hover {
    scale: 1.02;
    -webkit-box-shadow: 4px 4px 13px -2px rgba(115, 22, 227, 0.66);
-moz-box-shadow: 4px 4px 13px -2px rgba(38, 8, 74, 0.66);
box-shadow: 4px 4px 13px -2px rgba(54, 8, 110, 0.66);


}
.stopButton.active {
    background-color:rgb(32, 64, 159);
}
.closeResults {

    position: relative;
    width: 100%;

    display: flex;
    width: 25px;
    height: 25px;
    cursor: pointer;

}
.closeXImg{
    width: 25px;
    height: 25px;
}
.results{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0 auto;
    display: none;
    width: 80%;
    height: 70vh;

}
.results:first-child{
    justify-content: end;
}
.results.active {
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    z-index: 20000;
    top: 50%;
    display: flex;
    gap: 10px;
    padding: 1rem;
    background-color: rgba(132, 159, 213, 0.95);
    -webkit-box-shadow: 0px -1px 100px -3px rgba(55, 36, 58, 0.84) inset;
    -moz-box-shadow: 0px -1px 100px -3px rgba(55, 36, 58, 0.84) inset;
    box-shadow: 0px -1px 100px -3px rgba(55, 36, 58, 0.84) inset;
}
table {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}
thead {
    font-size: 1.5rem;
}
tr {
    display: flex;
    justify-content: space-between;
}
th:first-child{
    width: 10%;
}
th:nth-child(2){
    width: 30%;
}
th:nth-child(3){
    width: 20%;
}
th:nth-child(4){
    width: 20%;
}
.interactiveContent {
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
    align-items: center;
}

.countContent, .stopwatchContent, .soundContent {
    display: flex;
    margin: 0 auto;
    align-items: center;
}

.interactiveContent {
    font-weight: 600;
    color: rgb(29, 5, 29);

    
}
.countValue, .stopwatchValue {
    color: #000000;
}
#soundOn {
 margin-left: 5px;
 background-color: #7B96B8;
}

.fifteensDesk {
    position: relative;
    width: 100%;
    padding-bottom: 100%;

    background-color: rgba(163, 132, 201, 0.66);
    border: 2px solid rgb(109, 97, 110);
    border-radius: 6px;
    -webkit-box-shadow: 0px -2px 100px -34px rgba(18, 9, 28, 0.66) inset;
-moz-box-shadow: 0px -2px 100px -34px rgba(18, 9, 28, 0.66) inset;
box-shadow: 0px -2px 100px -34px rgba(18, 9, 28, 0.66) inset;
}

.blockedMove.active {

    display: flex;

}
.blockedMove{
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    flex-grow: 1;
    flex-direction: column;
    font-size: 2.5rem;
    font-weight: 600;
    color:  rgb(28, 57, 144);;
    background-color: rgba(34, 132, 177, 0.5);
    justify-content: center;
    text-align: center;
    z-index: 10000;
}
.item3 {
    position: absolute;
    width: calc(100% / 3 );
    height: calc(100% / 3 );
    font-size: 2.5rem;
    text-align: center;
    border: 1px solid darkslategrey;
    border-radius: 5px;
    background-color:rgb(205, 215, 246);
    -webkit-box-shadow: 0px -2px 32px -2px rgba(18, 9, 28, 0.66) inset;
    -moz-box-shadow: 0px -2px 32px -2px rgba(18, 9, 28, 0.66) inset;
    box-shadow: 0px -2px 32px -2px rgba(18, 9, 28, 0.66) inset;
    cursor: pointer;
    font-weight: 800;
    transition: transform 0.4s ease-in-out;
    color: rgb(239, 239, 239);
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

}
.item3:last-child{
    display: none;
}

.item4 {
    position: absolute;
    width: calc(100% / 4 );
    height: calc(100% / 4 );
    font-size: 2.5rem;
    text-align: center;
    border: 1px solid darkslategrey;
    border-radius: 5px;
    background-color:rgb(205, 215, 246);
    -webkit-box-shadow: 0px -2px 32px -2px rgba(18, 9, 28, 0.66) inset;
    -moz-box-shadow: 0px -2px 32px -2px rgba(18, 9, 28, 0.66) inset;
    box-shadow: 0px -2px 32px -2px rgba(18, 9, 28, 0.66) inset;
    cursor: pointer;
    font-weight: 800;
    transition: transform 0.4s ease-in-out;
    color: rgb(239, 239, 239);
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

}
.item4:last-child{
    display: none;
}
.item5 {
    position: absolute;
    width: calc(100% / 5 );
    height: calc(100% / 5 );
    font-size: 2.5rem;
    text-align: center;
    border: 1px solid darkslategrey;
    border-radius: 5px;
    background-color:rgb(205, 215, 246);
    -webkit-box-shadow: 0px -2px 32px -2px rgba(18, 9, 28, 0.66) inset;
    -moz-box-shadow: 0px -2px 32px -2px rgba(18, 9, 28, 0.66) inset;
    box-shadow: 0px -2px 32px -2px rgba(18, 9, 28, 0.66) inset;
    cursor: pointer;
    font-weight: 800;
    transition: transform 0.4s ease-in-out;
    color: rgb(239, 239, 239);
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

}
.item5:last-child{
    display: none;
}
.item6 {
    position: absolute;
    width: calc(100% / 6 );
    height: calc(100% / 6 );
    font-size: 2rem;
    text-align: center;
    border: 1px solid darkslategrey;
    border-radius: 5px;
    background-color:rgb(205, 215, 246);
    -webkit-box-shadow: 0px -2px 32px -2px rgba(18, 9, 28, 0.66) inset;
    -moz-box-shadow: 0px -2px 32px -2px rgba(18, 9, 28, 0.66) inset;
    box-shadow: 0px -2px 32px -2px rgba(18, 9, 28, 0.66) inset;
    cursor: pointer;
    font-weight: 800;
    transition: transform 0.4s ease-in-out;
    color: rgb(239, 239, 239);
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

}
.item6:last-child{
    display: none;
}
.item7 {
    position: absolute;
    width: calc(100% / 7 );
    height: calc(100% / 7 );
    font-size: 2rem;
    text-align: center;
    border: 1px solid darkslategrey;
    border-radius: 5px;
    background-color:rgb(205, 215, 246);
    -webkit-box-shadow: 0px -2px 32px -2px rgba(18, 9, 28, 0.66) inset;
    -moz-box-shadow: 0px -2px 32px -2px rgba(18, 9, 28, 0.66) inset;
    box-shadow: 0px -2px 32px -2px rgba(18, 9, 28, 0.66) inset;
    cursor: pointer;
    font-weight: 800;
    transition: transform 0.4s ease-in-out;
    color: rgb(239, 239, 239);
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

}
.item7:last-child{
    display: none;
}
.item8 {
    position: absolute;
    width: calc(100% / 8 );
    height: calc(100% / 8 );
    font-size: 1.5rem;
    text-align: center;
    border: 1px solid darkslategrey;
    border-radius: 5px;
    background-color:rgb(205, 215, 246);
    -webkit-box-shadow: 0px -2px 32px -2px rgba(18, 9, 28, 0.66) inset;
    -moz-box-shadow: 0px -2px 32px -2px rgba(18, 9, 28, 0.66) inset;
    box-shadow: 0px -2px 32px -2px rgba(18, 9, 28, 0.66) inset;
    cursor: pointer;
    font-weight: 800;
    transition: transform 0.4s ease-in-out;
    color: rgb(239, 239, 239);
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

}
.item8:last-child{
    display: none;
}

.footer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1rem;
    background: rgba(202, 210, 246, 0.6);
    height: 30px;

}
.levelButtons {
    margin-top: 1.5rem;
    display: flex;
    justify-content: space-between;
}
.levelChoise {
    height: 2rem;
    padding: auto auto;
    font-size: 1.1em;
    color: aliceblue;
    background-color:rgb(45, 86, 208);
    border-radius: 3px;
    border: 1px solid darkslategrey;
    -webkit-box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.5);
    -moz-box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.5);
    box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.5);
    margin-bottom: 0.5rem;
    cursor: pointer;
}
.levelChoise.active{
    background-color:rgb(32, 64, 159);
}


.loadButton.saved{
    background-color:rgb(45, 159, 32); 
}
.loadButton.full {
    background-color:rgb(32, 136, 159); 
}

.congratulations.active{
    display: flex;
    justify-content: center;
    align-items: center;
}
.congratulations {
        display: none;
        position:absolute;
        top:0;
        background-color: rgb(226, 43, 134, 0.3);
        min-height: 100vh;
        /* padding-top: 150px; */
        width: 100%;
        text-align: center;
        font-size: 3.5rem;
        color:rgb(226, 43, 134);
        /* letter-spacing: -7px; */
        font-weight: 700;
        text-transform: uppercase;
        animation: blur 1s ease-out infinite;
        text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
      }
      
      @keyframes blur {
        from {
          text-shadow:0px 0px 10px #fff,
            0px 0px 10px #fff, 
            0px 0px 25px #fff,
            0px 0px 25px rgb(170, 224, 116),
            0px 0px 25px #fff,
            0px 0px 25px #fff,
            0px 0px 25px #fff,
            0px 0px 25px #fff,
            0px 0px 50px #fff,
            0px 0px 50px #fff,
            0px 0px 50px #7B96B8,
            0px 0px 150px #7B96B8,
            0px 10px 100px #7B96B8,
            0px 10px 100px #7B96B8,
            0px 10px 100px #7B96B8,
            0px 10px 100px #7B96B8,
            0px -10px 100px #7B96B8,
            0px -10px 100px #7B96B8;
        }
      }

      @media (max-width: 448px) {
        html, body {
            font-size: 12px;
        
        }
      }