/* #region Fonts */

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

/* #endregion Fonts */


/* Colour Schemes */

.colour1
{
    background-color: rgba(9, 18, 44);
    color: white;
    opacity: 1;
}

.colour1:hover
{
    background-color: rgba(9, 18, 30);
}

.color1:disabled
{
    opacity: 0.6;
}

.color1:disabled:hover
{
    background-color: rgba(9, 18, 44);
    opacity: 0.6;
}

.colour2
{
    background-color: rgba(190, 49, 68);
    color: black;
}

.colour3
{
    background-color:rgba(225, 117, 100);
    color: black;
}

.colour4
{
    background-color: rgba(163, 216, 255);
    color: black;
}


/* #region Background CSS */
    .backgroundImage
    {

        background-image: url("images/ui/spookyBG.png");

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

    }
/* #endregion Background CSS End */

/* #region Font Size */

.fontSizeSmall
{
    font-size: 16px;

    @media (max-width : 768px) {
        font-size: 12px;
    }    
}

.fontSizeMedium
{
    font-size: 20px;

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

.fontSizeLarge
{
    font-size: 24px;

    @media (max-width : 768px) {
        font-size: 18px;
    }    
}

/* #endregion Font Size */

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

    .startMenu__btn
    {
        display: none;
        height: 90%;
        width: 100%;    
        word-wrap: normal; 
        overflow: scroll;
        color: white;
        font-size: 24px;
        
    }

    
/* #endregion Start Menu End */

/* #region Generic Game Area */
    .gameArea__div
    {
        position: absolute;
        display: block;
        width: 100dvw;
        height: 100dvh;
        top: 0dvh;
        left: 0dvw;

        @media (max-width : 768px), (max-height : 768px) {
                height: 100dvh;
            }
        
    }
/* #endregion Generic Game Area End */

/* #region Text Bars */
    .title__top__div
    {
        display: none;
        position: absolute; 
        width:80dvw;
        height: 10dvh;
        top: 0dvh;
        left: 10dvw;
        margin: auto; 
        z-index: 25; 
        font-size: 32px; 
        text-align: center; 
        align-content: center;
        color: white;

        border: solid black 4px;

        

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

    .title__mid__div
    {
        display: none;
        position: absolute; 
        width: 100dvw;
        height: 10dvh;
        top: 45dvh;
        left: 0dvw;
        margin: auto; 
        z-index: 25; 
        font-size: 32px; 
        text-align: center; 
        align-content: center;
        color: white;

        border: solid black 4px;

        

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

    .title__bottom__div
    {
        display: none;
        position: absolute; 
        width: 80dvw;
        height: 10dvh;
        bottom: 0dvh;
        left: 10dvw;
        margin: auto; 
        z-index: 25; 
        font-size: 24px; 
        text-align: center; 
        align-content: center;
        color: white;

        border: solid black 4px;

        

        @media (max-width : 768px) {
            height: 5dvh;
            font-size: 16px;
        }
        
    }
/* #endregion Text Bars End */

/* #region Character Input */
    .gloomhavenTurnOrder__div
    {
        display: none;      
        position: absolute;
        top: 0dvh;
        left: 0dvw;
        width: 100dvw;
        height: 100dvh;
    }

    .gloomhavenTurnOrder__title
    {
        display: block;
        position: absolute;    
        left: 50dvw;
        height: 10dvh;
        top: 10dvh;
        transform: translate(-50%, -50%);
        color: white;
        justify-content: center;
        font-size: 24px;

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

    .gloomhavenTurnOrder__playerGrid
    {
        display: block; 
        position: absolute;   
        padding: 0px;
        margin: 0px;  
        height: 45dvh;
        width: 80dvw;
        top: 35dvh;
        left: 10dvw;
        grid-template-columns: 1fr; 
        grid-template-rows: 1fr 1fr 1fr 1fr;
        

        overflow-y: scroll;

        border: 0;
        z-index: 2; 
        font-size: 32px;     

        @media (max-width : 768px), (max-height : 768px) {
            font-size: 32px;     
            grid-template-columns: 1fr; 
            grid-template-rows: repeat(8,1fr);
        }
 
    }

    .gloomhavenTurnOrder__characterGrid__addedCharacters
    {
        display: grid;
        position: absolute;
        height: 20dvh;
        width: 80dvw;
        top: 5dvh;
        left: 10dvw;
        padding: 0px;
        margin: 0px;
        border: solid black 4px;

        grid-template-rows: 1fr 3fr;

        z-index: 3;
        
        font-size: 24px;
        
        
        color: white;     
        
        @media (max-width : 768px), (max-height : 768px) {
            font-size: 32px;                 
        }
    }

    .gloomhavenTurnOrder__characterGrid__addedCharacters__title
    {        
        /* grid-column: span 5;   */
        color: white;    
        font-size: 22px;
        border: solid black 1px;

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

    .gloomhavenTurnOrder__characterGrid__addedCharacters__grid
    {
        display: grid;
        width: 100%;
        height: 100%;
        
        grid-template-columns: repeat(5,1fr);
        grid-template-rows: 2fr 2fr;
    }

    .gloomhavenTurnOrder__characterType__div
    {
        display: grid;
        position: absolute;
        height: 5dvh;
        width: 80dvw;
        top: 30dvh;
        left: 10dvw;
        padding: 0px;
        margin: 0px;
        place-items: center;

        grid-template-columns: 3fr 1fr 3fr;

        z-index: 3;
        
        font-size: 24px;
        
        
        color: white;      
    }

    .gloomhavenTurnOrder__characterType__btn
    {
        width:100%;
        height: 100%;
        color: white;    
        font-size: 20px;
        

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


    .gloomhavenTurnOrder__characterType__cancel__btn
    {
        
        color: white;    
        font-size: 20px;
        height: 100%;
        width: 50%;
        left: 25%;
        

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


    .gloomhavenTurnOrder__startGame__btn
    {
        position: absolute;     
        height: 10dvh; 
        width: 30dvw; 
        top: 85dvh;
        left: 60dvw;
        color: white;
        font-size: 24px;
        z-index: 3;
        

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

    }

    .gloomhavenTurnOrder__search__btn
    {
        position: absolute;     
        height: 10dvh; 
        width: 30dvw; 
        top: 85dvh;
        left: 10dvw;
        color: white;
        font-size: 24px;
        z-index: 3;
        

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

    }

    .gloomhavenTurnOrder__playerGrid__preset
    {
        display: grid; 
        position: absolute; 
        width: 100dvw;
        height: 20dvh;
        bottom: 0dvh;
        left: 0dvw;
        grid-template-columns: repeat(4,1fr);
        grid-template-rows: repeat(2,1fr); 

        margin: auto; 
        z-index: 3; 
        font-size: 32px; 

        border: solid black 4px;

        overflow-y: scroll;
        
    }

    .gloomhavenTurnOrder__playerGrid__preset__btn
    {
        display: none;
        height: 100%;  
        width: 100%;
        color: white;              
        border: solid 4px black;    
        
        background-size: 100% 100%; 
        font-size: 16px;  
    }
/* #endregion Character Input End */

/* #region Search Bar Box */
    .gto__searchBar__div
    {
        position: absolute;
        display: none; 
        width: 80dvw;
        height: 20dvh;
        top: 5dvh;
        left: 10dvw;
        grid-template-columns: repeat(4,1fr);
        grid-template-rows: 2fr 1fr;        
        z-index: 4;
        border: solid black 4px;

        

    }

    .gto__searchBar__title
    {
        height: 70%; 
        width: 90%;  
        color: white;    
        border: 0; 
        font-size: 24px;
        @media (max-width : 768px), (max-height : 768px) {
            font-size: 16px;
        }        
    }

    .gto__searchBar__title:hover
    {
        opacity:1;
        pointer-events: "none";
    }

    .gto__searchBar__inputField
    {   
        display: block; 
        height: 70%;
        width: 90%;        
        color: white;
        border-bottom: solid black 2px; 
        font-size: 24px;
        outline:none;
        grid-column: span 3;

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

    .gto__searchBar__btn
    {
        
        height: 100%; 
        width: 100%;         
        color: white;    
        font-size: 24px;
        grid-column: span 2;

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

    .gto__button__text
    {
        font-size: 22px;
        @media (max-width : 768px), (max-height : 768px) {
            font-size: 16px;
        }      
        
    }
/* #endregion Name Input Box End */


/* #region Search Bar Box */
.gto__nameInput__div
{
    position: absolute;
    display: none; 
    width: 80dvw;
    height: 50dvh;
    top: 25dvh;
    left: 10dvw;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: 2fr 1fr;        
    z-index: 31;
    border: solid black 4px;

    

}

.gto__nameInput__title
{
    height: 70%; 
    width: 90%;  
    color: white;    
    border: 0; 
    font-size: 24px;
    @media (max-width : 768px), (max-height : 768px) {
        font-size: 16px;
    }        
}

.gto__nameInput__title:hover
{
    opacity:1;
    pointer-events: "none";
}

.gto__nameInput__inputField
{   
    display: block; 
    height: 70%;
    width: 90%;        
    color: white;
    border-bottom: solid black 2px; 
    font-size: 24px;
    outline:none;
    grid-column: span 3;

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

.gto__nameInput__btn
{
    
    height: 100%; 
    width: 100%;         
    color: white;    
    font-size: 24px;
    grid-column: span 2;

    @media (max-width : 768px), (max-height : 768px) {
        font-size: 16px;
    }        
}
/* #endregion Name Input Box End */


/* #region GTO__Main Game Scene */

.gto__gameScene__div
{    
    display: none;      
    position: absolute;
    top: 0dvh;
    left: 0dvw;
    width: 100dvw;
    height: 100dvh;
    
}

.gto__gameScene__title
{
    position: absolute;     
    height: 10dvh; 
    width: 80dvw; 
    top: 5dvh;
    left: 10dvw;
    color: white;
    border: 0;
    font-size: 24px;
    z-index: 3;
    
}

.gto__gameScene__characterOrder__div
{
    display: grid;
    position: absolute;
    height: 50dvh;
    width: 80dvw;
    top: 5dvh;
    left: 10dvw;
    padding: 0px;
    margin: 0px;
    border: solid black 4px;

    grid-template-columns: 1fr 5fr;
    grid-template-rows: repeat(8, 1fr);

    z-index: 3;
    
    font-size: 32px;
    
    
    color: white;    
    
    @media (max-width : 768px) {        
        font-size: 32px;
    }
}

.gto__gameScene__possibleCharacters__div
{
    display: grid;
    position: absolute;
    height: 20dvh;
    width: 80dvw;
    top: 60dvh;
    left: 10dvw;
    padding: 0px;
    margin: 0px;

    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    border: solid black 4px;

    z-index: 3;
    
    font-size: 24px;
    
    
    color: white;   
    
    @media (max-width : 768px) {        
        font-size: 32px;
    }
}

.gto__gameScene__reset__btn
{
    position: absolute;     
    height: 10dvh; 
    width: 20dvw; 
    top: 85dvh;
    left: 10dvw;
    color: white;
    font-size: 24px;
    z-index: 3;
    

    @media (max-width : 768px) {   
        height: 5dvh;
        width: 30dvw;     
        font-size: 16px;
    }
}

.gto__gameScene__newMission__btn
{
    position: absolute;     
    height: 10dvh; 
    width: 20dvw; 
    top: 85dvh;
    left: 70dvw;
    color: white;
    font-size: 24px;
    z-index: 3;
    

    @media (max-width : 768px) {
        height: 5dvh;
        width: 30dvw;
        left: 60dvw;
        font-size: 16px;
    }
}


/* #endregion GTO__Main Game Scene */

/* #region Toolbar */

    .toolbar__div
    {
        display: grid;
        position: absolute; 
        width:95dvw;
        height: 5dvh;
        top: 0dvh;
        left: 5dvw;
        margin: auto; 
        z-index: 25; 
        font-size: 32px; 
        text-align: center; 
        align-content: center;
        color: black;
        background-color: white;

        border: solid black 4px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;

        

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

    .toolbar__element
    {
        display: block;    
        width: 100%;
        height: 100%;
        
        
        font-size: 16px; 
        text-align: center; 
        align-content: center;
        color: white;

        border: solid black 1px;

        

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

/* #endregion Toolbar End */