/* Colby Noah / 5/14/2023 / CS 290 */

/* Universal button */
button {
    background-color: rgb(255, 222, 173);
    transition-duration: 0.4s;
}

/* On hover */
button:hover {
    background-color:blanchedalmond;
    cursor:pointer;
}

body {
    background-color:cadetblue;
}

header {
    color:black;
    border: 4px black solid;
    background-color:navajowhite;
    padding: 15px;
    text-align: center;
}

/* A class to hold the goal, wins, and losses above the game board */
.topInfo-container {
    display: flex;
    align-items: center;
    padding: 5px;
}

/* A class for the goal text */
.goal {
    width: 50%;
    font-size: x-large;
}

/* A class for the wins & losses text */
.winsLosses {
    display: flex;
    width: 50%;
    gap: 25%;
    font-size: x-large;
}

/* A container for the main area of the game */
.game-container {
    display: flex;
    padding: 20px;
    height: 300px;
    justify-content: center;
    align-items: center;
}

/* A container for the 4 numbers */
.number-container {
    width: 40%; 
    height: 300px;
    display: grid;
    align-content: center;
    gap: 10px;
    /* This makes square */
    grid-template-columns: 40% 40%;
    grid-template-rows: 40% 40%;
}

.number-container > button {
    font-size: xx-large;
    border: 4px black solid;
}

/* A flex container for the operator (+, -, *) buttons */
.operator-container {
    display: flex;
    flex-direction: column;
    justify-items: start;
    gap: 20px;
    width: 20%;
}

/* Operator buttons */
.operator-container > button {
    /* Centers the symbols within the buttons */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: xx-large;
    width: 25%;
    padding: 10px;
    border: 4px black solid;
}

/* A container for the work area */
.work-container {
    display: flex;
    flex-direction: column;    
    border: 4px black solid;
    width: 40%;
    height: 100%;
    gap: 20px;
}

.work-container > div {
    font-size: xx-large;
}

/* Message to the user */
.message {
    font-size: x-large;
    padding: 5px;
}

/* The new game button */
.newGame > button {
    width: 15%;
    height: 75px;
    margin: 10px;
    font-size: x-large;
    border: 4px black solid;
    background-color:rgb(233, 150, 122);
}

/* Hovering over the new game button */
.newGame > button:hover {
    background-color: rgb(227, 176, 159);
    cursor:pointer;
}   

footer {
    color:black;
    border: 4px black solid;
    background-color:navajowhite;
    padding: 2px;
    text-align: center;
    font-size: large;
}