html, body {
  background-color: rgb(38, 39, 47);
  overflow: hidden;
  margin: 0;
  padding: 0;
}

button:hover {
  cursor: pointer;
}

a {
  text-decoration: none;
}

@keyframes slide_title_to_top {
  0% {
    transform: translateY(8vh);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slide_sth_to_right {
  0% {
    transform: translateX(-100vw);
  }
  100% {
    transform: translateX(0);
  }
}
.title-container {
  display: grid;
  width: fit-content;
  margin: 40vh auto 0px;
  grid-template-columns: repeat(6, 100px);
  animation: 0.8925s slide_title_to_top 1.53s backwards;
  color: rgb(190, 132, 43);
  font-size: 78px;
  font-family: "Courier New", Courier, monospace;
}
.title-container .animation1 {
  animation: 1.44s slide_sth_to_right 0.5s backwards;
}
.title-container .animation2 {
  animation: 1.44s slide_sth_to_right 0.4s backwards;
}
.title-container .animation3 {
  animation: 1.44s slide_sth_to_right 0.3s backwards;
}
.title-container .animation4 {
  animation: 1.44s slide_sth_to_right 0.2s backwards;
}
.title-container .animation5 {
  animation: 1.44s slide_sth_to_right 0.1s backwards;
}
.title-container .animation6 {
  animation: 1.44s slide_sth_to_right 0s backwards;
}
.title-container div {
  display: block;
  text-align: center;
}

@keyframes slide_sth_to_left {
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(0);
  }
}
.menu {
  display: flex;
  margin: auto;
  width: 564px;
  animation: 1.02s slide_sth_to_left 1.53s backwards;
}

.menu-button-wrapper {
  display: block;
  height: 40px;
  width: 100%;
  margin: 0px auto;
  border: 2px solid rgb(190, 132, 43);
}
.menu-button-wrapper button {
  height: 100%;
  width: 100%;
  background-color: inherit;
  border: none;
  color: rgb(190, 132, 43);
  font-size: 24px;
  font-family: "Courier New", Courier, monospace;
  letter-spacing: 3px;
}

@keyframes slide_links_to_top {
  0% {
    transform: translateY(50vh);
  }
  100% {
    transform: translateY(0);
  }
}
.footer_links {
  position: absolute;
  bottom: 20px;
  right: 40px;
  display: flex;
  width: fit-content;
  animation: 1.2s slide_links_to_top 1.74s backwards;
}

.footer_links-container {
  margin: 2px;
  display: block;
  height: 60px;
  width: 60px;
  border: 1px solid rgb(190, 132, 43);
}
.footer_links-container button {
  height: 100%;
  width: 100%;
  border: none;
  background-color: inherit;
  color: rgb(190, 132, 43);
  font-size: 20px;
  font-family: "Courier New", Courier, monospace;
}
.footer_links-container img {
  height: 100%;
  width: 100%;
}

.footer_links-text {
  position: fixed;
  color: rgb(190, 132, 43);
  font-size: 16px;
  font-family: "Courier New", Courier, monospace;
  line-height: 18px;
  width: 54px;
  margin-top: 8px;
}

@keyframes rotating {
  0% {
    transform: rotate(0turn);
  }
  100% {
    transform: rotate(1turn);
  }
}
@keyframes overload_clock_hour_hand {
  0% {
    transform: rotate(0turn);
  }
  20% {
    transform: rotate(0.4turn);
  }
  40% {
    transform: rotate(1.2turn);
  }
  60% {
    transform: rotate(2.8turn);
  }
  100% {
    transform: rotate(6turn) translate(-100vw, -70vh);
  }
}
@keyframes overload_clock_minute_hand {
  0% {
    transform: rotate(0turn);
  }
  20% {
    transform: rotate(2.4turn);
  }
  40% {
    transform: rotate(14.4turn);
  }
  60% {
    transform: rotate(33.6turn);
  }
  100% {
    transform: rotate(72turn) translate(-120vw, -100vh);
  }
}
@keyframes overload_clock_point {
  0%, 60% {
    transform: translate(0, 0);
    height: 1.3px;
    width: 1.3px;
  }
  62.5% {
    height: 3px;
    width: 3px;
    transform: translate(12.0208152802px, -11.0208152802px);
  }
  65% {
    height: 3px;
    width: 3px;
    transform: translate(24.0416305603px, -20.0416305603px);
  }
  67.5% {
    height: 3px;
    width: 3px;
    transform: translate(36.0624458405px, -27.0624458405px);
  }
  70% {
    height: 3px;
    width: 3px;
    transform: translate(48.0832611207px, -32.0832611207px);
  }
  72.5% {
    height: 3px;
    width: 3px;
    transform: translate(60.1040764009px, -35.1040764009px);
  }
  75% {
    height: 3px;
    width: 3px;
    transform: translate(72.124891681px, -36.124891681px);
  }
  77.5% {
    height: 3px;
    width: 3px;
    transform: translate(84.1457069612px, -35.1457069612px);
  }
  80% {
    height: 3px;
    width: 3px;
    transform: translate(96.1665222414px, -32.1665222414px);
  }
  82.5% {
    height: 3px;
    width: 3px;
    transform: translate(108.1873375215px, -27.1873375215px);
  }
  85% {
    height: 3px;
    width: 3px;
    transform: translate(120.2081528017px, -20.2081528017px);
  }
  87.5% {
    height: 3px;
    width: 3px;
    transform: translate(132.2289680819px, -11.2289680819px);
  }
  90% {
    height: 3px;
    width: 3px;
    transform: translate(144.2497833621px, -0.2497833621px);
  }
  92.5% {
    height: 3px;
    width: 3px;
    transform: translate(156.2705986422px, 12.7294013578px);
  }
  95% {
    height: 3px;
    width: 3px;
    transform: translate(168.2914139224px, 27.7085860776px);
  }
  97.5% {
    height: 3px;
    width: 3px;
    transform: translate(180.3122292026px, 44.6877707974px);
  }
  100% {
    height: 3px;
    width: 3px;
    transform: translate(192.3330444827px, 63.6669555173px);
  }
}
@keyframes overload_clock {
  0%, 60% {
    transform: translate(0, 0);
  }
  62.5% {
    transform: translate(-7.0710678119px, -6.0710678119px);
  }
  65% {
    transform: translate(-14.1421356237px, -10.1421356237px);
  }
  67.5% {
    transform: translate(-21.2132034356px, -12.2132034356px);
  }
  70% {
    transform: translate(-28.2842712475px, -12.2842712475px);
  }
  72.5% {
    transform: translate(-35.3553390593px, -10.3553390593px);
  }
  75% {
    transform: translate(-42.4264068712px, -6.4264068712px);
  }
  77.5% {
    transform: translate(-49.4974746831px, -0.4974746831px);
  }
  80% {
    transform: translate(-56.5685424949px, 7.4314575051px);
  }
  82.5% {
    transform: translate(-63.6396103068px, 17.3603896932px);
  }
  85% {
    transform: translate(-70.7106781187px, 29.2893218813px);
  }
  87.5% {
    transform: translate(-77.7817459305px, 43.2182540695px);
  }
  90% {
    transform: translate(-84.8528137424px, 59.1471862576px);
  }
  92.5% {
    transform: translate(-91.9238815543px, 77.0761184457px);
  }
  95% {
    transform: translate(-98.9949493661px, 97.0050506339px);
  }
  97.5% {
    transform: translate(-106.066017178px, 118.933982822px);
  }
  100% {
    transform: translate(-113.1370849898px, 142.8629150102px);
  }
}
.clock {
  margin: 4.8px;
  height: 40px;
  width: 40px;
  border: 2px solid rgb(190, 132, 43);
  border-radius: 50%;
}

.clock-point {
  position: fixed;
  height: 1.3px;
  width: 1.3px;
  margin: 19.35px 19.35px;
  background-color: rgb(190, 132, 43);
  border-radius: 50%;
  z-index: 4;
}

.clock-hand-wrapper {
  position: fixed;
  height: 40px;
  width: 40px;
}

.clock-hours_hand {
  position: fixed;
  margin: 7px 19.05px 0;
  height: 13px;
  width: 1.9px;
  border-radius: 50% 50% 30% 30%;
  transform-origin: 50% 100%;
  background-color: rgb(190, 132, 43);
  animation: 43200s rotating infinite linear forwards;
}

.clock-minutes_hand {
  position: fixed;
  margin: 3px 19.05px 0;
  height: 17px;
  width: 1.9px;
  border-radius: 50% 50% 30% 30%;
  transform-origin: 50% 100%;
  background-color: rgb(190, 132, 43);
  animation: 3600s rotating infinite linear forwards;
}

.clock-hours_hand--overloaded {
  animation: 4s overload_clock_hour_hand linear forwards;
}

.clock-minutes_hand--overloaded {
  animation: 4s overload_clock_minute_hand linear forwards;
}

.clock-point--overloaded {
  animation: 4s overload_clock_point alternate forwards;
}

.clock--overloaded {
  animation: 4s overload_clock alternate forwards;
}