/* GENERAL RESET */
* {
    font-family: sans-serif;
}

body {
    margin-top: 0;
}

/* LAYOUT: Centers the game buttons horizontally */
.btn-container {
    display: flex;
    justify-content: center;
}

h1,
h2 {
    text-align: center;
}

/* BUTTON STYLING */
.btn {
    font-size: 30px;
    height: 200px;
    width: 200px;

    /* SHAPE: Rounded corners for the iconic Simon look */
    border-radius: 20%;
    border: 10px solid black;

    /* SPACING: Separates the buttons */
    margin-left: 20px;
    margin-top: 20px;

    /* ALIGNMENT: Centers any text inside buttons (if added later) */
    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;
}

/* INDIVIDUAL COLORS */
.red {
    background-color: rgb(245, 70, 70);
}

.yellow {
    background-color: rgb(255, 200, 0);
}

.green {
    background-color: rgb(40, 200, 150);
}

.blue {
    background-color: rgb(90, 200, 250);
}

/* ANIMATION CLASS (Critical for JS) */
/* JS adds this class to make the button 'Flash' white */
.flash {
    background-color: white;
    box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.7);
}

/* ERROR CLASS: Used when user gets it wrong */
.redflash {
    background-color: red;
}