#parent__container {
    display: flex;
    margin: auto;
    margin-top: 6rem;
    width: 50rem;
}

/***************************************************************/

#container {
    margin: auto;
    text-align: center;
}

#parent {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(12, 2rem);
    grid-template-rows: repeat(22, 2rem);
    width: 24rem;
    border-radius: 0.2rem;
    margin: auto;
}

.squares {
    margin: 0;
    padding: 0;
    height: 2rem;
    width: 2rem;
    background-color: #1C1C1C;
    border: 0.1rem solid #292929;
    border-radius: 0.2rem;
}

.border {
    margin: 0;
    padding: 0;
    height: 2rem;
    width: 2rem;
    background-color: #1C1C1C;
    border: 0.1rem solid #292929;
    border-radius: 0.2rem;
    visibility: hidden;
}

#overlay {
    width: 18rem;
    height: 38rem;
    background-color:#1C1C1C;
    position: absolute;
    z-index: -1;
    margin: auto;
    margin-top: -41rem;
    margin-left: 3rem;
}

.end {
    border-bottom: 1px solid red;
}

/*****************************************************************/

#button {
    background-color: #1C1C1C;;
    border: 2px solid #292929;
    border-radius: 0.5rem;
    color: #a8a8a8;
    padding: 0.5rem 1rem;
    font-size: 1.5rem;
}

#button:hover {
    cursor: pointer;
}

/*****************************************************************/

.miniGrid {
    margin: 0;
    padding: 0;
    height: 2rem;
    width: 2rem;
    background-color: #1C1C1C;
    border: 0.1rem solid #292929;
    border-radius: 0.2rem;
}

#mini__grid {
    display: grid;
    width: 10rem;
    height: 10rem;
    gap: 0;
    grid-template-columns: repeat(5, 2rem);
    grid-template-rows: repeat(5, 2rem);
    margin: auto;
    margin-top: 6rem;
}

#mini__grid__overlay {
    width: 8rem;
    height: 8rem;
    background-color:#1C1C1C;
    position: absolute;
    z-index: -1;
    margin: auto;
    margin-left: 2rem;
    margin-top: 7rem;
}

/****************************************************************/

.holdGrid {
    margin: 0;
    padding: 0;
    height: 2rem;
    width: 2rem;
    background-color: #1C1C1C;
    border: 0.1rem solid #292929;
    border-radius: 0.2rem;
}

#hold__grid {
    display: grid;
    width: 10rem;
    height: 10rem;
    gap: 0;
    grid-template-columns: repeat(5, 2rem);
    grid-template-rows: repeat(5, 2rem);
    margin: auto;
    margin-top: 6rem;
}

#hold__grid__overlay {
    width: 8rem;
    height: 8rem;
    background-color:#1C1C1C;
    position: absolute;
    z-index: -1;
    margin: auto;
    margin-left: 40rem;
    margin-top: 7rem;
}

/********************************************************************/

#score {
    position: absolute;
    z-index: 1;
    font-size: 1.5rem;
    margin-left: 3rem;
    margin-top: 18rem;
    background-color: #1C1C1C;;
    border: 2px solid #292929;
    border-radius: 0.5rem;
    color: #a8a8a8;
    padding: 0.5rem 1rem;
}

#highscore {
    position: absolute;
    z-index: 1;
    font-size: 1.5rem;
    margin-left: 38rem;
    margin-top: 18rem;
    background-color: #1C1C1C;;
    border: 2px solid #292929;
    border-radius: 0.5rem;
    color: #a8a8a8;
    padding: 0.5rem 1rem;
}

/****************************************************************/

@media only screen and (max-width: 1035px) {
    #parent__container {
        transform: scale(0.9);
        margin-top: 2rem;
    }
}

@media only screen and (max-width: 826px) {
    #parent__container {
        transform: scale(0.9);
        margin-left: -2rem;
        margin-top: -2rem;
    }
}

@media only screen and (max-width: 730px) {
    #parent__container {
        transform: scale(0.8);
        margin-left: -2rem;
    }
}

@media only screen and (max-width: 689px) {
    #parent__container {
        transform: scale(0.8) translate(-50%, 0);
        width: 20rem;
        margin-left: 50vw;
        text-align: center;
        margin-top: 0;
    }

    #mini__grid {
        position: absolute;
        margin-top: -6rem;
        margin-left: 16rem;
    }
    
    #mini__grid__overlay {
        position: absolute;
        margin-top: -6rem;
        margin-left: 16rem;
    }

    #hold__grid {
        position: absolute;
        margin-top: -6rem;
        margin-left: -2rem;
    }
    
    #hold__grid__overlay {
        position: absolute;
        margin-top: -6rem;
        margin-left: -2rem;
    }
        
    #score {
        position: absolute;
        margin-top: -6rem;
        margin-left: 8.1rem;
        text-align: center;
    }

    #highscore {
        position: absolute;
        margin-top: -3rem;
        margin-left: 8.1rem;
        text-align: center;
    }
}

@media only screen and (max-width: 474px) {
    #parent__container {
        margin-left: 9rem;
    }
}