/* -------------------- ALL ASPECT RATIOS -------------------- */

body {
    background-color: rgb(0,0,0);
    background-repeat: no-repeat;
    background-position: center;
}

br {
   display: block;
   margin: 0px 0px;
   content: " ";
}

#jspsych-progressbar-container {
    color: #555;
    background-color: #000000;
    text-align: center;
    width: 100%;
    line-height: 1em;
  }
  #jspsych-progressbar-outer {
    background-color: rgb(140, 140, 140);
    margin: auto;
    height: 14px;
    display: inline-block;
    vertical-align: middle;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  }
  #jspsych-progressbar-inner {
    background-color: rgb(255, 196, 0);
    width: 0%;
    height: 100%;
  }
  

/* ------------------------------------------------------------- */
/* -------------------- ASPECT RATIO < 16:9 -------------------- */
/* ------------------------------------------------------------- */

@media screen and (max-aspect-ratio: 16/9) {
    
/* DISPLAY */    
    
body {
    background-size: 98vw 54vw;
}

.games-check {
    margin: 0px 0px;
}

.games-check-button img{
    width: 12vw;
}

.games-secret-check-button {
    margin-right: 75vw;
    margin-top:35vw;
}

.games-secret-check-button img{
    width: 12vw;
    height: 12vw;
}

#jspsych-progressbar-outer {
    width: 98%;
}

/* FIND THE SHAPE - SINGLE */ 

.games-fts-single-card {
    width: 60vw;
    height:42.85vw;
}

.games-fts-single-card-red-selected {
    box-shadow: 33.5vw 0px 1.2vw 4vw #000000, 0px 0px 2vw 2vw rgb(255, 0, 0);
}

.games-fts-single-card-blue-selected {
    box-shadow: -33.5vw 0px 1.2vw 4vw #000000, 0px 0px 2vw 2vw rgb(0, 81, 255);
}

.games-fts-single-btngroup {
    margin: 0px 0px;
    margin-top: -21.8vw;
}

.games-fts-single-left {
    margin: 0px 0px;
    margin-right: 0.2vw;
}

.games-fts-single-right {
    margin: 0px 0px;
    margin-left: 0.2vw;
}

.games-fts-single-left img{
    width:29.7vw;
    height:19.6vw;
}   

.games-fts-single-right img{
    width:29.7vw;
    height:19.6vw;
}   


/* FIND THE SHAPE */ 

.games-fts-card-top-left, .games-fts-card-top-right, .games-fts-card-bottom-left, .games-fts-card-bottom-right {
    margin: 0px 0px;
    width: 35vw;
    height: 25vw;
}

.games-fts-card-top-left, .games-fts-card-top-right {
    margin-bottom: 1vw;
}

.games-fts-card-bottom-left, .games-fts-card-bottom-right {
    margin-top: 1vw;
}

.games-fts-card-top-left, .games-fts-card-bottom-left{
    margin-right: 5vw;
}

.games-fts-card-top-right, .games-fts-card-bottom-right{
    margin-left: 5vw;
}

.games-fts-card-red-selected {
    box-shadow: -8vw 6vw 1vw -7vw rgb(255, 0, 0);
}

.games-fts-card-blue-selected {
    box-shadow: 8vw 6vw 1vw -7vw rgb(0, 81, 255);
}

.games-fts-btngroup {
    margin: 0px 0px;
    margin-top: -40vw;
}

.games-fts-button {
    width:16vw;
    height:11vw;
}

.games-fts-top-left-red, .games-fts-top-left-blue, .games-fts-top-right-red, .games-fts-top-right-blue, .games-fts-bottom-left-red, .games-fts-bottom-left-blue, .games-fts-bottom-right-red, .games-fts-bottom-right-blue {
    margin: 0px 0px;
}

.games-fts-top-left-red, .games-fts-top-right-red, .games-fts-bottom-left-red, .games-fts-bottom-right-red {
    margin-right: 0.5vw;
}

.games-fts-top-left-blue, .games-fts-top-right-blue, .games-fts-bottom-left-blue, .games-fts-bottom-right-blue {
    margin-left: 0.5vw;
}

.games-fts-top-left-red, .games-fts-top-left-blue, .games-fts-top-right-red, .games-fts-top-right-blue {
    margin-bottom: 8vw;
}

.games-fts-bottom-left-red, .games-fts-bottom-left-blue, .games-fts-bottom-right-red, .games-fts-bottom-right-blue {
    margin-top: 8vw;
}

.games-fts-top-left-blue, .games-fts-bottom-left-blue {
    margin-right: 12vw;
}

.games-fts-top-right-red, .games-fts-bottom-right-red {
    margin-left: 0vw;
}


/* FIND THE SHAPE 2*/ 

.games-fts-2-card-left, .games-fts-2-card-right {
    margin: 0px 0px;
    margin-right: 3vw;
    margin-left: 3vw;
    margin-bottom: 20vw;
    width: 42vw;
}

.games-fts-2-btngroup {
    margin: 0px 0px;
    margin-top: -35vw;
}

.games-fts-2-button {
    width:20vw;
}

.games-fts-2-left-red, .games-fts-2-left-blue, .games-fts-2-right-red, .games-fts-2-right-blue {
    margin: 0px 0px;
}

.games-fts-2-left-blue {
    margin-left: 1vw;
    margin-right: 3.5vw;
}

.games-fts-2-right-red {
    margin-left: 3.5vw;
    margin-right: 1vw;
}

}

/* ------------------------------------------------------------- */
/* -------------------- ASPECT RATIO > 16:9 -------------------- */
/* ------------------------------------------------------------- */

@media screen and (min-aspect-ratio: 16/9) {

body {
    background-size: 174vh 98vh;
}

.games-check-button {
    margin: 0px 0px;
}   

.games-check-button img{
    width: 21.6vh;
}   

.games-secret-check-button {
    margin-right: 133.3vh;
    margin-top:62.2vh;
}

.games-secret-check-button img{
    width: 21.6vh;
    height: 21.6vh;
}

#jspsych-progressbar-outer {
    width: 174vh;
}

/* FIND THE SHAPE - SINGLE */ 

.games-fts-single-card {
    width: 106.67vh;
}

.games-fts-single-card-red-selected {
    box-shadow: 60vh 0px 2vh 7vh #000000, 0px 0px 3.5vh 3.5vh rgb(255, 0, 0);
}

.games-fts-single-card-blue-selected {
    box-shadow: -60vh 0px 2vh 7vh #000000, 0px 0px 3.5vh 3.5vh rgb(0, 12, 180);
}

.games-fts-single-btngroup {
    margin: 0px 0px;
    margin-top: -38.75vh;
}

.games-fts-single-left {
    margin: 0px 0px;
    margin-right: 0.4vh;
}

.games-fts-single-right {
    margin: 0px 0px;
    margin-left: 0.4vh;
}

.games-fts-single-left img{
    width: 52.8vh;
    height:34.84vh;
}   

.games-fts-single-right img{
    width:52.8vh;
    height:34.84vh;
}   


/* FIND THE SHAPE */ 

.games-fts-card-top-left, .games-fts-card-top-right, .games-fts-card-bottom-left, .games-fts-card-bottom-right {
    margin: 0px 0px;
    width: 62.22vh;
    height: 44.44vh;
}

.games-fts-card-top-left, .games-fts-card-top-right {
    margin-bottom: 1.78vh;
}

.games-fts-card-bottom-left, .games-fts-card-bottom-right {
    margin-top: 1.78vh;
}

.games-fts-card-top-left, .games-fts-card-bottom-left{
    margin-right: 8.88vh;
}

.games-fts-card-top-right, .games-fts-card-bottom-right{
    margin-left: 8.88vh;
}

.games-fts-card-red-selected {
    box-shadow: -14.22vh 10.67vh 1.77vh -12.44vh rgb(255, 0, 0);
}

.games-fts-card-blue-selected {
    box-shadow: 14.22vh 10.67vh 1.77vh -12.44vh rgb(0, 81, 255);
}

.games-fts-btngroup {
    margin: 0px 0px;
    margin-top: -71.11vh;
}

.games-fts-button {
    width:28.44vh;
    height:19.55vh;
}

.games-fts-top-left-red, .games-fts-top-left-blue, .games-fts-top-right-red, .games-fts-top-right-blue, .games-fts-bottom-left-red, .games-fts-bottom-left-blue, .games-fts-bottom-right-red, .games-fts-bottom-right-blue {
    margin: 0px 0px;
}

.games-fts-top-left-red, .games-fts-top-right-red, .games-fts-bottom-left-red, .games-fts-bottom-right-red {
    margin-right: 0.88vh;
}

.games-fts-top-left-blue, .games-fts-top-right-blue, .games-fts-bottom-left-blue, .games-fts-bottom-right-blue {
    margin-left: 0.88vh;
}

.games-fts-top-left-red, .games-fts-top-left-blue, .games-fts-top-right-red, .games-fts-top-right-blue {
    margin-bottom: 14.22vh;
}

.games-fts-bottom-left-red, .games-fts-bottom-left-blue, .games-fts-bottom-right-red, .games-fts-bottom-right-blue {
    margin-top: 14.22vh;
}

.games-fts-top-left-blue, .games-fts-bottom-left-blue {
    margin-right: 21.33vh;
}

.games-fts-top-right-red, .games-fts-bottom-right-red {
    margin-left: 0vw;
}


/* FIND THE SHAPE 2*/ 

.games-fts-2-card-left, .games-fts-2-card-right {
    margin: 0px 0px;
    margin-right: 5.33vh;
    margin-left: 5.33vh;
    margin-bottom: 35.6vh;
    width: 74.67vh;
}

.games-fts-2-btngroup {
    margin: 0px 0px;
    margin-top: -62.2vh;
}

.games-fts-2-button {
    width:35.6vh;
}

.games-fts-2-left-red, .games-fts-2-left-blue, .games-fts-2-right-red, .games-fts-2-right-blue {
    margin: 0px 0px;
}

.games-fts-2-left-blue {
    margin-left: 1.78vh;
    margin-right: 6.22vh;
}

.games-fts-2-right-red {
    margin-left: 6.22vh;
    margin-right: 1.78vh;
}

}