styles.css

@font-face {
  src: url("./assets/ethnocentric\ rg.otf");
  font-family: "ethno";
}

@font-face {
  src: url("./assets/pixel\ font-7.ttf");
  font-family: "standard";
}

@font-face {
  src: url("./assets/neon_pixel-7.ttf");
  font-family: "neon";
}

@font-face {
  src: url("./assets/Exo-Regular.otf");
  font-family: "exo";
}

@font-face {
  src: url("./assets/Cantarell-Regular.ttf");
  font-family: "cant";
}

@font-face {
  src: url("./assets/Pixel_NES.otf");
  font-family: "nes";
}

@font-face {
  src: url("./assets/Perfect\ DOS\ VGA\ 437\ Win.ttf");
  font-family: "dos";
}

html {
  scrollbar-color: #e4a7b3 #73c4ee;
}

body {
  background-color: #02010a;
}

.spacebg,
.spacebg2,
.spacebg3,
.spacebg4 {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -99;
  mix-blend-mode: screen;
  opacity: 0.5;
}

.spacebg {
  box-shadow: 0 0 300px #10002b inset;
  background: url("./assets/space_bg.gif");
}

.spacebg2 {
  box-shadow: 0 0 150px #7b2cbf inset;
  background: url("./assets/space_bg2.gif");
}

.spacebg3 {
  opacity: 0.25;
  box-shadow: 0 0 60px #9d4edd inset;
  background: url("./assets/spacebackground.gif");
}

.spacebg4 {
  opacity: 0.15;
  background: url("./assets/4cbe8d_f1ed2800a49649848102c68fc5a66e53mv2.webp");
  background-position: center;
}

@keyframes backgroundScroll {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 0px -400px;
  }
}

@keyframes backgroundScroll2 {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 0px -430px;
  }
}

@keyframes backgroundScroll3 {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 0px -500px;
  }
}

main {
  animation: fadeIn 1.5s ease-in-out;
  overflow-y: auto;
}

section {
  margin: 0.75rem;
  border-radius: 26px;
  padding: 1.75rem;
  color: white;
}

section {
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(5px);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.mainheader h1 {
  text-align: center;
  font-family: neon;
  letter-spacing: 2px;
  font-size: 4rem;
  background-image: linear-gradient(
    45deg,
    #ffadad,
    #ffd6a5,
    #fdffb6,
    #caffbf,
    #9bf6ff,
    #a0c4ff,
    #bdb2ff,
    #ffc6ff
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbowText 5s linear infinite;
  font-weight: 500;
  margin-top: 1rem;
}

h2 {
  font-family: neon;
  letter-spacing: 2px;
  font-size: 2.5rem;
  background-image: linear-gradient(
    45deg,
    #ffadad,
    #ffd6a5,
    #fdffb6,
    #caffbf,
    #9bf6ff,
    #a0c4ff,
    #bdb2ff,
    #ffc6ff
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbowText 5s linear infinite;
  font-weight: 500;
  margin-top: 1rem;
}

h3 {
  font-family: exo;
  text-transform: none;
  letter-spacing: 2px;
  font-size: 1.45rem;
  background-image: linear-gradient(
    45deg,
    #ffadad,
    #ffd6a5,
    #fdffb6,
    #caffbf,
    #9bf6ff,
    #a0c4ff,
    #bdb2ff,
    #ffc6ff
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbowText 5s linear infinite;
  font-weight: 500;
  margin-top: 1rem;
}
@keyframes rainbowText {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mainheader p {
  text-align: center;
  font-size: 1.35rem;
  font-family: standard;
}

.content p,
.content a,
.wrapper p,
.wrapper a {
  font-size: 1.2rem;
  font-family: standard;
  margin: 1rem 0;
}

.marquee {
  height: 50px;
  overflow: hidden;
  position: relative;
  color: #d8e2dc;
  border: 3px dashed #d8e2dc;
}

.marquee p {
  position: absolute;
  width: 100%;
  font-family: standard;
  font-size: 1.5rem;
  height: 100%;
  margin: 0;
  line-height: 50px;
  text-align: center;
  animation: scroll-left 22s linear infinite;
}

@keyframes scroll-left {
  0% {
    transform: translateX(79%);
  }
  100% {
    transform: translateX(-75%);
  }
}

.navbar {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
}

.navbar a {
  font-family: ethno;
  font-size: 1.25rem;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 10px;
  transition: 0.3s;
}

.navbar a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.wrapper {
  display: flex;
}

.left {
  width: 30vw;
}
.right {
  height: 0%;
  width: 100vw;
}

.wrapper h1,
.content h1 {
  font-family: neon;
  letter-spacing: 2px;
  font-size: 2.75em;
  font-weight: 100;
  background-image: linear-gradient(
    45deg,
    #ffadad,
    #ffd6a5,
    #fdffb6,
    #caffbf,
    #9bf6ff,
    #a0c4ff,
    #bdb2ff,
    #ffc6ff
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbowText 5s linear infinite;
  font-weight: 500;
}

@keyframes rainbowText {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

section li {
  font-family: standard;
  font-size: 1.3rem;
  line-height: 1.5;
}

.wrapper li {
  list-style-image: url("./assets/heart21.gif");
  list-style-position: inside;
  margin: 0;
  padding: 0;
}

.content a,
.wrapper a {
  color: #ff10f0;
  text-decoration: none;
}

@media (max-width: 1290px) {
  .wrapper {
    display: block;
  }

  .left {
    width: auto;
  }
  .right {
    width: auto;
  }
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #73c4ee;
}

::-webkit-scrollbar-thumb {
  background: #e4a7b3;
}

::-webkit-scrollbar-thumb:hover {
  background: #fbfbfb;
}

.blink {
  width: 100%;
}

.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

.image-container img {
  max-width: 100%;
  height: auto;
  margin: 5px;
}

.gpa h1 {
  text-align: center;
  margin-bottom: 20px;
}

.gpa table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.gpa table,
.gpa th,
.gpa td {
  border: 1px solid #ddd;
}

.gpa th,
.gpa td {
  text-align: center;
  padding: 8px;
}

.gpa input[type="text"] {
  width: 80%;
  padding: 5px;
}

.gpa select {
  width: 100%;
  padding: 5px;
}

.gpa button {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #4caf50;
  color: white;
  border: none;
  cursor: pointer;
}

.gpa button:hover {
  background-color: #45a049;
}

.gpa #gpa1,
.gpa #gpa2,
.gpa #gpa3,
.gpa #gpa4,
.gpa #gpa5,
.gpa #gpa6,
.gpa #gpa7 {
  display: block;
  margin-top: 5px;
}

.gpa #averageResult {
  text-align: center;
  font-size: 1.2em;
}