/* ===General CSS=== */
/* HTML CSS */
html {
    min-height:100%;
}

/* Link Style: Removes Underline */
a {
    text-decoration: none;
}

/* Class to Hide Elements*/
.conceal {
    display: none;
}

/* Light Heading Style*/
.lightText{
    color: #EBE0D2;
}

/* Dark Heading Style*/
.darkText{
    color: #084A59;
}

/* Black Text Style*/
.blackText {
    color: black;
}

/* Larger Button Style*/
.largeBtn {
    height: 60px;
}

/* Light Border Style*/
.lightBorder {
    border: 3px solid #E1D1BC;
    border-radius: 10px;
}

/* Large Title Style */
/* Title Size for Screens Above 500px */
.largeTitle {
    font-size: 600%;
}

    /* Title Size for Screens Under 500px */
    @media screen and (max-width: 500px) {
        .largeTitle {
            font-size: 20vw;
        }
    }


/* ===Navigation Bar Items===*/
/* CSS for Each Nav Item */
.navItem {
    color: #BEBEBE;
}

/* Hover Selector for Nav Items */
.navItem:hover {
    color: white;
}


/* ===Background for Different Pages=== */
/* CSS for Home and Profile */
.adminPage {
    background-image: linear-gradient(#E1D1BC, #EBE0D2); 
    width: 100%;
    height: 100%;
}

/* CSS for Login/Register Pages */
.loginPage {
    background-image: linear-gradient(#4193A6,#4ba4b8, #73b8c8); 
    width: 100%;
    height: 100%;
}

/* CSS for Hangman Game Pages */
.hangmanGamePage {
    background-image: linear-gradient(#084A59,#156A7D, #187D94);
    width: 100%;
    height: 100%;
}


/* ===play_hangman.html CSS=== */
/* Start Page Button to Choose Game Mode */
/* Button Size for Screens Above 300px */
.startBtn {
    border: 3px solid #084A59;
    border-radius: 10px;
    width: 250px;
    height: 70px;
    font-size: 18px;
    font-weight: bold;
    font-family: monospace;
    background-color: #EBE0D2;
    color: #084A59;
}
    /* Button Size for Screens Under 300px */
    @media screen and (max-width: 300px) {
        .startBtn {
            width: 95%;
            height: 90px;
        }
    }

/* Hover Selector for Start Button */
.startBtn:hover{
    transform: scale(1.05);
    box-shadow: 0 0 15px 1px;
}

/* Active Selector for Start Button */
.startBtn:active{
    transform: scale(1.05) translateY(3px);
    box-shadow: 0 0 10px 1px;
}


/* ===singleplayer_hangman.html CSS=== */
/* Canvas for Hangman Game Play Pages*/
#singleplayerCanvas {
    width: 900px; 
    height: 600px;
    border: 7px solid #333333;
}

/* Help Button for Rules */
#helpBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    cursor: pointer;
}

/* Logo displayed on the play_hangman Page*/
#startLogo {
    width: 400px;
}

/* Div in singleplayer_hangman Page for Guess Section */
#guess {
    display: flexbox;
    flex-direction: column;
    position: relative;
    bottom: 135px;
    gap: 2px;
}

/* Heading in singleplayer_hangman page Guess Section */
#guessTitle {
    color: #084A59;
}

/* Input Children within Guess Form in Guess Section*/
.guessElement{
    border-radius: 5px;
    border-color: #084A59;
    font-family: monospace;
    height: 40px;
}

/* First Input Child in Guess Form for User Inputted Guesses */
#guessText {
    text-align: center;
}

/* Second Input Child in Guess Form for Submitting Guesses */
#guessBtn {
    background-color: #084A59;
    color: #EBE0D2;
    font-size: 20px;
}

/* Warning Display Below Guess Form */
#guessWarning {
    padding-top: 10px;
    font-size: 18px;
    color: #B3351E;
}

/* Result Display After Game Ends */
#result {
    position: relative;
    bottom: 135px;
    color: #084A59;
}

/* End Buttons Div for Two Ending Buttons */
#endBtns {
    position: relative;
    bottom: 120px;
}

/* Ending Buttons Displayed at the End of Game */
.endBtn {
    border-radius: 5px;
    border-color: #084A59;
    font-family: monospace;
    font-weight: bold;
    height: 50px;
    width: 150px;
}

/* Footer */
.footer{
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%);
    color: #084A59;
}

/* Start Button for Canvas on Mobile Phones */
/* #mobileStart{
       display: none; 
} */

    /* Various ID Sizes for Screens Under 920px */
    @media screen and (max-width: 920px) {
        #singleplayerCanvas {
            width: 680px;
        }
    }
    /* Various ID Sizes for Screens Under 720px */
    @media screen and (max-width: 720px) {
        #singleplayerCanvas {
            width: 480px;
        }
    }
    /* Various ID Sizes for Screens Under 520px */
    @media screen and (max-width: 520px) {
        #singleplayerCanvas {
            width: 380px;
        }
        #guess {
            bottom: 135px;
        }
        #result {
            font-size: 1em;
            bottom: 160px;
        }
        #endBtns {
            bottom: 130px;
        }
    }
    /* Various ID Sizes for Screens Under 420px */
    @media screen and (max-width: 420px) {
        #singleplayerCanvas {
            width: 280px;
        }
        #guess {
            bottom: 180px;
        }
        #guessTitle {
            font-size: 1em;
        }
        #guessWarning {
            font-size: 1em;
        }
        #result {
            font-size: 0.9em;
            bottom: 190px;
        }
        #endBtns {
            bottom: 150px;
        }
        .endBtn {
            width: 130px;
            font-size: 0.9em;
        }
    }
    /* Various ID Sizes for Screens Under 320px */
    @media screen and (max-width: 320px) {
        #singleplayerCanvas {
            width: 100%;
        }
        #guess {
            bottom: 250px;
        }
        #guessTitle {
            font-size: .9em;
        }
        #result {
            font-size: 0.8em;
            bottom: 250px;
        }
        #endBtns {
            bottom: 210px;
        }
        .endBtn {
            width: 200px;
        }
    }

    /* Mobile Phones with Max Device Width 480px */
    /* @media screen and (max-device-width: 480px) {
        #mobileStart{
            width: 200px;
            height: 100px;
            border-radius: 10px;
            border: 6px solid #F3EDE0;
            background-color: #084A59;
            color:#F3EDE0;
            font: 30px monospace;
            position: absolute;
            top: 71.1%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
    } */