/* #region Fonts */

*{
    font-family: "Satoshi", monospace;
}

/* #endregion Fonts */


/* Colour Schemes */

.colour1
{
    background-color: rgba(19,45,64);
    color: white;
}

.colour2
{
    background-color: rgba(191,49,49);
    color: white;
}

.colour3
{
    background-color: rgba(234, 209, 150);
    color: black;
}

.colour4
{
    background-color: rgba(238, 238, 238);
    color: black;
}


/* #region Background CSS */
    .backgroundImage
    {
        z-index: -3;
        /* background-image: url("./images/bg__grey.png"); */
        background-image: url("./images/nivalisImage2.png");

        @media (max-width : 768px) {
        background-image: url("./images/nivalisImage2.png");
        /* background-image: url("./images/bg__grey.png"); */
        }    

    }
/* #endregion Background CSS End */

.options__menu__btn
{
    display: none;
}

/* #region startMenu.js */
.startMenu__div
{
    display: none; 
    position: absolute; 
    width: 40dvw;
    height: 30dvh;
    top: 70dvh;
    left: 50dvw;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr; 
    transform: translate(-50%, -50%);
    z-index: 3; 
    font-size: 24px;     
    
}

.startMenu__startGame__btn
{
    height: 50%;
    width: 100%;    
    word-wrap: normal; 
    overflow: scroll;    
    font-size: 24px;
    border: solid black 4px;
 
}


/* #endregion startMenu.js */

.mainMenu__instructions
{
    display: block;
    position: absolute; 
    top: 10%;
    left: 20%;
    width: 60%;
    height: 25%;
    background-color: white;
    color: rgba(19,45,64);
    font-size: x-large;
    text-align: center;
    border: solid black 4px;
    

}

.tilemap__div
{
    position: absolute;
    display: grid;
    top: 10%; 
    left: 10%; 
    z-index: 2;
    width: 80%;
    height: 80%;
}

.tileButtons
{
    position: auto;
    display: block;
    width: 100%;
    height: 100%;
}

.tileScoreCounter__div
{
    position: absolute;
    display: none;
    grid-template-columns: 2fr 1fr;
    right: 0;
    top: 0;
    width: 30%;
    height: 10%;
    
}

.tileScoreCounter__text
{
    display: block;
    width: 100%;
    height: 100%;
    font-size: x-large;
    color: white;
}

.tileScoreCounter__value
{
    display: block;
    width: 100%;
    height: 100%;
    font-size: x-large;
    color: white;
}

.dpad__div
{
    display: none;
    grid-template-columns: repeat(4, 1fr);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20%;
}

.dpad__button
{
    display: block;
    width: 100%;
    height: 100%;
    background-color: aqua;
    font-size: x-large;
    
}

.gameOverScores__div
{
    display: grid;
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 60%;
    grid-template-columns: repeat(3, 1fr);
}

.gameOverScores__btn
{
    display: none;
    position: absolute;
    top: 75%;
    left: 30%;
    width: 40%;
    height: 10%;
    font-size: large;
}

.score__div
{
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(19,45,64);
    font-size: xx-large;
    color: white;
}

.mainMenu__image
{
    display: block;
    position: absolute;
    width: 150px;
    height: 150px;
    left: 45%;
    top: 40%;
}