@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');
body {
	overflow:hidden;
	background:#444;
	color:#CCC;
	padding:0;
	margin:0;
	font-family: 'Oswald', Helvetica, sans-serif;
	  font-size: 36px;
	  font-style: normal;
	  font-weight: 400;
	  /*text-shadow: 2px 2px 2px #222;*/
	  text-decoration: none;
	  text-transform: capitalize;
	  letter-spacing: 0.126em;
	  word-spacing: 0em;
	  line-height: 1.2;
	text-align:center;
	}
h1 { padding:0;margin:0; }
#main { position:absolute;left:25px;top:0;bottom:0;right:25px;transition:right .5s; }
#slovo { font-size:250px;font-size:16vw; }
#podslovom { position:relative;height:35%;width:100%;color:#9b9b9b; }
#countdown { width:100%;line-height:145%;padding: 0px 0 0; }
	@-moz-document url-prefix() {
		#countdown { line-height:130%;padding: 3px 0 9px; }
	} 
#countdown span { font-size: 60%;opacity: 0.5;position: absolute; }
#zostava { position: absolute;bottom:30%;right: 35px;font-size: 14px;color:#333; }
#zostava span { font-size: 37px;color:#AAA; }
#zostava span ~ span { font-size: 19px;color:#AAA; }
div.container { position:relative;height:55%;width:100%;top:0;margin:25px auto; }
div.container h1 { height:100%;-ms-transform: translateY(15%);-wekbit-transform: translateY(15%);transform: translateY(15%); }
div.inner { position:relative;background:#333;text-shadow:none;font-size:60px;padding:0; }
div.bar { 
	opacity: .95;
	position: absolute;
	top: -1px;
	height: calc(100% + 1px);
	border-top: 1px solid #a1ff9e;
	border-bottom: 1px solid #a1ff9e;
	padding: 0;
	margin: 0 0 100px 0;
	mix-blend-mode: hard-light; 
}
div.bar:after { 
	content: " ";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	background: lime;
	color: #888;
	opacity: .35; 
}

input#dalsiSlovo { position: absolute;bottom:25%;left: 218px;width: calc(100% - 496px);font-family:'Oswald', sans-serif;font-size:15px;background:#333;color:#AAA;padding:20px 10px 20px 115px;border:0px solid #444; }
input#dalsiSlovo:hover { color:#333;opacity:0.5;background: #eeeeee; }

input#stopClock { position: absolute;bottom:25%;left: 5px;font-size:15px;width:61px;
	background: url(../img/Stop_Pause_Hold.png) 0px 1px transparent;color:#AAAAAA00;padding:20px 10px;border:0px solid #444;margin:0;opacity:0.35; }
input#stopClock:hover { background:#FF4800;color:#333;opacity:0.5; }

input#startClock { position: absolute;bottom:25%;left: 71px;font-size:15px;width:61px;
	background: url(../img/Start_Play_Go.png) 0px 1px transparent;color:#AAAAAA00;padding:20px 10px;border:0px solid #444;margin:0;opacity:0.35; }
input#startClock:hover { background:#00FF08;color:#333;opacity:0.5; }

input#resetClock { position: absolute;bottom:25%;left: 137px;font-size:15px;width:61px;
	background: url(../img/Refresh_Reset_Reload.png) 0px 1px transparent;color:#AAAAAA00;padding:20px 10px;border:0px solid #444;margin:0;opacity:0.35; }
input#resetClock:hover { background:#00FFF7;color:#333;opacity:0.5; }



.nastavenia { position:absolute;top:0px;bottom:0;right:-230px;margin:0;padding:25px 15px;width:200px;background: #444;transition:right .5s ease-in-out,background .3s .2s ease-in-out;}
.nastavenia.otvorene { background:#353535; }
.nastavenia form { opacity:0;transition:opacity .3s .1s ease-in-out;position: absolute;bottom: 185px; }
.nastavenia.otvorene form {opacity:1;}
.nastavenia select { background:#444;color:#aaa;border:1px solid #222;margin:0;padding:0;opacity:0.2;width:100px;text-shadow: #111 0px -2px 2px,#000 0px 2px 2px; }
.nastavenia select:focus { opacity:1; }
.nastavenia button { 
	background: url(../img/Call-for-Submissions-Icon2-01.png) 2px 1px #444;
	border: 2px solid #444;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	opacity: .9; 
	position: absolute;
	bottom: 55px;
	left: calc(50% - 29px);
	width: 58px;
	height: 56px;
}
.nastavenia button:hover { 
	background: url(../img/Call-for-Submissions-Icon2-01.png) 2px 1px #aaa;
	border: 2px solid #aaa;
	opacity: 1;
	-moz-box-shadow: 0px 0px 5px lime;
	-webkit-box-shadow: 0px 0px 5px lime;
	box-shadow: 0px 0px 5px lime;
}
.opencloseNastavenia { position:absolute;bottom:19px;left:-55px;width:37px;height:37px;z-index:150;color:#555;
	background: url(../img/Settings-icon.png) no-repeat 5px 7px;background-size: 25px;opacity:0.5; }	
.opencloseNastavenia:hover { opacity:1; }
input, .nastavenia select, .nastavenia button {
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}




/*********************
 *  CURSOR settings
 */
:root, input:hover, a:hover, button:hover {
    /* Toto je dolezite aby schovalo default cursor  */
    cursor: none !important;
}
html {
	height: 100%;
}
.cursor-dot,
.cursor-dot-outline {
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease-in-out,
                transform 0.3s ease-in-out;
	z-index: 10000;
}

.cursor-dot[data-type=default],
.cursor-dot[data-type=pure],
.cursor-dot[data-type=elastic] {
    --size-cursor-dot: 8px;
    width: var(--size-cursor-dot);
    height: var(--size-cursor-dot);
    background-color: #222;
}

.cursor-dot[data-type=pulse] {
    -webkit-animation: pulse 2s infinite; 
    animation: pulse 2s infinite;
    background-color: #222;
}
.cursor-dot[data-type=textate] {
  width: 3px !important;
    -webkit-animation: pulse 2s infinite; 
    animation: pulse 2s infinite;
    background-color: #222;
}

.cursor-dot-outline[data-type=default] {
    --size-cursor-dot-outline: 10px;
    width: var(--size-cursor-dot-outline);
    height: var(--size-cursor-dot-outline);
    background-color: #00ff0044;
}


.cursor-dot-outline[data-type=pulse] {
    -webkit-animation: pulse 2s infinite; 
    animation: pulse 2s infinite;
    background: #00ff0044;
}

.cursor-dot-outline[data-type=elastic],
.cursor-dot-outline[data-type=textate] {
  position: absolute;
    -webkit-animation: elastic 0.5s cubic-bezier(.81,-0.42,.68,1.46); 
    animation: elastic 0.5s cubic-bezier(.81,-0.42,.68,1.46);
    -webkit-animation-fill-mode: forwards; 
    animation-fill-mode: forwards;

    background: #00ff0044;
}
.cursor-dot-outline.pulzuje {
    /*position: absolute;
    width: 50px;
    height: 50px;
    z-index: -1;*/
}
.cursor-dot-outline.pulzuje:before {
      content: "";
      border-radius: 100%;
      position: absolute;
      width: 100%;
      height: 100%;
	  border-width: 1px;
	  border-style: solid;
      animation: pulse 0.5s linear ;
      animation-delay: 0s;
      border-color: rgba(255,183,0, 0.0);
    }
.cursor-dot-outline.pulzuje:after {
      content: "";
      border-radius: 100%;
      position: absolute;
      width: 100%;
      height: 100%;
	  border-width: 1px;
	  border-style: solid;
      animation: pulse 0.5s linear ;
      animation-delay: 0.25s;
      border-color: rgba(0,255,0, 0.0);
    }
@keyframes pulse {
  0% {
    transform: scale(1, 1); 
    border-color: rgba(0,255,0, 0.25);
    opacity: 1;
  }
  100% {
    transform: scale(3, 3);     
    opacity: 0;
  }
}
@keyframes pulse2 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.05, 1.05); 
  }
  100% {
    transform: scale(1, 1);
  }
}

@keyframes elastic {
  0%{
      opacity: 0.2;
      height: 1em;
      width: 1em;
  }
  60%{
      opacity: 0.7;
      height: 4em;
      width: 4em;
  }
  80%{
      opacity: 0.7;
      height: 3.6em;
      width: 3.6em;
  }
  100%{
      opacity: 0.9;
      height: 4em;
      width: 4em;
  }
}

/* END ***********
 * CURSOR settings  
 */