body,html{background:#3462ac 0% 0% no-repeat padding-box;font-size:16px}.container{margin-top:20px;margin-bottom:20px;height:calc(100vh - (2* 20px))}#instructions{position:absolute;z-index:4;background-color:#3462ac;width:100vw;height:100vh;top:calc( 20px * -1);left:calc( 20px * -1);right:calc( 20px * -1);flex-direction:column;justify-content:center;display:flex;color:#fff;text-align:center}.button{z-index:3;background-color:#fff;border:#fff;color:#3462ac;font-size:1.5rem;font-weight:bold;pointer-events:all}.card{margin-top:calc( 20px * 1.5)}.card-finish{align-self:center}.card-finish h1,.card-finish h3{color:#fff;text-align:center}#container-overlay{background-color:#00000099;width:100vw;height:100vh;position:absolute;box-sizing:border-box;z-index:2;top:calc( 20px * -1);left:calc( 20px * -1);right:calc( 20px * -1);pointer-events:none}#container-overlay .close{position:absolute;top:20px;right:20px}#column-results{height:calc(100vh - (2* 20px))}#column-game{height:calc(100vh - (2* 20px))}#container-results{background:#7191c5;height:calc(100% + (20px));margin-top:calc((20px / 2) * -1);padding:calc(20px / 1) 0;border-radius:10px}#container-results .row{height:100%;align-content:space-between}#container-results .col-sm-12{max-width:calc(100% - (20px * 2 ));flex-basis:calc(100% - (20px * 2));height:calc((calc(100vh - (2* 20px)) - (4 * 20px)) / 4);background-color:#3e6ab0;box-sizing:border-box;margin:0 calc(20px / 1);padding:0}#container-results .col-sm-12:empty::after{content:attr(data-title);color:white;font-size:1.1vw;font-weight:bold;align-items:center;justify-content:space-around;text-align:center;width:100%;height:100%;display:flex;position:relative;transition:1s linear all}#container-results .resultcard{width:100%;height:100%;margin:0;padding:0;box-sizing:border-box;background-size:cover;background-position:center center;transition:1s linear all;cursor:pointer}#container-results .resultcard::after{content:" ";background-color:#FEFFF200;width:100%;height:100%;display:block;position:relative;transition:1s linear all}#container-game{height:100%}#container-game .row{height:inherit}#container-game .col-sm-1{max-width:calc(25% - 20px);flex-basis:calc(25% - 20px);height:calc((calc(100vh - (2* 20px)) - (4 * 20px))/ 4);background-color:#2e5798;box-sizing:border-box;margin:calc(20px / 2);padding:0}#container-game .col-sm-1 .gamecard{height:100%;width:100%;box-sizing:border-box;background-size:cover;background-position:center center;transition:1s linear all;cursor:pointer}#container-game .col-sm-1 .gamecard::after{content:attr(data-title);color:white;font-size:1.2vw;font-weight:bold;align-items:center;justify-content:space-around;text-align:center;text-shadow:0px 0px 10px black;width:calc( 100% - ( $margin * 2 ));height:100%;display:flex;position:relative;transition:1s linear all;padding-left:20px;padding-right:20px}#container-game .col-sm-1 .gamecard.active{opacity:1}#container-game .col-sm-1 .gamecard.active::after{background-color:#10449499;transition:none}#container-game .col-sm-1 .gamecard.correct{pointer-events:none}#container-game .col-sm-1 .gamecard.correct::after{background-color:#2e5798;content:""}#container-game .col-sm-1 .gamecard.incorrect{pointer-events:none}#container-game .col-sm-1 .gamecard.incorrect::after{background-color:#A2303099;transition:none}