/* ||| ok7.cz | style.css - ver. 0.4 beta | by OK_ | 2023-06-12 ||| */



@import url("https://fonts.googleapis.com/css?family=Shadows Into Light Two");
@import url("https://fonts.googleapis.com/css?family=Press Start 2P");
@charset "UTF-8";
/*@supports (-webkit-text-fill-color: transparent) {
  .rainbow-text-gradient {
    background: -webkit-linear-gradient(var(--rainbowGradient));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

@supports not (-webkit-text-fill-color: transparent) {
  .rainbow-text-gradient {
    background: linear-gradient(var(--rainbowGradient));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}*/

:root {
  --floppy-color: #004d9d;
  --external-background: #401040;
  --label-line1: #ddc4b0;
  --label-line2: #decdc1;
  --text-note: #a4243b;
  --shadow: #170317;
  --rainbowGradient: linear-gradient(to bottom, hsl(15, 100%, 50%) 0%, hsl(30, 100%, 50%) 4.16%, hsl(45, 100%, 50%) 8.33%, hsl(60, 100%, 50%) 12.2%, hsl(75, 100%, 50%) 16.6%, hsl(90, 100%, 50%) 20.8%, hsl(105, 100%, 50%) 25%, hsl(120, 100%, 50%) 29.1%, hsl(135, 100%, 50%) 33.3%, hsl(150, 100%, 50%) 37.5%, hsl(165, 100%, 50%) 41.6%, hsl(180, 100%, 50%) 45.8%, hsl(195, 100%, 50%) 50%, hsl(210, 100%, 50%) 54.1%, hsl(225, 100%, 50%) 58.3%, hsl(240, 100%, 50%) 62.5%, hsl(255, 100%, 50%) 66.6%, hsl(270, 100%, 50%) 70.8%, hsl(285, 100%, 50%) 75%, hsl(300, 100%, 50%) 79.1%, hsl(315, 100%, 50%) 83.3%, hsl(330, 100%, 50%) 87.5%, hsl(345, 100%, 50%) 91.6%, hsl(360, 100%, 50%) 95.8%);

}

.rainbow-text {
  background: var(--rainbowGradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientSlide 5s infinite;
}

@keyframes gradientSlide {
  0% { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}


* {
  box-sizing: border-box;
}

body {
  display: flex;
  height: 100%;
  min-height: 100%;
  flex-direction: column;
  background-color: var(--external-background);
}

#horni {
  background-color: #401040;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

#stredni {
  background-color: #401040;
  font-family: 'Press Start 2P';
  color: #fff;
  font-size: 20px;
  text-shadow: 
	0 0 1px black,
	0 0 3px white;
  margin-top: 40px;
  height: 40px;
}

#spodni {
  background-color: #00597E;
  flex: 1;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
  border-top: 15px solid black;
  border-bottom: 15px solid black;
  border-left: 8px solid black;
  border-right: 8px solid black;
  border-radius: 29px;
  padding: 15px 5px;
  min-height: 0px;
  max-width: 1400px;
  width: 100%;
  transition: min-height 2.5s ease;
  overflow: hidden;
}

#text-container {
  display: inline-block;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
}

#cursor2 {
  display: inline-block;
  width: 19px;
  height: 24px;
  background-color: #53b6db;
  box-shadow: 0 .1em 0 #000;
  animation: blink 0.6s infinite;
}

#cursor {
  display: inline-block;
  width: 15px;
  height: 17px;
  background-color: #53b6db;
  box-shadow: 0 .1em 0 #000;
  animation: blink 0.6s infinite;
}

@keyframes blink {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}


#menu {
  display: flex;
  justify-content: center;
  gap: 75px;
}

#menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#menu li {
  display: inline-block;
  cursor: pointer;
}

#menu li:hover:not(.active) {
  color: #FFFF00;
  transition: all 1.5s ease-out;
}

@keyframes colorTransition {
     0% { color: #fc98fc; }
   100% { color: #fff; }

}
#menu li.active {
  animation: colorTransition 0.6s alternate infinite;
  animation-timing-function: steps(6, end);
}

@keyframes colorTransitionHover {
     0% { color: #fc98fc; }
   100% { color: #FFFF00; }
}

#menu li.active:hover {
  animation: colorTransitionHover 0.6s alternate infinite;
  animation-timing-function: steps(6, end);
}

.atari {
  font-family: 'Press Start 2P';
  color: #53b6db;
  text-shadow: 0 .1em 0 #000;
  $b: rgba(black, .3);
  @include background-image(linear-gradient($b 0%, $b 50%, transparent 50%, transparent 100%));
  background-repeat: repeat;
  background-size: 20px 10px;
}

#kontakt-formular {
  margin-left: 10px;
  margin-right: 10px;
}


input, textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #E5E5E5;
  font-family: 'Press Start 2P';
  border-radius: 5px; /* Zaoblené rohy */
  border: 2px #aae8ff; /* Tlustší okrajová linka */
  box-shadow: 0 .1em 0 #000;
}

button {
  padding: 10px 20px;
  background-color: #4CAF50;
  font-family: 'Press Start 2P';
  font-size: 16px;
  text-shadow: 0 0 1px black;
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 .1em 0 #000;
}


.floppy {
  width: 265px;
  height: 280px;
  border-radius: 7px;
  border-top-right-radius: 25px 20px;
  box-shadow: 7px 8px 10px var(--shadow);	
  display: flex;
  flex-direction: column;
  position: relative;
}

.floppy::before {	
  content: "";
  position: absolute;
  width: 265px;
  height: 280px;
  background-color: var(--floppy-color);
  border-radius: 7px;
  clip-path: polygon(0% 0%, 87.11% -0.07%, 89.5% 0%, 94% 0%, 100% 5%, 100% 100%, 0% 100%);
  display: flex;
  flex-direction: column;
}



.top {
  width: 190px;
  height: 100px;
  background-color: var(--floppy-color);
  margin-left: 30px;
  position: relative;
  border-left: 2px solid #877d76;
  border-right: 2px solid #877d76;
  border-top: 2px solid var(--external-background);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.slider {
  width: 146px;
  height: 96px;
  position: absolute;
  left: 40px;
  top: -3px;
  border-radius: 0 0 8px 8px;
  border: 10px solid #AAA9AD;
  border-left-width: 100px;
  z-index: 1;
}


.carrier {
  position: absolute;
  width: 42px;
  height: 82px;
  background-color: rgba(0, 0, 0, 0.8);
  right: 45px;
  top: 6px;
  z-index: 0;
}

.slider:hover {
  left: 0;
  transition: all 1.5s ease;
}

.down {
  width: 205px;
  height: 180px;
  border-left: 2px solid #877d76;
  border-right: 2px solid #403c3a;
  border-top: 2px solid #403c3a;
  margin-left: 30px;
  margin-top: 15px;
  border-radius: 5px;
  position: relative;
  background: linear-gradient(
    to bottom,
    var(--label-line1) 50%,
    var(--label-line2) 50%
  );
  background-size: 100% 50px;
}

.down::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: var(--external-background);
  right: -25px;
  bottom: 20px;
  z-index: 1;
  box-shadow: inset 4px 4px 5px var(--shadow);
}

.down::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: #000;
  left: -25px;
  bottom: 20px;
  z-index: 1;

}

.notes {
  font-family: "Shadows Into Light Two";
  margin-left: 15px;
  margin-top: 0px;
  font-size: 26px;
   color: #340000;
   text-shadow:
	 0 0 1px #555,
	 0 0 2px #777,
     1px 1px 0 #BBB;

  transform: rotate(-20deg)
}

.arrow { 
    position: absolute;
    text-align:left;
    font-size: 30px;
	left: 4px;
	text-shadow: 0px 0px 1px black, 0.001em 0.001em 1px black, -0.001em -0.001em 1px white;
}


.success {
    color: white;
    background-color: green;
    display: inline-block;
    padding: 5px;
    margin-top: 10px;
}

.error {
    color: white;
    background-color: red;
    display: inline-block;
    padding: 5px;
    margin-top: 10px;
}

@keyframes colorTransitionCopyright {
     0% { color: #fc98fc; }
   100% { color: #FFFF00; }
}

.copyright {
  position: fixed;
  bottom: 0px;
  right: 0px;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  font-family: "Press Start 2P";
  font-size: 8px;
  color: white;
  text-shadow: 0 .1em 0 #000;
  border-radius: 10px 0 0 0;
}

#copycursor {
  display: inline-block;
  animation: blink 1.2s infinite;
}