/* #region Fonts */

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

/* #endregion Fonts */


/* Colour Schemes */

.colour1
{
    background-color: rgba(125,10,10);
    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
    {

        background-image: url("https://snackgames.co.uk/images/deckOfFire/GOG_UI_BG_DeckOfFire_Landscape_Words.png");

        @media (max-width : 768px) {
        background-image: url("https://snackgames.co.uk/images/deckOfFire/GOG_UI_BG_DeckOfFire_Portrait_Words.png");          
        }    

    }
/* #endregion Background CSS End */


/* #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: 90%;
    width: 100%;    
    word-wrap: normal; 
    overflow: scroll;    
    font-size: 24px;
    border: solid black 1px;
 
}

.startMenu__addPlayers__btn
{
    height: 90%;
    width: 100%;    
    word-wrap: normal; 
    overflow: scroll;    
    font-size: 24px;
    border: solid black 1px;    
}

.startMenu__playGame__default__btn
{
    height: 90%;
    width: 100%;    
    word-wrap: normal; 
    overflow: scroll;    
    font-size: 24px;
    border: solid black 1px;

    @media (max-width : 768px), (max-height : 768px) {
        font-size: 16px;
    }        
}

.startMenu__playGame__custom__btn
{
    height: 90%;
    width: 100%;    
    word-wrap: normal; 
    overflow: scroll;    
    font-size: 24px;
    border: solid black 1px;

    @media (max-width : 768px), (max-height : 768px) {
        font-size: 16px;
    }        
}

.startMenu__playGame__defaultCustom__btn
{
    height: 90%;
    width: 100%;    
    word-wrap: normal; 
    overflow: scroll;    
    font-size: 24px;

    @media (max-width : 768px), (max-height : 768px) {
        font-size: 16px;
    }        
}
/* #endregion startMenu.js */