body {
    text-align: center;
    background-color: rgb(216, 183, 123);
}

.gameOverbody {
    background-color: red;
}

.normal {
    width: 10rem;
    height: 10rem;
    /* margin: 1rem; */
    margin: 0.5rem;
    font-size: 3rem;
    border: 5px solid black;
    border-radius: 10%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

button:focus {
    outline: 0 !important;
}


/* .messageButton {
    margin: 0;
    width: 3.5rem;
    height: 3.5rem;
    border: 2px solid black;
    border-radius: 50%;
    transition-property: border;
    transition-duration: 1s;
    transition-timing-function: ease-in;
}  */

@keyframes timeOutAnimation {
    from {
        background-color: rgb(216, 183, 123);
        width: 30vw;
    }
    to {
        background-color: white;
        width: 0;
    }
}

.timeOut {
    text-align: center;
    margin-left: 35%;
    height: 5vh;
    width: 30vw;
    background-color: rgb(216, 183, 123);
    animation-timing-function: linear;
}


/* .timeOutPrimary {
    animation-name: timeOutAnimation;
    animation-duration: 2s;
} */


/* .messageButton.messageButtonTransition {
    border: 2px solid white !important;
    border-radius: 0% !important;


}
*/

.controlledNormalButtons {
    border: 5px solid rgb(104, 96, 96);
    opacity: 0.7;
}

.playingButtons {
    margin-bottom: 2rem;
}

.footerMessage,
.play,.refresh {
    margin: 0 1rem 1vh auto;
    font-family: 'Metal Mania';
}

h1 {
    font-size: 5rem;
    margin: 0;
    color: brown;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

h2 {
    margin: 0 auto 1rem auto;
}

.r {
    background-color: red;
}

.y {
    background-color: yellow;
}

.b {
    background-color: blue;
}

.g {
    background-color: green;
}

.footer {
    text-align: right;
    margin: auto 2% auto auto;
    font-family: "Metal Mania";
}

.footerMessage {
    font-size: 3rem;
}

@font-face {
    font-family: "CustomFont";
    src: url("./fonts/spring.woff")
}

@media only screen and (min-width:300px) and (max-width:700px) {
    h1 {
        font-size: 4rem;
    }
    .footerMessage {
        font-size: 2rem;
    }
    @keyframes timeOutAnimation {
        from {
            background-color: rgb(216, 183, 123);
            width: 95vw;
        }
        to {
            background-color: white;
            width: 0;
        }
    }
    .timeOut {
        width: 95vw;
        margin-left: 2.5%;
    }
}

@media only screen and (max-width:300px) {
    .normal {
        width: 8rem;
        height: 8rem;
        /* margin: 1rem; */
        margin: 0.5rem;
        font-size: 2rem;
        border: 5px solid black;
        border-radius: 10%;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
    h1 {
        font-size: 3.5rem;
    }
    .footerMessage {
        font-size: 1.7rem;
    }
    @keyframes timeOutAnimation {
        from {
            background-color: rgb(216, 183, 123);
            width: 95vw;
        }
        to {
            background-color: white;
            width: 0;
        }
    }
    .timeOut {
        width: 95vw;
        margin-left: 2.5%;
    }
}