/**
 * This file was created by Mathieu Stenzel (student number: 4367489)
 */

body {
    overflow: hidden;   /* For not being able to scoll with the arrow keys */
}

.place-middle {
    margin-top: 5%;
    margin-left: 10%;
    float:left;
    flex-direction: column;
}

canvas {
    border-radius: 10px;
    border-style: double;
    box-shadow: 10px 10px rgba(0, 0, 0, 0.1);
}

.flexbox-container {
    display: none;
}

p.flash {
    animation: blinker 2s linear infinite;
    color: rgb(0, 0, 0);
}

#restart-button {
    margin-top: 2%;
}

@keyframes blinker {
    50% {
        opacity: 0.1;
    }
}

@media screen and (max-width: 900px) {   
    body {
        overflow: initial;   /* reset original value, because arrow keys are not a problem on mobile devices */
    }

    .place-middle {           /* To Place in the middle of screen */
        margin: 0 auto;
        display: flex;
        justify-content: center;
        float: none;
    }
    
    canvas {
        box-shadow: 0 0;
    }
    
    .flexbox-container {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }

    .flexbox-container-column {
        display: flex;
        flex-direction: column-reverse;
    }
    
    .button {
        width: 20vw;
        height: 10vw;
    }
}