/*
  File: hangman.css
  Author: Shane John
  Date: 2025-07-10
  Course: CPSC 3750 – Web Application Development
  Purpose: General Stylings
  Note: Figureing out text-shadow with the background information was my favorite of design this!
*/ 
body 
{
    background-color: #ffb974;
    background-image: url('images/sky.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
}
footer
{
   background-image: url('images/backmount.png');
    background-size: cover;
    background-repeat: repeat-x;
    background-position: center;
    margin-left: -3%;
    position: fixed;
    bottom: -250px;
    width: 2000px;
    height: 50em;
    z-index: 1000;
}

/* All Page Elements*/
#game-container 
{
    font-family: Arial;
    display: inline-flex; 
    gap: 20px;
    margin-top: 50px;
    position: relative;
    z-index: 2000;
}
/* All Game Elements*/
#game-container section 
{
    color: #522D80;
    text-align: center;
    background-color: white;
    border: 5px solid #f28f44c9;
    border-radius: 20px;
}

/* Game Intro Information */
#background
{
    color: #ffb974;
    text-shadow:
        -2px 0 #673f99,
        2px 0 #673f99,
        0 -2px #673f99,
        0 2px #673f99;
}
#background p
{
    font-size: 18pt;
}

/* In-Game Word Display */
#wordToGuess 
{
    font-size: 24px;
    letter-spacing: 2px;
    white-space: pre;
}
/* Cheater Check Box */
#cheatMode
{
    margin-top: 10%;
}

/* Letter Grid and All Buttons */
#letters input 
{
    display: none;
}
.letter-grid 
{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: min-content;
    grid-gap: 10px;
    max-width: auto;
    margin: 20px;
}
.letter-btn 
{
    padding: 5px;
    font-size: 17pt;
    cursor: pointer;
    user-select: none;
    background-color: #673f99;
    color: white;
    border: 2px solid #f28f44c9;
    border-radius: 10px;
}