html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

@font-face {
    font-family: "Rubik-Regular";
    src: url(assets/Rubik-Regular.ttf);
}

@font-face {
    font-family: "Rubik-Medium";
    src: url(assets/Rubik-Medium.ttf);
}


body {
    background: url(figures/backgrounds2.svg);
    overflow: hidden;
    user-select: none;
    font-family: 'Rubik-Regular', sans-serif;
    /* text-shadow: 0 0 3px #000000, 0 0 5px #000000; */
}

#endGameEl{
    position: absolute;
    top: 12%;
    left: 17vw;
    text-align: center;
    font-size: 1000%;
}


#touchField{
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    overflow-y: hidden;
    padding: 0;
    margin: 0;
}


#topleft, #topright, #bottomleft, #bottomright{
    padding: 2.5%;
    box-sizing: border-box;
}

.active{
    animation: click 300ms ease-in-out;
    border:solid 0px #333;
}


@keyframes click {
    0%{
        border-width: 0;
    }
    50%{
        border-width: 8px;
    }
    100%{
        border-width: 0;
    }
}

.showAnswers .correct.R{ box-shadow: 0 0 0pt 15pt #D9192D;}

.showAnswers .correct.G{ box-shadow: 0 0 0pt 15pt #03AC13;}

.showAnswers .correct.B{ box-shadow: 0 0 0pt 15pt #0066CC;}

.showAnswers .correct.Y{ box-shadow: 0 0 0pt 15pt #EAB500;}

.timer {
    position: absolute;
    height: 2%;
    width: 75%;
    border-radius: 250px 250px 250px 250px ;
    top:15%;
    left:10%;
    overflow: hidden;
}

.timer:before{
    content: "";
    position: absolute;
    width:100%;
    height: 100%;
    background: white;
    animation: fill 4.3s linear infinite;
}

@keyframes fill {
    from{left:0%;}
    to{left:100%;}
}

#topleft {
    position: absolute;
    height: 30vh;
    width: 30vh;
    border-radius: 100%;
    background: #3CB043;
    margin-top: 25vh;
    margin-left: 30vw;
    font-size: 500%;
    text-align: center;
    line-height: 20vh;
    
}


#topright {
    position: absolute;
    height: 30vh;
    width: 30vh;
    border-radius: 100%;
    background: #D9192D;
    margin-top: 25vh;
    margin-left: 50vw;
    font-size: 500%;
    text-align: center;
    line-height: 20vh;
}

#bottomleft {
    position: absolute;
    height: 30vh;
    width: 30vh;
    border-radius: 100%;
    margin-top: 60vh;
    margin-left: 30vw;
    font-size: 500%;
    text-align: center;
    line-height: 20vh;
}


#bottomright {
    position: absolute;
    height: 30vh;
    width: 30vh;
    border-radius: 100%;
    background: #0066CC;
    margin-top: 60vh;
    margin-left: 50vw;
    font-size: 500%;
    text-align: center;
    line-height: 20vh;
} 

.challengeEnd #topleft, .challengeEnd #topright, .challengeEnd #bottomleft, .challengeEnd #bottomright{
    opacity: 0;
}

#topleft, #topright, #bottomleft, #bottomright{
    opacity: 1;
    transition: opacity 500ms;
}
.paint_R .paintable { fill: #D9192D !important; }
.paint_G .paintable { fill: #03AC13 !important; }
.paint_B .paintable { fill: #0066CC !important; }
.paint_Y .paintable { fill: #EAB500 !important; }


#scoreText {
    font-size: 300%;
    position: absolute;
    top: 5%;
    left: 15%;
}

#correct{
    position: absolute;
    height: 7vh;
    width: 7vh;
    border-radius: 100%;
    background: #03AC13;
    top: 5%;
    right: 25%;
    font-size: 150%;
    text-align: center;
    line-height: 7vh;
    color: white;
}

#correctEnd{
    position: absolute;
    height: 20vh;
    width: 20vh;
    border-radius: 100%;
    background: #03AC13;
    top: 100%;
    left: 20%;
    font-size: 50%;
    text-align: center;
    line-height: 20vh;
    color: white;
}

#incorrect{
    position: absolute;
    height: 7vh;
    width: 7vh;
    border-radius: 100%;
    background: #D9192D;
    top: 5%;
    right: 20%;
    font-size: 150%;
    text-align: center;
    line-height: 7vh;
    color: white;
}

#incorrectEnd{
    position: absolute;
    height: 20vh;
    width: 20vh;
    border-radius: 250px 250px 250px 250px;
    background: #D9192D;
    top: 100%;
    left: 65%;
    font-size: 50%;
    text-align: center;
    line-height: 20vh;
    color: white;
}

.rectangle{
    position: absolute;
    width: 250px;
    height: 120px;
    right: 40% ;
    top: 60%;
}

.howToRect{
    position: absolute;
    background-color: #2C3338;
    border-radius: 25px 25px 25px 25px;
    width: 50%;
    height: 8%;
    margin-left: 25%;
    margin-top: 7.5%;
    font-size: 35px;
    line-height: 9vh;
    color: white;
    border-style: solid;
    border-width: 3px;
}