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

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

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

body {
  /*touch-action: none;*/
  font-family: "ChakraPetch";
  color: #555;
  margin: 0px;
  width: 100%;
  height: 100%;
  font-size : 16.5px;
}

a{
  color: #1D62AF;
  text-decoration: none;
  font-weight: bold;
}
.blue{
  color : #1D62AF;
}
.light-blue{
  color: #26ABE2;
}
#left, #close, h1, h2, h3, h4, h5,h6, #title, #next-title{
  font-family: "Rubik" !important;
}

p{
  /*text-align: justify;*/
  font-size : 120%;
}

h1{
  text-transform: uppercase;
  color : #333;
}
h2{
  font-size : 1.5em !important;
  /*font-family: "Rubik" !important;*/
  position: relative !important;
  width: 100% !important;
  text-transform: uppercase !important;
  text-align: left;
  color : #1D62AF !important;
  font-weight: bold !important;
}
h4{
  text-transform: uppercase;
  color : #1D62AF;
  margin-left: 0em;
  padding: 0;
}
h5{
  text-transform: uppercase;
  /*color : #fff;*/
  font-size: 1.5em;

}
h6{
  text-transform: uppercase;
  font-size: 1em;
  margin :0.5em;
  margin-left: 0em;
  margin-top : 1.5em;
}
.white{
  color: #fff !important;
  text-align: right;
}
h5{
  margin-top : 1.5em;
}
/*.yellow{
  color : #e7c36a;
}*/
.korabbi-kep{
  position: relative;
  /*width: 30%;*/
  max-width: 140px;
  height: auto;
}
li{
  font-size : 20px;

}


iframe{
  position: relative;
  width: 100%;
  height: 100%;
  border :none;
  margin : none;
  padding: none;
  overflow: hidden;
}
*{
  border:none !important;
}
.pages{
  padding-top: 0.1em;
  padding-right: 0.5em;
  margin: auto;
  max-width: 600px;
  background:transparent;
}
.logo{
  position: relative;
  display: inline-block;
  width: 0;
  min-width: 200px;
  display: inline-block;
  padding: 1em;
}
img{
  position: relative;

  max-height: 100%;
  max-width: 100%;
}
#verseny-logo{
  --w : 6em;
  width: var(--w);
  height: var(--w);
  min-width: var(--w);
  left : calc(50% - (var(--w) * 0.5));
}

#verseny-title:{
  text-align: center;
  position: relative;
  text-align: justify !important;
}
/*
input{
  font-family: "KoHo" !important;
  font-size:1em;
  background-color: #eee;
  border : none;
  margin : 2px;
  padding: 0.3em;
  border-radius: 0.3em;
}*/

.pages{
  /*text-align: justify;*/
  padding-bottom: 1em;
}


/* overrides for materialize @ nevezes2.html */


.btn-large{
  color : #fff !important;
  font-size: 1.5em !important;
  margin: 1em;
  box-shadow: none !important;
}

input{
  color: #000;

  padding-left: 1em !important;
  box-shadow: none !important;
  background-color: #fffe !important;
}
label{
  padding-left: 1em !important;
  font-size: 1em;
}
table{
  background-color: #0001 !important;
}
th, td{
  padding-left: 1em !important;

}
#registration{
  color: #1D62AF !important;
  background-color: #fffe !important;
}

.validate+label{
  color: #1D62AF !important;

}
.red-text{
  color: #D85F33 !important;
}
.row{
  margin-bottom: 0em !important;
}
.red{
  background-color: #D85F33 !important;
}
.green{
  background-color: #79DD5C !important;
}
.yellow{
  background-color: #e7c36a !important;
}
.blue{
  background-color: #1D62AF !important;

}
.aqua{
  background-color: #26ABE2 !important;
}

/*#username{
  margin-left: -2em;
}*/

/*.row .col.s12{
  padding-left: 0;
}

#login_nevezes{
  margin-left : 1em;
  margin-right : 1em;
  padding: 1em;
}
*/


/* GAME ITEMS */

.game_item{
  position : absolute;
  margin: 5px;
  cursor: pointer;
  outline : none;
  z-index: 10000;
  box-sizing: border-box;
  border-bottom: 5px solid #0005 !important;
}


@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes ring {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  1% { transform: translate(-1px, -2px) rotate(-1deg); }
  2% { transform: translate(-3px, 0px) rotate(1deg); }
  3% { transform: translate(3px, 2px) rotate(0deg); }
  4% { transform: translate(1px, -1px) rotate(1deg); }
  5% { transform: translate(-1px, 2px) rotate(-1deg); }
  6% { transform: translate(-3px, 1px) rotate(0deg); }
  7% { transform: translate(3px, 1px) rotate(-1deg); }
  8% { transform: translate(-1px, -1px) rotate(1deg); }
  9% { transform: translate(1px, 2px) rotate(0deg); }
  10% { transform: translate(1px, -2px) rotate(-1deg); }
  11% { transform: translate(0px, 0px) rotate(0deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}
.game_item:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}
.shake_only{
  cursor: pointer;
  outline: none;
}
.ringing{
  animation: ring 3.0s;
  animation-iteration-count: infinite;
}
.shake_only:hover{
  animation: shake 0.5s;
  animation-iteration-count: infinite; 
}

/*@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
*/
#power_button{
  width : 2em;
  height : 2em;
  font-size : 2em;
  box-sizing: border-box;
  padding-top: 6px;
  border-bottom : 8px solid #0005 !important;
  background-color: #fffe !important;
  /*border-radius : 50%;*/
/*  top: 50%;
  left: 50%;
  margin:-1em 0 0 -1em;
  -webkit-animation:spin 4s linear infinite;
  -moz-animation:spin 4s linear infinite;
  animation:spin 4s linear infinite;
*/
}

#disk_button{
  width : 2.2em;
  height : 2.2em;
  font-size : 2em;
  border-radius : 50%;
  /*#26ABE2*/
  /*background-color: #444;*/
  /*border: 4px solid  #4e4e4e !important;*/
  background-color: #FF7F7F;
  /*border: 4px solid  #eF6F7ee !important;*/

}


#password_button{
  font-size : 1.5em;
  font-family : monospace;
}


video{
  position: relative;
  width: 100%;
  height:auto;
}

#winner-text{
  margin-top : 1.5em;
  white-space: pre-wrap;
}

#winner-video{
  display:none;
}