/*
css, hello!
*/


/*
font import
*/
@font-face {font-family: "regular"; src: url("/data/FKRomanDisplay-Medium.woff2");}


/*
global css
*/
html, body {margin: 0; padding: 0; width: 100%; height: 100%; font-family: regular, courier; font-display: fallback; overflow: hidden; position: absolute; top: 0; left: 0;}

*::-webkit-scrollbar-track {background: transparent;}
*::-webkit-scrollbar {width: 0.5vh; height: 0.5vh; background: transparent;}
*::-webkit-scrollbar-thumb {background: black;}

::selection {background: black; color: white;}
a::selection {background: blue;}

a, a:hover, a:visited {color: blue; text-decoration: none; cursor: pointer;}
  a:hover {text-decoration: underline;}


/*
grabber.js css
*/
.grabber {cursor: grab !important; user-select: none !important;}
  .grabbed {cursor: grabbing !important;}


/*
loading for between pages
*/
#loading {position: absolute; top: 0; left: 0; height: 0.5vh; width: 100%; z-index: 1001; background: linear-gradient(to right, transparent 90%, black 10%); background-size: 200% 100%; animation: loading 2s infinite; animation-delay: -0.2s;}


/*
main button "next" => the arrow
*/
#next {position: absolute; top: 50%; right: 0; z-index: 1001; transition: 1s all ease; user-select: none; text-decoration: none; background-size: 300% 100% !important; color: black; transform: translate(-50%, -50%); width: 20vh; height: 20vh; line-height: 20vh; font-size: 12vh; text-align: center; animation: firefly 30s infinite; transition: 1s all ease;}
/* new background? */
#next {background: radial-gradient(circle at 5%/*16.5%*/, white 15%, black 100%);}
  #next, #next div {border-radius: 50%;}
  #next:hover {background-position: right center !important; color: white; font-size: 15vh; margin-right: -5vh; cursor: pointer; /* filter: hue-rotate(45deg); */}
  #next.away {right: -40vh !important;}
@keyframes firefly {
  0% {transform: translate(-40%, -60%) rotate(0deg) scale(1);}
  20% {transform: translate(-55%, -40%) rotate(5deg) scale(1.05);}
  40% {transform: translate(-45%, -45%) rotate(-2deg) scale(0.99);}
  60% {transform: translate(-50%, -60%) rotate(3deg) scale(1.1);}
  80% {transform: translate(-60%, -40%) rotate(-7deg) scale(0.86);}
  100% {transform: translate(-40%, -60%) rotate(0deg) scale(1);}
}


/*
main page div that contains all pluggable content
+ fadein, fadeout animations
*/
.pg {width: 100vw; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); opacity: 1; filter: grayscale(0%); display: block; transition: 0.5s ease;}
  .fadeIn {transform: translate(-50%, -50%) scale(1.1) !important; opacity: 0 !important;}
  .fadeOut {transform: translate(-50%, -50%) scale(0.9) !important; opacity: 0 !important;}
    .fadeOut video {opacity: 0;}
    .oldPage {opacity: 0.5; filter: grayscale(100%);}


/*
script to screen page setup (half+half screen)
*/
.halfScreen {width: 100%; height: 50%; position: absolute; left: 0; overflow-y: hidden; overflow-x: hidden; text-align: center; user-select: none;}
  .halfScreen.top {top: 0; font-size: 3vh;}
  .halfScreen.top.scrollable {overflow-y: auto;}
      .halfScreen.top::-webkit-scrollbar-thumb {background: transparent;}
      .halfScreen.top::-webkit-scrollbar {width: 0 !important;}
    .halfScreen.top p {width: calc(100% - 40vh); max-width: 50vw; padding: 5vh 20vh; margin: 0 auto;}
    .halfScreen.top h1 {font-weight: normal; margin-top: 20vh; padding: 0 3vh;}
    .halfScreen.top .table {margin: 0 auto; text-align: center; font-size: 3vh; margin-bottom: 10vh;}
      .halfScreen.top .table .tr {display: list-item; list-style: none;}
      .halfScreen.top .table .tr .td {display: inline-block; padding: 0.5vh 5vh; width: 30vh; vertical-align: top;}
  .halfScreen.bot {top: 50%; background: black; overflow-y: hidden; line-height: 50vh; color: white; font-size: 5vh;}
    .halfScreen.bot video {height: 50vh; width: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); opacity: 1; transition: 0.5s ease; z-index: 99;} /* width: 100vw; height: auto; */
    .halfScreen.bot .loadingText {font-style: italic;}
    .halfScreen.bot #countdown {position: absolute; top: 0; left: 0; width: 100%; height: 50vh; background: linear-gradient(white, transparent); transition: all 1s linear;}


/*
text content (blank page with custom text)
*/
.text {width: calc(100% - 6vh); height: calc(100% - 6vh); position: absolute; font-size: 10vh; padding: 3vh; overflow-y: auto;}


/*
text handeling
*/
.text p {padding: 0; margin: 0;}


/*
video controls => play, pause, end, mute, sound buttons
*/
.controls {position: absolute; display: none; top: calc(51.5vh); left: 2.5vh; z-index: 100; user-select: none;}
  .controls div {background: transparent; color: white; margin-top: 1vh; width: 5vh; height: 5vh; outline: none; border: none; transition: all 0.25s ease; float: left;}
    .controls div:hover {transform: translateX(-0.5vh); cursor: pointer; text-shadow: 0 0 4vh white;}
  #play {background: url('/data/play.png') no-repeat center center; background-size: cover;}
  #stop {background: url('/data/stop.png') no-repeat center center; background-size: cover;}
  #end {background: url('/data/repeat.png') no-repeat center center; background-size: cover;}
  #mute {background: url('/data/mute.png') no-repeat center center; background-size: cover;}
  #sound {background: url('/data/sound.png') no-repeat center center; background-size: cover;}
    #stop, #end, #mute {display: none;}
  #mute, #sound {padding-left: 2vh;}
    #mute:hover, #sound:hover {transform: translateX(-0.5vh);}


/*
title
*/
#title {position: absolute; display: none; color: white; background: black; /* mix-blend-mode: exclusion; */ margin-left: -2vh; padding: 0 1vh; font-size: 3vh; user-select: none; border-radius: 1vh;}
.hop {animation: 0.5s hop ease; animation-fill-mode: forwards;}
@keyframes hop {0% {transform: scale(1);} 50% {transform: scale(1.2); background: blue;} 100% {transform: scale(1); background: blue;}}


/*
scroll me info-helper
*/
#scrollMe {display: none; z-index: -10; width: 10vh; height: 10vh; position: absolute; top: 25vh; left: 7vh; transform: translate(-50%, -50%); background: url('/data/scrollme.png') center center; background-size: cover;}


/*
loading of video (in the middle of screen)
+ loading text - before video is loaded
*/
.loadingStep {position: absolute; top: calc(50% - 0.45vh); left: 0; height: 0.5vh; width: 100%; background: blue; z-index: 101;}
  .loadingStep.loading {background: linear-gradient(to right, transparent 90%, red 10%); background-size: 200% 100%; animation: loading 2s infinite; animation-delay: -1.4s;}
  @keyframes loading { 0% {background-position: 220% 0%;} 100% {background-position: 80% 0%;} }


/*
script+video progress bar (horizontal line in the middle of screen)
*/
.progress {position: absolute; top: calc(50% - 0.45vh); left: 0; height: 0.5vh; width: 0; background: black; z-index: 101; transition: 0.1s ease;}


/*
loading dots
*/
.wait span {animation: wait 1s infinite;}
  .wait span:nth-child(2) {animation-delay: 0.33s;}
  .wait span:nth-child(3) {animation-delay: 0.66s;}
@keyframes wait { 80% {opacity: 0;} 81% {opacity: 1;} }


/*
inputs
*/
input, select, .editorjs {background: #e9e9e9; font-family: regular, courier; font-size: 3vh; width: 70vh; max-width: 85vw !important; border: none; padding: 1vh; border-bottom: 0.5vh solid blue; transition: 0.5s ease; outline: 0;}
  input[type="checkbox"] {width: 5vh; height: 5vh; margin-left: 32.5vh;}
  .editorjs {height: 20vh; overflow-y: auto; width: calc(70vh - 2vh);}
    .editorjs table tr td, .editorjs table {border-collapse: collapse; border-color: black; height: 10vh;}
  input[type="submit"] {background: blue; cursor: pointer; color: white;}
  input[type="submit"]:hover {background: black;}


/*
admin styles
*/
.admin {overflow-y: auto !important;}
.row {font-size: 3vh; margin-bottom: 5vh;}
  .rNum, .rPos, .rType {float: left;}
  .rNum {width: 7vh;}
  .rPos {width: 10vh;}
  .rType {width: 20vh;}
.popisek {margin-right: 3vh; margin-top: 5vh; width: 70vh; max-width: 85vw !important; text-align: center;}
  #scriptToScreen, #textContent {display: none;}
  #scriptToScreen .editorjs {height: 80vh;}
  .uploadVideoForm {display: none;}
  .row .title {font-style: italic;}
.tc-table__wrap {height: auto !important; border-color: black !important;}


/*
mobile version adjustments
*/
@media (max-aspect-ratio: 1/1) {

  .text {font-size: 5vh; word-wrap: break-word; white-space: normal;}
  #scrollMe {opacity: 0.5;}
  .halfScreen.top p {width: calc(100% - 20vh); max-width: 90vw; padding: 5vh 10vh;}
  #next {right: -7vh !important;}
  .halfScreen.top .table .tr {display: inline-block;}
  .halfScreen.top .table .tr .td {display: list-item; list-style: none; height: 10vh;}
    .halfScreen.top .table .tr:first-child .td {width: 20vw;}
    .halfScreen.top .table .tr:nth-child(2) .td {width: 40vw;}
  .halfScreen.bot .loadingText {font-style: italic; font-size: 50%;}

}