@font-face {
  font-family: "Geologica-Light";
  src: url(/fonts/Geologica-Light.ttf);
}
body, html {
  margin: 0;
  padding: 0;
  background-color: #213448;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 20px;
}
header .titles {
  margin: 20px;
}
header .titles h1 {
  font-size: 32px;
  font-family: "Geologica-Light";
  text-align: center;
  margin: 0;
  color: white;
}
header .titles h3 {
  font-family: "Geologica-Light";
  text-align: center;
  font-size: 24px;
  margin: 0;
  color: white;
}
header .socials {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  padding: 10px;
  background-color: #547792;
  border-radius: 10px;
}

.semestre_container, .works_container {
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.semestre_container a, .works_container a {
  animation: shadowDrift 4s linear infinite;
  filter: drop-shadow(0 0 2px #5600E8);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 5px;
  margin: 10px;
  border-radius: 19px;
  min-width: 200px;
  height: 200px;
  text-decoration: none;
  background-color: #547792;
}
.semestre_container a .img_container, .works_container a .img_container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 179px;
  min-height: 165px;
}
.semestre_container a p, .works_container a p {
  text-align: center;
  font-family: "Geologica-Light";
  font-size: 22px;
  color: white;
  margin: 5px;
  width: 100%;
  position: relative;
  bottom: 0;
}

@keyframes shadowDrift {
  0% {
    box-shadow: -18px -18px 42px rgba(86, 0, 232, 0.28), 22px 10px 48px rgba(0, 180, 255, 0.22), 0px 28px 70px rgba(255, 60, 180, 0.2); /* pink-magenta */
  }
  50% {
    box-shadow: 20px -14px 42px rgba(86, 0, 232, 0.3), -26px 6px 48px rgba(0, 180, 255, 0.25), 12px 34px 80px rgba(255, 60, 180, 0.22);
  }
  100% {
    box-shadow: -18px -18px 42px rgba(86, 0, 232, 0.28), 22px 10px 48px rgba(0, 180, 255, 0.22), 0px 28px 70px rgba(255, 60, 180, 0.2);
  }
}
.works_container a p {
  font-size: 20px;
}

.home_button {
  max-width: 100%;
  margin: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.home_button a {
  background-color: #5600E8;
  text-decoration: none;
  color: white;
  font-size: 20px;
  padding: 5px 10px;
  border-radius: 5px;
  font-family: "Geologica-Light";
}

.semester_h2 {
  text-align: center;
  font-family: "Geologica-Light";
  color: white;
}

@media (min-width: 375px) {
  .semestre_container a {
    width: 270px;
  }
}
@media (min-width: 768px) {
  .semestre_container {
    width: 500px;
  }
  .semestre_container a {
    width: 215px;
    height: 240px;
  }
}
@media (min-width: 1024px) {
  .semestre_container {
    width: 1000px;
  }
  .semestre_container a {
    aspect-ratio: initial;
    width: 410px;
  }
  .works_container a {
    aspect-ratio: initial;
    width: 510px;
  }
}

/*# sourceMappingURL=styles.css.map */