/*
    Stylesheet for the memory game
    @author: Yujin Jeong
    @author: Chat GPT
    @version: 1.0
*/


/* Universal selector for changing font for the entire page */
* {
    font-family: Arial;
}

/* Remove default margin and padding and take full height for better window size calculations */
html, body {
    margin  : 0;
    padding : 0;
    height  : 100%;
}

.top-section-style {
    text-align  : center;
    padding     : 16px 20px;
    border-bottom: 1px solid grey;
}

label {
    font-size: 30px;
}

input {
    width       : 100px;
    height      : 20px; 
    margin-top  : 20px;
}

button {
    width       : 50px;
    height      : 26px;
    font-weight : bold;
}

/* Game board styling (width is matched to the browser width) */
.game-board-border {
    position: relative;
    width   : 100vw;
}

/* Game message border */
.game-message-style {
    padding     : 15px 20px;
    margin      : 15px auto;
    font-size   : 15px;
    max-width   : 250px;
}

/* Disable button click */
.disable-click-button {
    cursor        : not-allowed;
    pointer-events: none;
}

.game-button {
    position        : absolute;
    border          : 1px solid black;
    height          : 5em;
    width           : 10em;
    cursor          : pointer;
    display         : flex;
    align-items     : center;
    justify-content : center;
}