@import url('anim.css');

/* Keep existing header link styles for backward compatibility */
header a {
  color: #6b5c14;
  text-decoration: wavy underline;
  display: inline-block; /* Needed for the spans to work properly */
}

/* Style for all wavy characters */
.wavy-char {
  display: inline-block;
  animation: wave 2s ease-in-out infinite;
  animation-delay: calc(var(--char-index, 0) * 0.05s);
  transform-origin: bottom center;
}

/* Style for space characters */
.wavy-space {
  display: inline-block;
  width: 0.25em; /* Ensure spaces have proper width */
}

/* Ensure wavy wrapper doesn't break layout */
.wavy-wrapper {
  display: inline;
}

@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

header p {
  margin: 0;
}


* {
  /* cursor will be files/img/accuracy_cursor.svg */
  cursor: url('../img/accuracy_cursor.svg') 16 16, pointer;
}

body {
  background-color: #544b20;
  /* add files/img/tux.gif as a repeating background image at size 100px */
  /* it will also slowly move to the bottom right infinitely linearly */
  background-image: url('../img/tux.gif');
  background-size: 100px;
  background-repeat: repeat;
  background-attachment: fixed;
  animation: move 20s infinite linear;
  color: white;
  text-align: center;
  overflow-x: hidden; 
  max-width: 100vw;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

audio {
  background-color: #5f521575;
  border-radius: 15px;
  padding: 10px;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  width: fit-content;
  border: 2px solid #b3980fcb;
  box-shadow: 0 0 10px #b3980fcb;
}

button {
  background-color: #5f521575;
  border-radius: 15px;
  padding: 10px;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  width: fit-content;
  border: 2px solid #b3980fcb;
  box-shadow: 0 0 10px #b3980fcb;
}

button p {
  margin: 0;
  font-size: 22px;
  color: white;
}

.widen {
  animation: widen 60s infinite linear;
  animation-direction: alternate;
}

.main-content {
  margin: auto;
  width: 50vw;
  height: fit-content;
  margin-bottom: 200px;
}

.main-content p {
  margin: 0 0 0 0;
  font-size: 22px;
}

.main-content .content-item {
  background-color: #5f521575;
}

.main-content .content-item .graph-img {
  width: 95%;
  border-style: ridge;
  border-width: 10px;
  border-color: hotpink;
}

.main-content .content-item .graph-img:hover {
  border-color: #e5e100;
  animation: vibrate 3s infinite linear;
  animation-direction: alternate;
}


.main-content .graph .graph-download-button {
  width: 20vw;
}

.main-content .graph .graph-download-button img {
  width: 20vw;
  animation: download-button-swag 5s infinite cubic-bezier(.79,.14,.15,.86);
  animation-direction: alternate;
}


.main-content .graph .graph-download-button:hover {
  animation: download-button-swag 0.5s infinite linear;
  animation-direction: alternate-reverse;
  animation: widen 5s infinite linear;
}

.main-content .graph .graph-download-button img {
  width: inherit;
}

.main-content .cool-fact {
  margin: auto;
  margin-top: 20px;
  border: black 2px solid;
  border-radius: 15px;
  background-color: #b3980fcb;
  padding: 10px;
  width: fit-content;
}

.main-content .cool-fact h3 {
  margin: 0;
  margin-bottom: 6px;
}

.main-content .badges {
  max-width: 100vw;
}

a img {
  cursor: pointer;
}

footer {
  position: fixed;
  display: flex;
  justify-content: center;
  left: 0;
  bottom: 0;
  width: 100%;
  margin: auto;
  background-color: #5f521575;
  text-align: center;
}

header #site-icon {
  width: 275px;
  height: 70px;
}

footer #site-icon {
  width: 200px;
  margin-top: 9px;
  width: 30px;
  height: 30px;
}

/* add vibrate animation to the easteregg class */
.easteregg {
  animation: vibrate2 0.1s infinite linear;
  animation-direction: alternate;
}

/* vibrate2 animation */
@keyframes vibrate2 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

.side-text {
  position: fixed;
  background-color: #3434348f;
  margin: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 5px;
  right: 0;
  top: 50%;
  -ms-transform: translateY(-50%) scaleX(2);
  transform: translateY(-50%) scaleX(2);

  width: 1ch;
  height: fit-content;

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: larger;
  text-align: center;
  letter-spacing: 0.1ch;
  text-orientation: upright;
  writing-mode: vertical-lr;
}

.side-text:hover {
  padding-right: 1.7ch;
  color: #b655dd;

  text-orientation: sideways-right;
  writing-mode: sideways-lr;

  animation: vibrate2x 0.5s infinite linear;
}

.side-text p {
  margin: 0;
  padding: 0;
}