/* ── Header ── */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

h1 {
  flex: 1;
  color: var(--primary-color);
  text-align: center;
  margin: 0;
}

/* ── Footer ── */

h4 {
  text-align: center;
  color: var(--primary-color);
}

h4 a {
  color: var(--primary-color);
  text-decoration: none;
}

#footer-note:hover {
  color: var(--primary-color);
  text-align: center;
  color: #fbde18;
  text-align: center;
  
}

/* ── Boxes ── */

.box {
  background: var(--primary-color);
  border-radius: 20px;
  box-shadow: 0 2px 6px rgb(0 0 0 / 10%);
  width: 370px;
  height: fit-content;
  margin: auto;
  padding: 15px;
  margin-top: 15px;
  text-align: center;
}

label {
  display: block;
  margin-top: 10px;
}

input,
select {
  margin: 7.5px;
  text-align: center;
  padding: 5px;
  border-radius: 10px;
  border: 2px solid black;
}

button {
  padding: 8px 15px;
  background: var(--primary-color);
  color: rgb(0 0 0);
  border: 3px black dotted;
  border-radius: 20px;
  cursor: pointer;
  text-decoration: underline;
  margin-left: 10px;
  display: block;
  text-align: center;
  margin-right: auto;
  margin-top: 10px;
}

button:hover {
  transform: scale(1.3);
  box-shadow:
    0 0 30px #000,
    0 0 30px #000;
}

/* ── Result ── */

.result {
  background: var(--primary-color);
  padding: 10px;
}

.output-driver {
  color: black;
}

li {
  margin: 3px;
}

#duration {
  display: none;
}

body {
  font-family: Arial;
  background-color: #000000;
  padding: 20px;
  color: rgb(0, 0, 0);
}

h1 {
  color: #fbde18;
  text-align: center;
}
h4 {
  text-align: center;
  text-decoration: none;
  color: #fbde18;
  text-decoration: none;
}

.box {
  background: #fbde18;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  width: 370px;
  height: fit-content;
  margin: auto;
  padding: 15px;
  margin-top: 15px;
  text-align: center;
}

.prava {
  float: right;
  width: 15%;
}
.leva {
  float: left;
  width: 15%;
}

label {
  display: block;
  margin-top: 10px;
}

input,
select {
  margin: 7.5px;
  text-align: center;
  padding: 5px;
  border-radius: 10px;
  border: 2px solid black;
}
button {
  padding: 8px 15px;
  background: #fbde18;
  color: rgb(0, 0, 0);
  border: 3px black dotted;
  border-radius: 20px;
  cursor: pointer;
  text-decoration: underline;
  margin-left: 10px;
  display: block;
  text-align: center;
  margin: auto;
  margin-top: 10px;
}
button:hover {
  transform: scale(1.3);
  box-shadow:
    0px 0px 30px #000000,
    0px 0px 30px #000000;
}

.result {
  background: #fbde18;
  padding: 10px;
}
.vystupridic {
  color: black;
}

li {
  margin: 3px;
}
#doba {
  display: none;
}
.sest {
  display: inline-block;
}
.sedm {
  display: inline-block;
}

.stred {
  display: none;
}
.rezerva 
{
  width: 30px;
}
.zmenit {
  text-decoration: none;
  color: black;
}
.animate {
  .stred {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: block;
    z-index: 9999;
    transform-origin: center;
    animation: stredak 4s 1 forwards 1s;
  }

  .sest {
    animation: six 2s infinite;
  }
  .sedm {
    animation: sevn 2s infinite;
  }

  .prava {
    animation: obrazek 7s 1 forwards;
  }
  .leva {
    animation: obrazek 7s 1 forwards;
  }
  select:hover {
    animation: selekt 120s 1 alternate;
  }
  button:hover {
    animation: tlacitko 2s 2;
  }
}

@keyframes six {
  0% {
    transform: translateY(15px) scale(1.2);
  }
  50% {
    transform: translateY(-13px) scale(1.2);
  }
  100% {
    transform: translateY(15px) scale(1.2);
  }
}
@keyframes sevn {
  0% {
    transform: translateY(-13px) scale(1.2) translateX(5px);
  }
  50% {
    transform: translateY(15px) scale(1.2);
  }
  100% {
    transform: translateY(-13px) scale(1.2) translateX(5px);
  }
}
@keyframes tlacitko {
  0% {
    transform: rotate(0deg) scale(1.3);
  }
  50% {
    transform: rotate(180deg) scale(1);
  }
  100% {
    transform: rotate(360deg) scale(1.3);
  }
}
@keyframes selekt {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(10);
  }
}
@keyframes inputen {
  0% {
  }
  25% {
  }
  50% {
  }
  75% {
  }
  100% {
  }
}
@keyframes obrazek {
  0% {
    transform: translateY(500px);
  }
  50% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(0px) scale(1.3);
  }
}

@keyframes stredak {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0);
  }
}