/*

    Copyright 2023 The Many Brains Project, Inc. and McLean Hospital.

     This code is made available under a GNU Lesser General Public License 3.0
     (LGPLv3).
     https://www.gnu.org/licenses/lgpl-3.0.html.

    Author: Paolo Martini
    Last updated: 03.02.2023
    Version: Flanker_AoU.v1.Mar23

*/

*
{
    border-radius: 0;
    box-sizing: border-box;
}

*::after, *::before
{
    box-sizing: border-box;
}

html
{
    width: 100vw;
    height: 100vh;
}

body
{
    width: 100vw;
    height: 100vh;
    margin: auto;
    background: #ffffff;
    color: #000000;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 13pt;
    text-align: center;
}

.button
{
    border: 2px solid #f1c40f;
    border-radius: 1em;
    background: transparent;
    color: #000000;
    box-shadow: 0 5px 15px 5px grey
}

.button:active
{
    box-shadow: 0 5px 15px 1px lightgrey
}

.button:focus
{
    outline: none
}

.stimulus
{
    width: 300px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -150px;
    margin-left: -150px;
    text-align: center;
    color: #424242;
    font-size:70pt;
    line-height: 70%;
    font-family: Courier, monospace;
}

.responseButton
{
    -webkit-appearance: none;
    background: darkgrey;
    font-size: 40pt;
    line-height: 2.5em;
    width: 150px;
    margin: 5px;
    border: 5px solid lightgray;
    border-right: 5px solid #727272;
    border-bottom: 5px solid #727272;
    padding: 0;
    color: #ffffff;
    text-align: center;
    font-family: Palatino Linotype, Bookman Antiqua, Palatino, serif;
    -webkit-tap-highlight-color: transparent;
    cursor: none;
}

#left
{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -265px;
}

#right
{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: 105px;
}

.blink
{
    animation: blink 1s steps(1, end) infinite;
}

@keyframes blink
{
    0% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}