@media (min-width: 601px)  { 
    html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        font-family: sans-serif;
        font-size: 1.2vmax;
    }

    #container {
        align-items: start;
        justify-items: center;
        display: grid;
        grid-template-columns: 60% 40%;
    }

    #instructions_container {
        margin: 2vmax;
        margin-top: 1vmax;
    }

     /* note this is assigned for the 'next task loading' screen */
    .centred {
        display: block !important;
        width: 90%;
        font-size:  4vmin;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* arrows */
    #arrows_grid {
        display: grid;
        place-items: center;
        text-align: center;
        grid-template-columns: repeat(3, min-content);
        grid-template-areas: "up up up"
                             "down down down"
                             "left_a spacebar right_a"
                             "count count count";
    }

    .up{ grid-area: up }
    .down{ grid-area: down } /* top: -3vmax; */
    .left{ grid-area: left_a } /* top: -9vmax; */
    .space{ grid-area: spacebar }/* top: -9vmax; */
    #spacebar{ position: relative; top: 3vmax } /* top: -7vmax; */
    .right{ grid-area: right_a }/* top: -9vmax; */
    #key_presses{  grid-area: count; 
        position: relative; 
        top: -2vmax;
        font-size: 1.2vmax
    } /* top: -12vmax; */
    .arrow { font-size: 11vmax } /* font-size: 13vmax */
    #reset{ font-size: 3vmax } /* font-size: 13vmax */
    .label{ pointer-events: none }  
}

/* mobile */
@media (max-width: 600px)  { 
    html, body {
        font-family: sans-serif;
        font-size: 3vmin;
    }

    #container {
        display: grid;
        place-items: center;
        text-align: left;
    }

    #instructions_container {
        margin-left: 3vmin;
        margin-right: 3vmin;
    }

    #arrows_grid {
        display: grid;
        place-items: center;
        grid-template-columns: repeat(3, min-content);
        grid-template-areas: "up up up"
                             "down down down"
                             "left_a spacebar right_a"
                             "count count count";
    }

    .up{ grid-area: up }
    .down{ grid-area: down }
    .left{ grid-area: left_a }
    .space{ grid-area: spacebar }
    .right{ grid-area: right_a }
    #key_presses{ grid-area: count;
        position: relative;
        top: -3vmin;
    }
    #spacebar{
        position: relative;
        top: 5vmin;
    }
    .arrow { font-size: 23vmin; }
    #reset{ font-size: 6.5vmin; }
    .label{ pointer-events: none; }
}

.animate{
    animation: shake  0.2s;
}
 
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}