@font-face {
  font-family: "league_spartanbold";
  src: url("../assets/polices/leaguespartan-bold-webfont.eot");
  src: url("../assets/polices/leaguespartan-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../assets/polices/leaguespartan-bold-webfont.woff2") format("woff2"), url("../assets/polices/leaguespartan-bold-webfont.woff") format("woff"), url("../assets/polices/leaguespartan-bold-webfont.ttf") format("truetype"), url("../assets/polices/leaguespartan-bold-webfont.svg#league_spartanbold") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/polices/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}
@keyframes glitchAnim {
  7% {
    box-shadow: none;
    text-shadow: none;
  }
  10% {
    box-shadow: -6px 2px #d10070, 6px 2px #0070d1;
    text-shadow: -2px 1px #d10070, 2px -1px #fff;
  }
  13% {
    box-shadow: none;
    text-shadow: none;
  }
  20% {
    box-shadow: none;
    text-shadow: none;
  }
  23% {
    box-shadow: 12px 7px #d10070, -12px -7px #0070d1;
    text-shadow: 4px 2px #d10070, -4px -2px #fff;
  }
  26% {
    box-shadow: none;
    text-shadow: none;
  }
  40% {
    box-shadow: none;
    text-shadow: none;
  }
  43% {
    box-shadow: -10px 9px #d10070, 10px -9px #0070d1;
    text-shadow: -3px 3px #d10070, 3px -3px #fff;
  }
  46% {
    box-shadow: none;
    text-shadow: none;
  }
  65% {
    box-shadow: none;
    text-shadow: none;
  }
  68% {
    box-shadow: -7px 5px #d10070, 7px -5px #0070d1;
    text-shadow: -2px 2px #d10070, 2px -2px #fff;
  }
  71% {
    box-shadow: none;
    text-shadow: none;
  }
  100% {
    box-shadow: none;
    text-shadow: none;
  }
}
@keyframes shake {
  33% {
    transform: translateX(-5px);
  }
  66% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes bounce {
  20% {
    transform: translateY(0.5rem);
  }
  40% {
    transform: translateY(0px);
  }
  60% {
    transform: translateY(0.5rem);
  }
  80% {
    transform: translateY(0px);
  }
}
@keyframes boucingletter {
  0% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-1vw);
  }
  60% {
    transform: translateY(0);
  }
  80% {
    transform: translateY(-0.3vw);
  }
  100% {
    transform: translateY(0);
  }
}
:root {
  font-size: 100%;
}

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

body {
  background-color: #0070d1;
  font-family: "Montserrat", sans-serif;
}
@media screen and (min-width: 1024px) {
  body {
    font-size: 1.4rem;
  }
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

h2 {
  font-weight: 800;
  font-size: 2rem;
  text-align: center;
  padding: 2rem 0;
}
@media screen and (min-width: 1024px) {
  h2 {
    font-size: 4rem;
  }
}

h3 {
  font-size: 1.5rem;
  text-align: center;
  padding-bottom: 1rem;
}
@media screen and (min-width: 1024px) {
  h3 {
    font-size: 3rem;
  }
}

section {
  padding: 2rem 0;
}
@media screen and (min-width: 1024px) {
  section {
    padding: 4rem 0;
  }
}

section:nth-child(2n+1) h2, section:nth-child(2n+1) h3 {
  color: #fff;
}

section:nth-child(2n) {
  background-color: #fff;
}
section:nth-child(2n) h2, section:nth-child(2n) h3 {
  color: #0070d1;
}

strong {
  font-weight: 600;
}

.italic {
  font-style: italic;
}

.bouncing {
  animation: boucingletter 0.5s ease-in-out 1;
}

.button {
  width: 240px;
  margin: auto;
  padding: 10px 0;
  border: none;
  border-radius: 0.2rem;
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
}
.button--dark {
  background-color: #0070d1;
  color: #fff;
}
.button--light {
  background-color: #fff;
  color: #0070d1;
}
@media screen and (min-width: 1024px) {
  .button {
    font-size: 1.4rem;
  }
}
.button:hover {
  animation: glitchAnim 3s infinite;
}

.section-header {
  height: 100vh;
  display: flex;
}

.header {
  margin: auto;
  padding: 5%;
}
.header__title {
  color: #fff;
  font-size: 4rem;
  font-family: "league_spartanbold";
  text-shadow: 2px 5px #d10070;
}
@media screen and (min-width: 1024px) {
  .header__title {
    font-size: 8rem;
    font-size: clamp(5rem, 8.5vw, 14rem);
    text-shadow: clamp(2px, 0.25vw, 7px) clamp(5px, 0.65vw, 18px) #d10070;
  }
}
.header__subtitle {
  font-family: "league_spartanbold";
  text-align: left;
  font-size: clamp(3rem, 5.1vw, 8.4rem);
  text-shadow: clamp(1px, 0.125vw, 4px) clamp(2px, 0.325vw, 9px) #d10070;
}
.header .letter, .header .word {
  display: inline-block;
  cursor: default;
}
.header__div {
  width: 100%;
  position: absolute;
  bottom: 5vh;
}
.header__div button {
  background-color: transparent;
  border-radius: 50%;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header__div button svg {
  fill: #fff;
  height: 3rem;
  pointer-events: none;
}
.header__div button:hover {
  animation: bounce 1s ease-in-out infinite;
}

.bio-card {
  width: 90%;
  max-width: 1600px;
  margin: auto;
  padding: 1rem;
  background-color: #0070d1;
  color: #fff;
  border-radius: 0.5rem;
}
@media screen and (min-width: 1024px) {
  .bio-card {
    width: 80%;
    margin: 2rem auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.bio-card__aside {
  width: 100%;
  margin: auto;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1024px) {
  .bio-card__aside {
    width: 30%;
    margin: auto;
  }
}
.bio-card__picture {
  width: 80%;
  max-width: 400px;
  margin: auto;
  margin-bottom: 1rem;
  border-radius: 50%;
  border: solid 3px #fff;
}
@media screen and (min-width: 1024px) {
  .bio-card__picture {
    width: 100%;
  }
}
.bio-card__network {
  text-align: center;
}
.bio-card__network img {
  height: 3rem;
  margin: 0 1rem;
  transition: transform 400ms;
}
.bio-card__network img:hover {
  transform: scale(1.2);
}
.bio-card__text {
  flex: 1;
}
.bio-card__text p {
  margin-bottom: 1rem;
}
.bio-card__text p:last-child {
  padding-top: 1rem;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .bio-card__text {
    padding: 0 2rem;
  }
}

.cv-container {
  width: 90%;
  max-width: 1600px;
  margin: auto;
}
@media screen and (min-width: 1024px) {
  .cv-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .cv-container .cv-section:first-child {
    grid-column: 1/3;
  }
  .cv-container .cv-section:nth-child(2) {
    grid-column: 3/4;
  }
  .cv-container .cv-section:last-child {
    grid-column: 1/4;
  }
}

.cv-section {
  padding: 1rem;
  color: #0070d1;
}

@media screen and (min-width: 1024px) {
  .education-card {
    display: flex;
    margin-bottom: 1rem;
  }
}
.education-card__year span {
  background-color: #0070d1;
  color: #fff;
  width: 70px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  margin: auto;
}
@media screen and (min-width: 1024px) {
  .education-card__year span {
    width: 100px;
  }
}
.education-card__text {
  padding: 1rem 0;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .education-card__text {
    text-align: left;
    margin-left: 1rem;
    padding: 0;
  }
}
.education-card__text p:first-child {
  font-weight: 600;
}
.education-card__text a {
  color: #0070d1;
}
.education-card__text a:hover {
  text-decoration-color: #d10070;
}
.education-card__text ul {
  padding-top: 0.5rem;
  padding-left: 2rem;
  max-width: 600px;
  margin: auto;
  text-align: left;
  list-style-image: url("../assets/images/circle-check-regular.svg");
}
.education-card__text ul li {
  line-height: 1rem;
}
.education-card__text ul li::marker {
  font-size: 1.5rem;
}
@media screen and (min-width: 1024px) {
  .education-card__text ul {
    max-width: 100%;
  }
  .education-card__text ul li {
    line-height: 1.5rem;
  }
  .education-card__text ul li::marker {
    font-size: 2rem;
  }
}

.skills {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.skills img {
  height: 4rem;
  margin: 0.2rem;
}
@media screen and (min-width: 1024px) {
  .skills img {
    height: 5.5rem;
    margin: 0.5rem;
  }
}

@media screen and (min-width: 1024px) {
  .hobbies {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}
.hobbies .hobbies-card {
  margin-bottom: 1rem;
}
.hobbies .hobbies-card__title {
  font-weight: bold;
}

.projects-container {
  max-width: 2000px;
  margin: auto;
  display: grid;
  padding: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(325px, 1fr));
  gap: 2rem;
}
@media screen and (min-width: 1024px) {
  .projects-container {
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
  }
}
.projects-container__more {
  display: none;
}
.projects-container__more--active {
  display: grid;
}
.projects-container__button {
  padding: 1rem;
  text-align: center;
}

.project-card {
  background-color: #fff;
  display: block;
  color: #0070d1;
  text-decoration: none;
  padding: 0.5rem;
  transition: box-shadow 400ms;
  border-radius: 0.5rem;
}
@media screen and (min-width: 1024px) {
  .project-card {
    transition: transform 0.4s ease-in-out;
  }
  .project-card:hover {
    transform: scale(1.05);
  }
}
.project-card__picture {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: top;
  border-radius: 0.3rem 0.3rem 0 0;
  pointer-events: none;
}
.project-card__title {
  padding: 0.5rem 0;
  color: #0070d1 !important;
  text-align: left;
  text-shadow: none;
}
@media screen and (min-width: 1024px) {
  .project-card__title {
    font-size: 2rem;
  }
}

form {
  color: #0070d1;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  margin: auto;
}
@media screen and (min-width: 1024px) {
  form {
    width: 80%;
    max-width: 1000px;
  }
}
form.shaking {
  animation: shake 400ms;
}
form label {
  margin-top: 0.5rem;
  font-weight: bold;
}
form input, form textarea {
  margin-top: 0.2rem;
  padding: 0 0.5rem;
  border: none;
  border-radius: 0.2rem;
  outline: solid 1px #0070d1;
  line-height: 1.4rem;
  font-size: 1rem;
  color: #0070d1;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
@media screen and (min-width: 1024px) {
  form input, form textarea {
    line-height: 2rem;
    font-size: 1.4rem;
  }
}
form input:focus, form textarea:focus {
  border: none;
  outline: solid 2px #0070d1;
}
form input.error, form textarea.error {
  background-color: #f1aeb5;
  outline: solid 2px #dc3545;
}
form textarea {
  resize: none;
}
form .btn-submit {
  margin-top: 1rem;
}
@media screen and (min-width: 1024px) {
  form .btn-submit {
    margin-top: 2rem;
  }
}

.box-alert {
  padding: 0.5rem;
  text-align: center;
  font-weight: 600;
  margin-bottom: 2rem;
}
.box-alert--success {
  background-color: #a3cfbb;
  color: #198754;
  box-shadow: 5px 5px 0px #198754;
}
.box-alert--error {
  background-color: #f1aeb5;
  color: #dc3545;
  box-shadow: 5px 5px 0px #dc3545;
}

footer {
  padding: 1.5rem;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
}
footer p {
  display: flex;
  justify-content: center;
  align-items: center;
}
footer a {
  display: flex;
  align-items: center;
}
footer img {
  height: 1.6rem;
  margin-right: 0.5rem;
  transition: transform 400ms;
}
footer img:hover {
  transform: scale(1.2);
}