.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; /* optical size */
  font-size: 36px;
  transition: all 0.3s ease;
}

@keyframes heart-click {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}
.heart-filled {
  font-weight: 600 !important;
  animation: heart-click 0.5s ease forwards;
}

:root {
  --flyingy: -1340px;
  --flyingymobile: -2190px;
}

@keyframes blurbify_animation {
  0% {
    border-color: red;
    background-color: #fff;
    transform: scale(1);
  }
  50% {
    border-color: blue;
    background-color: #eee;
    transform: scale(1.3);
  }
  70% {
    border-color: rgb(255, 0, 230);
    background-color: #fff;
  }
  100% {
    border-color: red;
    background-color: #fff;
    transform: scale(1);
  }
}
@keyframes background_animations {
  0% {
    background-color: rgb(198, 225, 198);
  }
  50% {
    background-color: #bfe7ff;
  }
  90% {
    background-color: rgb(205, 185, 177);
  }
  100% {
    background-color: rgb(198, 225, 198);
  }
}
@keyframes flyingobject {
  0% {
    transform: translateX(-50vw) translateY(var(--flyingy));
  }
  50% {
    transform: translateX(8vw) translateY(calc(var(--flyingy) + 50px));
  }
  100% {
    transform: translateX(63vw) translateY(calc(var(--flyingy) - 10px));
  }
}
@keyframes flyingobject_mobile {
  0% {
    transform: translateX(-50vw) translateY(var(--flyingymobile));
  }
  50% {
    transform: translateX(8vw) translateY(calc(var(--flyingymobile) + 50px));
  }
  100% {
    transform: translateX(63vw) translateY(calc(var(--flyingymobile) - 10px));
  }
}
@keyframes spin {
  0% {
    transform: scale(1) rotate(0deg);
  }
  40% {
    transform: scale(1.3) rotate(360deg);
  }
  65% {
    transform: scale(1.3) rotate(360deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
@keyframes spin_lin {
  0% {
    transform: scale(1) rotate(0deg);
  }
  10% {
    transform: scale(0.5) rotate(0deg);
  }
  50% {
    transform: scale(1.3) rotate(360deg);
  }
  92% {
    transform: scale(0.8) rotate(0deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
.blurbify_class {
  animation: blurbify_animation 5s normal infinite;
}

.background_class {
  animation: background_animations 5s normal infinite;
}

.flying_class {
  display: block !important;
  animation: flyingobject 5s normal linear infinite;
}
@media (max-width: 400px) {
  .flying_class {
    animation: flyingobject_mobile 5s linear infinite;
  }
}

.spin_class {
  animation: spin_lin 5s ease;
  animation-delay: 2s;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  gap: 10px;
}

.sitecontainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  justify-content: flex-start;
  min-height: 100vh;
  width: 100%;
  border: 0px solid black;
  background-color: #eee;
  color: white;
  padding: 30px;
}
.sitecontainer #heading {
  margin-top: 50px;
  background: linear-gradient(90deg, #425d84, #605bf7, #60c4ff); /* standard gradient */
  -webkit-background-clip: text; /* show background only inside text */
  -webkit-text-fill-color: transparent; /* make text itself transparent */
  font-weight: bold;
  font-size: 150px;
}
@media (max-width: 1000px) {
  .sitecontainer #heading {
    font-size: 120px;
  }
}
@media (max-width: 600px) {
  .sitecontainer #heading {
    font-size: 60px;
  }
}
.sitecontainer a.indexbutton {
  width: 80%;
  text-decoration: none;
  color: navy;
  margin-top: 100px;
  margin-bottom: 26px;
}
.sitecontainer a.indexbutton .linkdiv {
  width: 100%;
  height: 300px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border: 6px solid #988a88;
  border-radius: 35px;
  font-weight: bold;
  font-size: 40px;
  background-color: #7daef8;
}
.sitecontainer a.indexbutton .linkdiv:hover {
  background-color: rgb(248, 67, 67);
  color: white;
  border: 6px solid #d50303;
}
@media (max-width: 400px) {
  .sitecontainer a.indexbutton {
    width: 70%;
  }
  .sitecontainer a.indexbutton .linkdiv {
    height: 200px;
    margin-top: 150px;
    font-size: 30px;
  }
}/*# sourceMappingURL=index.css.map */