/*!
* Bootstrap Reboot v4.0.0-beta.2 (https://getbootstrap.com)
* Copyright 2011-2017 The Bootstrap Authors
* Copyright 2011-2017 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
*/
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
*,
*::before,
*::after {
 box-sizing: border-box;

   -webkit-touch-callout: none; /* iOS Safari */
     -webkit-user-select: none; /* Safari */
      -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
         -ms-user-select: none; /* Internet Explorer/Edge */
             user-select: none; /* Non-prefixed version, currently
                                   supported by Chrome, Edge, Opera and Firefox */
 
}


html {
 font-family: 'Bebas Neue', cursive;
 line-height: 1.15;
 -webkit-text-size-adjust: 100%;
 -ms-text-size-adjust: 100%;
 -ms-overflow-style: scrollbar;
 -webkit-tap-highlight-color: transparent;
}

@-ms-viewport {
 width: device-width;
}

article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
 display: block;
}

body {
 margin: 0;
 font-family: 'Bebas Neue', cursive;
 font-size: 1rem;
 font-weight: 400;
 line-height: 1.5;
 color: #212529;
 text-align: left;
 background-color: #fff;
}

[tabindex="-1"]:focus {
 outline: 0 !important;
}

hr {
 box-sizing: content-box;
 height: 0;
 overflow: visible;
}

h1, h2, h3, h4, h5, h6 {
 margin-top: 0;
 margin-bottom: 0.5rem;
}

p {
 margin-top: 0;
 margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
 text-decoration: underline;
 -webkit-text-decoration: underline dotted;
 text-decoration: underline dotted;
 cursor: help;
 border-bottom: 0;
}

address {
 margin-bottom: 1rem;
 font-style: normal;
 line-height: inherit;
}

ol,
ul,
dl {
 margin-top: 0;
 margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
 margin-bottom: 0;
}

dt {
 font-weight: 700;
}

dd {
 margin-bottom: .5rem;
 margin-left: 0;
}

blockquote {
 margin: 0 0 1rem;
}

dfn {
 font-style: italic;
}

b,
strong {
 font-weight: bolder;
}

small {
 font-size: 80%;
}

sub,
sup {
 position: relative;
 font-size: 75%;
 line-height: 0;
 vertical-align: baseline;
}

sub {
 bottom: -.25em;
}

sup {
 top: -.5em;
}

a {
 color: #007bff;
 text-decoration: none;
 background-color: transparent;
 -webkit-text-decoration-skip: objects;
}

a:hover {
 color: #0056b3;
 text-decoration: underline;
}

a:not([href]):not([tabindex]) {
 color: inherit;
 text-decoration: none;
}

a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
 color: inherit;
 text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
 outline: 0;
}

pre,
code,
kbd,
samp {
 font-family: 'Bebas Neue', cursive;
 font-size: 1em;
}

pre {
 margin-top: 0;
 margin-bottom: 1rem;
 overflow: auto;
 -ms-overflow-style: scrollbar;
}

figure {
 margin: 0 0 1rem;
}

img {
 vertical-align: middle;
 border-style: none;
}

svg:not(:root) {
 overflow: hidden;
}

a,
area,
button,
[role="button"],
input:not([type="range"]),
label,
select,
summary,
textarea {
 -ms-touch-action: manipulation;
 touch-action: manipulation;
}

table {
 border-collapse: collapse;
}

caption {
 padding-top: 0.75rem;
 padding-bottom: 0.75rem;
 color: #868e96;
 text-align: left;
 caption-side: bottom;
}

th {
 text-align: inherit;
}

label {
 display: inline-block;
 margin-bottom: .5rem;
}

button {
 border-radius: 0;
}

button:focus {
 outline: 1px dotted;
 outline: 5px auto -webkit-focus-ring-color;
}

input,
button,
select,
optgroup,
textarea {
 margin: 0;
 font-family: inherit;
 font-size: inherit;
 line-height: inherit;
}

button,
input {
 overflow: visible;
}

button,
select {
 text-transform: none;
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
 -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
 padding: 0;
 border-style: none;
}

input[type="radio"],
input[type="checkbox"] {
 box-sizing: border-box;
 padding: 0;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
 -webkit-appearance: listbox;
}

textarea {
 overflow: auto;
 resize: vertical;
}

fieldset {
 min-width: 0;
 padding: 0;
 margin: 0;
 border: 0;
}

legend {
 display: block;
 width: 100%;
 max-width: 100%;
 padding: 0;
 margin-bottom: .5rem;
 font-size: 1.5rem;
 line-height: inherit;
 color: inherit;
 white-space: normal;
}

progress {
 vertical-align: baseline;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
 height: auto;
}

[type="search"] {
 outline-offset: -2px;
 -webkit-appearance: none;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
 -webkit-appearance: none;
}

::-webkit-file-upload-button {
 font: inherit;
 -webkit-appearance: button;
}

output {
 display: inline-block;
}

summary {
 display: list-item;
}

template {
 display: none;
}

[hidden] {
 display: none !important;
}
html, body {
   overflow:hidden;
}

body {

   height:100%;
   font-family:'Bebas Neue', cursive;
   overflow-y:hidden;
}

* {
   box-sizing:border-box;
}

input, textarea, select {
   display:block;
   font-family:'Bebas Neue', cursive;
   margin:auto;
}

.hide {
   display:none;
}

h3 {
   font-size:20px;
}

h3, .point-cell {
   color:#ffff5f;
   color:#fff;
   text-align:center;
   font-weight:bold;
}

.modal-wrapper {
   background-color:rgba(0,0,0,.5);
   display:none;
   position:absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   z-index:2;
   height:100%; /* stupid safari */
}

.modal {
   position: relative;
   top: 50%;
   /* left: 50%; */
   /* right: 5%; */
   transform: translate(0%, -50%);
   background-color: #ffffff;
   z-index: 2;
   /* border-radius: 5px; */
   background-color: #efefef;
   overflow: auto;
   max-height: calc(100% - 50px);
   max-width: 600px;
   margin-left: auto;
   margin-right: auto;
   padding: 20px;
   box-shadow: 0.5vh 0.5vh 0 black;
   border: .5vh dashed white;
}

#teams {
   position:absolute;
   bottom:0;
   text-align:center;
   left:0;
   right:0;
   z-index:11;
   display:flex;
   /*display:none;*/
   /*
   align-items:baseline;
   justify-content:space-around;*/
}

#teams .team {
   display:inline-block;
   margin-left: 10px;
   margin-right: 10px;
   border: 1px solid white;
   padding: 5px;
   background-color: white;
   border: 4px dashed #6200ff;
   box-shadow: 0 0 10px black;
}

#teams .team:first-of-type {
   margin-left:50px;
}

#teams .team:last-of-type {
   margin-right:50px;
}

#teams div.name {
   border-bottom:2px solid black;
   text-align:center;
   color:black;
   display:inline-block;
   white-space:nowrap;
   min-width:100px;
   font-weight:bold;
   font-size:20px;
   margin-bottom:8px;
}

#teams div.points {
   background-color: #2a3698;
   color: #fff;
   font-weight:bold;
   font-size:20px;
}


.pointer span {
   display:inline-block;
   width:45%;
   color:white;
   font-size:30px;
   line-height:30px;
   cursor:pointer;
   background-color:white;
   font-family:'Bebas Neue', cursive;
   font-weight:bold;
}

.pointer .plus {
   color:#2da94e;
}

.pointer .minus {
   color:#ff0000;
}

#gameplay {
   filter:blur(5px);
   width:100%;
   position:absolute;
   top:0;
   left:0;
   bottom:0;
   right:0;
   background-image:url('../img/bg.png');
   background-size:cover;
   background-repeat:no-repeat;
}

#menu-links {
   font-size:20px;
   margin-top:20px;
}

#fullscreen {
   margin-top:20px;
   font-size:1vw;
}

#options select {
   font-size:22px;
   display:inline-block;
   height:40px;
   -webkit-appearance:menulist-button;
}

#options input[type='button'] {
   font-size: 4vh;
   display: inline;
   background: #00c4ff;
   color: white;
   text-shadow: 0.3vh 0.3vh 0 #000000a3;
   height: 6.5vh;
   border: .5vh dashed white;
   box-shadow: 0.5vh 0.5vh 0 #00000087;
   cursor: pointer;
   transition:ease-in-out 0.3s all;
}

#options input[type='button']:hover{
   transform:scale(1.05);
}

#options a {
   color:white; 
   text-decoration:underline;
}

#options a:hover {
   text-decoration:none;
}

#reset-all {
   /*font-size:20px;*/
}

#re-init {
   background:transparent;
   color:white;
   margin-left:10px;
   font-size:14px !important;
   /*padding:5px;*/
   height:auto !important;
   border:none;
}

.click-to-zoom {
   display:none;
}

.grid {
   opacity:0;
}

#question-modal {
   transform-origin:top left;
}

#question-modal > div {
   flex-direction:row;
}

#modal-header {
   display: flex;
   padding: 0;
   text-align: center;
   color: #fff;
   background-color: #00000063;
   z-index: 3;
   /* align-items: center; */
   font-size: 4vh;
   font-weight: 100;
   text-shadow: 2px 2px 0 black;
}

#modal-header > div {
   padding:5px;
   text-align:center;
   flex:1;
   align-items:center;
   justify-content:center;
   display:flex;
   max-width:100%;
}

#modal-header > div > div {
   max-width:100%;
}

#question-modal {
   z-index: 10;
   background-image: url(../img/bg.webp);
   background-size:cover;
}

.expanded {
   transition:.5s all ease; /*, .35s border-width step-end, 1s transform ease;*/
   border-width:0;
}

.modal, .modal-body {
   background-color: #00000000;
   color: #fff;
   text-align: center;
   text-shadow: 0.3vh 0.3vh 0 black;
}

#options .modal{
   background: linear-gradient(11deg, #cb8300, #dfc300);
   animation: scale-in 0.5s ease-in-out forwards;
   margin-top: -12vh;
}

.modal-body .modal-inner {
   overflow:auto;
   padding-left:20px;
   padding-right:20px;
   flex:1;
}

.modal-body {
   width:100%;
   display:flex;
   align-items:center;
   padding-top:20px;
   justify-content:center;
}

#question-title {
   /* font-weight:bold; */
   padding-left:10%;
   padding-right:10%;
}

.question, .answer {
   margin:auto;
}

.answers{
   text-shadow: 0 0 0 transparent;
   color: #3a494e;
   display: flex;
   line-height: 4.5vh;
   justify-content: center;
}

#question-modal .question {
   display:none;
   opacity:0;
}

#answer-button, #continue-button {
   cursor:pointer;
}

/*
#modal-header #continue-button {
   justify-content:left;
}*/

#question-modal .question {
   border-top: 3px dotted white;
   margin-top: 10px;
   padding-top: 10px;
}

#question-modal .reveal {
   transition: max-height 2s ease, opacity 2s ease;
   opacity:1;

}

.mathy {
   background-color:transparent;
}

kbd
{
   -moz-border-radius:3px;
   -moz-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
   -webkit-border-radius:3px;
   -webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
   background-color:#f7f7f7;
   border:1px solid #ccc;
   border-radius:3px;
   box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
   color:#333;
   display:inline-block;
   font-family:Arial,Helvetica,sans-serif;
   line-height:1.4;
   margin:0 .1em;
   padding:.1em .6em;
   text-shadow:0 1px 0 #fff;
}

#options {
   display:block;
}

.grid {
   opacity:0;
}

#first-load {
   max-width: 500px;
   margin: auto;
   /* padding-left: 20px; */
   /* padding-right: 20px; */
   background-color: #ffff5f;
   border-radius: 3px;
   color: #000;
   padding: 20px;
   margin-bottom: 20px;
}

#first-load a {
   color:#000;
}

.cell.points .cell-inner {
   font-weight: bold;
   font-size: 3vw !important;
   text-shadow: 0.5vh 0.5vh #000;
   transform: unset !important;
}

.menu-picker {
   background-color: #131844;
   align-items: center;
   justify-content: center;
   font-weight: bold;
   line-height: 1.25;
   text-transform: uppercase;
   align-self: flex-end;
   padding: 10px 10px;
   border-right: 2px solid #999;
   border-top: 2px solid #999;
   /*border-top-right-radius: 10px;*/
   margin-right:10px;
   position:absolute;
   color: #999;
   text-decoration: none;
   bottom:0;
}

.menu-picker:hover {
   color: white;
   text-decoration: none;
   border-color:white;
}

.yoembed {
   display:inline-block;
}


#test-height {
   font-family:verdana; /* TODO */
   padding:0;
   margin:0;
   color:black;
}

* {
   box-sizing:border-box;
}

.cell-inner p:last-child {
   margin-bottom:0;
}

#grid {
   transition:opacity 1s;
}

.grid {
   /*
   border:3px solid black;
   border-top-width:6px;*/
   /*box-shadow: #ccc 0 0 2px 0*/
   padding:50px;
   background: linear-gradient(to top, #1d2675 0%,#2a3698 100%);
   position:relative;
   transition: .1s;
   z-index:1;
   transform-origin:center left;
   font-size:12px;
   display:flex;
   height:75vh;
   flex-direction:column;
   align-items:stretch;

}

.grid-zoomed {
   /*transform:scale(2);*/
   z-index:10;
}

.click-to-zoom  {
   opacity:0;
   transition: .3s;
   position:absolute;
   top:0;
   right:0;
}

.grid:hover .click-to-zoom {
   opacity:1;
}

.grid.grid-zoomed .click-to-zoom {
   opacity:0;
}



.click-to-zoom span {
   background-color:#ccc;
   font-size:14px;
   display:inline-block;
   padding:3px;
}

.grid-row {
   display:flex;
   flex:1;
}

/*
.grid-col {
   flex-direction:column;
   display:flex;
}

.grid-col > div {
   border:3px solid black;
}*/

/*
img, iframe {
   display:none;
}*/

.grid-cell {
   border: 5px solid rgb(0 0 0 / 44%);
   overflow: hidden;
   position: relative;
   background-image: url(../img/bgblock.png);
   transition: .3s;
   flex: 1;
   background-size: cover;
}

.grid-cell-zoomed {
   transform:scale(2);
   z-index:10;
}

.grid-preview .grid-row .grid-cell:first-child {
   transform-origin:left center;
}

.grid-preview .grid-row .grid-cell:last-child {
   transform-origin:right center;
}

.grid-preview .grid-last-row .grid-cell {
   transform-origin:bottom center;
}

.grid-preview .grid-last-row .grid-cell:first-child {
   transform-origin:bottom left;
}

.grid-preview .grid-last-row .grid-cell:last-child {
   transform-origin:bottom right;
}

/* .grid-last-row {
   border-bottom:5px solid black;
}

.grid-first-row {
   border-top:5px solid black;
} */

.grid-row-questions {
   /* border-left: 5px solid black;
   border-right: 5px solid black; */
}

.grid-row-cats .grid-cell {
   border-color:black;
   border-color: black;
   border: unset;
   margin: .5vh;
   background-image: unset;
}

.grid-row-cats .grid-cell .cell{
   background-image: url(../img/fondo-casillas.png);
   background-size: contain;
   text-shadow: 3px 3px 0px #000;
   padding-top: 20px !important;
   padding-bottom: 20px !important;
   line-height: 30px;
   background-position: center;
   background-repeat: no-repeat;
 
}

.cell-inner.cat-cell{
   font-size: 4vh !important;
}

.grid-row-cats .cell {
   /*align-items:flex-end;*/
}

.grid-row-cats-resize-done {
   flex:none;
}

.cell-group {
   backface-visibility:hidden;
   transform-style: preserve-3d;
}

.cell {
   position:absolute;
   display:flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   color:#fff;
   backface-visibility:hidden;
   perspective: 1000px;
   transform-style: preserve-3d;
   -webkit-perspective: 0;
   -webkit-backface-visibility: hidden;
   width:100%;
   height:100%;
}

.cell a:link, .cell a:visited, .cell a:hover {
   color:white;
}

.cell.back {
   transform: rotateY(180deg);
}

.categories{
    height:120px !important;
}

.cell.front {
   z-index:2;
}

.cell.back, .cell.front {
   cursor:pointer;
   overflow:hidden;
}

.cell.back, .cell.front, .cell-group, .category {
   transition: .3s;
   will-change: transform;
}

.cell-group:hover, .cell-group:focus {
   border-color: #ffff007a;
   outline: none;
}

.cell-group.inert:hover, .cell-group.inert:focus {
   border-color:gray;
   outline:none;
}

.cell-group:hover .front  {
   transform: rotateY(180deg);
}

.cell-group:hover .back  {
   transform: rotateY(0deg);
}

.cell-group:hover .back,
.cell-group:hover .front {
   border-color:yellow;
}

.cell-group:hover .back,
.cell-group:hover .front {
   transition: .6s;
}

.cell-group.empty {
   pointer-events:none;
}

.cell-group.empty:hover, .cell-group.empty:focus {
   /*
   border-color:black;
   transform:none;*/
}


/* play mode */

#gameplay .answer:focus, #gameplay .question:focus {
   outline:none;
}

.points .front, .points .back {
   display:none;
}

.grid-play .cell-group {
   cursor: pointer;
   margin: 5px;
   box-shadow: 0 0 30px #00000017;
   border-radius: 2vh;
}

.grid-play .cell-group:hover, .grid-play .cell-group:focus {

    box-shadow: 0 0 20px yellow;
}

.grid-play .cell-group.inert:hover, .grid-play .cell-group.inert:focus {
   background-color:transparent;
}

.inert .cell-inner {
   opacity:.8;
}

.grid.grid-play {
   background: none;
}

.resizing {
   transition:none !important;
}

#continue-button{
   display:none !important;
}

.button-scoreboard {
   position: fixed;
    bottom: 2.5vw;
    right: 5.7vw;
    z-index: 50 !important;
    /* width: 29vh; */
    font-size: 4vh;
    color: white;
    cursor: pointer;
    transition: ease-in-out 0.3s all;
    background: linear-gradient(198deg, #ffd400, #ff8d00);
    padding: .3vh 2vw;
    border: 4px dashed white;
    box-shadow: 0.3vh 0.3vh 0 #000000;
    text-shadow: 0.3vh 0.3vh 0px #000000a6;
    border-radius: 1vh;
   transition:ease-in-out 0.3s all;
}

.button-scoreboard:hover{
   transform:scale(1.05);
}

.button-scoreboard-2 {
   position:fixed;
   bottom:6%;
   right:5%;
   z-index:50 !important;
   font-size:30px;
   cursor:pointer;
   width:20%;
}

.button-reset-game{
   position:fixed;
   bottom:6%;
   left:5%;
   z-index:50 !important;
   font-size:30px;
   cursor:pointer;
   width:20%;
}



.leaderboard, .online-leaderboard{
   display: none;
   position: fixed;
   top: 3%;
   left: 3%;
   width: 94%;
   height: 94%;
   background-color: #5900a3;
   background-image: url(../img/bgpregunta.png);
   color: white;
   border: 3px dashed white;
   box-shadow: 0.8vh 0.8vh 0 #0000008a;
  
}

.leaderboard .title, .online-leaderboard .title{
   text-align:center;
   font-size:6vw;
   text-shadow: 4px 4px 0px black;
   opacity:0;
   animation: scale-in 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) forwards;
}

.leaderboard .content, .online-leaderboard .content{
   width:40%;
   margin: 0 auto;
   height: 75%;
   overflow-y: scroll;
   font-size: 3vw;
   padding-right: 1vh;
   animation: scale-in 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) forwards;
   animation-delay: 0.3s;
   opacity:0;
}

.leaderboard .team, .online-leaderboard .team{
   display: flex;
   background: linear-gradient(45deg, #05b4be, #008fb9);
   margin-bottom: 1vw;
   padding: .1vw 2vw;
   border: 4px dashed white;
   box-shadow: 0.5vh 0.5vh 0 #00000069;
   text-shadow: 0.3vh 0.3vh 0px #000000a6;
   align-items: center;
}
.leaderboard .team .name, .online-leaderboard .team .name{
   padding:0;
}

.leaderboard .team .points, .online-leaderboard .team .points{
   text-align: right;
   flex: 1;
}

.leaderboard .team .country{
   font-size: 3vh;
   border-top: .3vh solid white;
   margin-top: -1.5vh;
}

*::-webkit-scrollbar {
   width: 10px;
 }

*::-webkit-scrollbar-track {
   background: #ffffff00;

 }

*::-webkit-scrollbar-thumb {
   background-color: #1abfe0;
   border-radius: 5px;
   border: .3vh dashed #ffffff;

 }

#close-leaderboard, #close-leaderboard-online{
   position: absolute;
   bottom: 3%;
   right: 2%;
   font-size: 3vh;
   color: white;
   cursor: pointer;
   transition: ease-in-out 0.3s all;
   background: linear-gradient(198deg, #ffd400, #ff8d00);
   padding: .1vw 2vw;
   border: 4px dashed white;
   box-shadow: 0.5vh 0.5vh 0 #00000069;
   text-shadow: 0.3vh 0.3vh 0px #000000a6;
}

#close-leaderboard:hover, #close-leaderboard-online:hover{
   transform:scale(1.1);
}

.cup{
   position:absolute;
   top:2vw;
   right:10vw;
   transform:rotate(20deg);
   width: 15vw;
   animation: cartoon 2s normal infinite;
}

.temporizador{
   font-size: 4vh;
   color: #ffffff;
   padding: 2px 20px;
   border: 5px solid white;
   border-radius: 10px;
   position: fixed;
   bottom: 2.5vw;
   left: 5.7vw;
   box-shadow: 3px 3px 0 black;
   text-shadow: 2px 2px 0 #000000;
   z-index: 9999;
   background-color: #38bedd;
}

.temporizador img{
   float: left;
   margin-right: 10px;
   width: 3vh;
   margin-top: 1.3vh;
   filter: drop-shadow(.3vh .3vh 0 black);
}


.winner{
   display:none;
   position: fixed;
   top: 3%;
   left: 3%;
   width: 94%;
   height: 94%;
   background-color: #5900a3;
   background-image: url(../img/bgpregunta.png);
   color: white;
   border: 3px dashed white;
   box-shadow: 0 0 34px black;

}

.winner .title{
   text-align:center;
   font-size:6vw;
   text-shadow: 4px 4px 0px black;
}

.winner .content{
   width:40%;

   margin: 0 auto;
   

   font-size: 3vw;
}


.winner .team{
   display: flex;
   background: linear-gradient(45deg, #05b4be, #008fb9);
   margin-bottom: 1vw;
   padding: .5vw 2vw;
   border: 4px dashed white;
   box-shadow: 0 0 10px black;
   text-shadow: 4px 4px 0px black;
}


.winner .team .points{
   text-align: right;
   flex: 1;
}

.winner .zone-teams{
   max-height: 41vw;
   overflow-x: hidden;
   overflow-y: scroll;
   padding-right: 1vw;
}

.selectMode input {
   display: inline;
   margin: 0px 10px;
   padding: 0px;
}

.selectMode button:hover {
   cursor: pointer;
}

#logginForm input, #registerForm input {
   display: inline;
}

#logginForm button:hover, #registerForm button:hover {
   cursor: pointer;
}



/*PREGAME*/
.pregame{
   width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #7506b3;
    position: absolute;
    background-image:url("../img/bg.png");
    background-size:cover;
    background-repeat:no-repeat;
}

.modes{
   display:flex;
   margin-bottom:30px;
}
.modes div{
   width:50%;
   margin:10px;
   border-radius:20px;
   background-color:rgb(213, 213, 213);
   color:rgba(67, 67, 67, 0.727);
   text-align:center;
   padding:10px;
   font-size:20px;
   cursor:pointer;
   transition:ease-in-out 0.3s all;
}

.modes img{
   opacity:0.7;
   width:40%
}

.modes div.selected{
   background-color:purple;
   color:rgba(255, 255, 255, 0.823);
   
}

.modes div.selected img{
   filter:invert(1);
}

.loggin-container, .selectMode{
   padding: 40px;
    box-shadow: 0 0 20px black;
    background-color: #000000a4;
    color: #fff;
    border-radius: 20px;;
}

.selectMode{
   height:350px;
}

.loggin-container label{
   margin-bottom:5px;
   width:100%;
}

.loggin-container .form-control{
   width:100%;
   margin:0;
   border-radius:5px;
   padding:10px;
}

.loggin-container .labels, .register .labels{
   margin-bottom:20px;
   font-size:20px;
}

.loggin-container button, .selectMode button{
   width:100%;
   padding:10px;
   border-radius:5px;
   font-size:20px;
   transition: cubic-bezier(0.010, 0.700, 0.270, 0.995) 0.5s all;
}

.loggin-container button:hover, .selectMode button:hover{
   background-color:purple;
   color:white;
}

.loggin-container #registerButton, #loggedInButton{
   margin-bottom: 20px !important;
   width: 100%;
   text-align: center !important;
   display: block;
   color:rgb(194, 161, 194);
   font-size:20px;

}

.loggin-container .validMessage,
.loggin-container .errorMessage{
   width:100%;
   text-align:center
}

#startGame{

   font-size:20px;
   display:none;
}


.selectMode .title{
   font-size:20px;
   font-size: 35px;
   margin-bottom: 20px;
   color: #ffaf00;
   text-shadow: 0 0 10px;
}

.selectMode label{
   font-size:30px;
}

.user-points{
   width: 28vh;
   margin: 0 auto;
   background-image: url(../img/points_bg.webp);
   background-size: contain;
   background-position: center;
   padding: 2vh 0;
   background-repeat: no-repeat;
   text-align: center;
   border-radius: 10px;
   transform: translateY(-3vh);
   /* box-shadow: 0 0 20px black; */
}

.user-points h1{
   margin: 0;
   font-size: 2.5vh;
   margin-top: 1.5vh;
}

.user-point{
   font-size: 5.5vh;
   margin-top: -2.7vh;
}

.scale-in{
   animation: scale-in 0.3s ease-in-out forwards;
}

.success{
   border-color: #7dff49d3 !important;
   box-shadow: 0 0 10px #7dff49, inset 0 0 100px #7dff49 !important;
}

.success .cell-inner{
   color: #7dff49d3 !important;
}

.error{
   border-color: #ff0000cc !important;
   box-shadow:0 0 10px red, inset 0 0 100px red !important;
}

.error .cell-inner{
   color:#ff0000cc !important;
}

.answers span{
   padding: 0vh 1vw;
   background-color: #0a9ab780;
   border: .3vw solid #0033528a;
   border-radius: 2vw;
   cursor: pointer;
   text-shadow: unset !important;
   transition: ease-in-out 0.15s all;
   display: inline-block;
   margin-bottom: 1.5vh;
   font-size: 2vw;
   margin-right: .5vw;
}

.answers span:hover{
   transform:scale(1.05);
}

.answer-overlay{
   width: 100%;
   position: fixed;
   height:100%;
   display: flex;
   align-items: center;
   justify-content: center;
   display:none;
}

.answer-overlay img{
   width: 33%;
   display:none;
   opacity:0;

}

#correct{
   filter: drop-shadow(0 0 20px rgb(0, 209, 80));

}

#incorrect{
   filter: drop-shadow(0 0 20px rgb(209, 14, 0));

}

.pregunta, .answers{
   font-size: 4vw !important;
}

.pregunta{
   line-height: 8vh;
}

.pregunta img{
   border: 4px solid black;
    border-radius: 1vh;
    box-shadow: 0 0 7vh #00000073;
    max-height: 25vh;
}

.scale-in-up{
   animation: scale-in-up 0.5s cubic-bezier(0.000, 0.430, 0.245, 0.995) forwards;
   /* display:block !important; */
}

.scale-out-down{
   animation: scale-out-down 0.5s cubic-bezier(0.000, 0.430, 0.245, 0.995) forwards;

}



@keyframes scale-in {
   0%{
      opacity:0;
      transform:scale(0.7);
   }
   100%{
      opacity:100;
      transform:scale(1) ;
   }
}

@keyframes scale-in-up {
   0%{
      opacity:0;
      transform:scale(0.7) translateY(100%);
   }
   100%{
      opacity:100;
      transform:scale(1) translateY(0%) rotate(-8deg); 
   }
   
}

@keyframes scale-out-down {
   0%{
      opacity:100;
      transform:scale(1) translateY(0%) rotate(-8deg);
   }
   100%{
      opacity:0;
      transform:scale(0.7) translateY(100%);
   }
   
   
}

@keyframes cartoon {
   0%{
      transform:rotate(20deg);
   }
   49%{
      transform:rotate(20deg);
   }
   50%{
      transform:rotate(-20deg);

   }
   99%{
      transform:rotate(-20deg);

   }
   100%{
      transform:rotate(20deg);
   }
   
}