@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
}

html,
body {
  min-width: 100%;
  min-height: 100%;
  scroll-behavior: smooth;
}
@media screen and (max-width: 600px) {
  html,
  body {
    width: 100dvw;
    height: 100dvh;
  }
}

@font-face {
  font-family: "Gloock";
  src: url("../assets/fonts/Gloock-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Finlandica";
  src: url("../assets/fonts/Finlandica-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Finlandica";
  src: url("../assets/fonts/Finlandica-Italic.ttf");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Finlandica";
  src: url("../assets/fonts/Finlandica-Medium.ttf");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Finlandica";
  src: url("../assets/fonts/Finlandica-MediumItalic.ttf");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Finlandica";
  src: url("../assets/fonts/Finlandica-SemiBold.ttf");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Finlandica";
  src: url("../assets/fonts/Finlandica-SemiBoldItalic.ttf");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "Finlandica";
  src: url("../assets/fonts/Finlandica-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Finlandica";
  src: url("../assets/fonts/Finlandica-BoldItalic.ttf");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "AlumniSansPinstripe";
  src: url("../assets/fonts/AlumniSansPinstripe-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "AlumniSansPinstripe";
  src: url("../assets/fonts/AlumniSansPinstripe-Italic.ttf");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Afacad";
  src: url("../assets/fonts/Afacad-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Afacad";
  src: url("../assets/fonts/Afacad-Italic.ttf");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Afacad";
  src: url("../assets/fonts/Afacad-Medium.ttf");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Afacad";
  src: url("../assets/fonts/Afacad-MediumItalic.ttf");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Afacad";
  src: url("../assets/fonts/Afacad-SemiBold.ttf");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Afacad";
  src: url("../assets/fonts/Afacad-SemiBoldItalic.ttf");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "Afacad";
  src: url("../assets/fonts/Afacad-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Afacad";
  src: url("../assets/fonts/Afacad-BoldItalic.ttf");
  font-weight: 700;
  font-style: italic;
}
:root {
  --background: #F9F3F2;
  --background_rgb: 249, 243, 242;
  --main: #E15D4A;
  --main_rgb: 225, 94, 74;
  --secondary: #473D3B;
  --secondary_rgb: 71, 61, 59;
  --tertiary: #A97E77;
  --tertiary_rgb: 169, 126, 119;
}

body.dark-mode {
  --background: #292524;
  --background_rgb: 41, 37, 36;
  --main: #E15D4A;
  --main_rgb: 225, 94, 74;
  --secondary: #E2C6C0;
  --secondary_rgb: 226, 198, 192;
  --tertiary: #BF877D;
  --tertiary_rgb: 191, 135, 125;
}

body {
  box-sizing: border-box;
  font-family: "Finlandica", sans-serif;
  background-color: var(--background);
  color: var(--secondary);
  display: grid;
  grid-template-columns: auto 140px;
  grid-template-areas: "section aside";
  column-gap: 1rem;
  timeline-scope: --main-sections;
  transition: background-color 0.3s, color 0.3s;
}
@media screen and (max-width: 1280px) {
  body {
    column-gap: 0;
  }
}
@media screen and (max-width: 600px) {
  body {
    grid-template-columns: none;
    grid-template-rows: 1fr auto;
    grid-template-areas: "section" "aside";
  }
}

h1,
h2,
h3,
h4 {
  font-family: "Gloock", sans-serif;
}

aside {
  display: flex;
  flex-direction: column;
  grid-area: aside;
  overflow: hidden;
}
@media screen and (max-width: 600px) {
  aside {
    overflow-y: auto;
  }
}
aside .accessibility {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-left: auto;
  translate: 0 1rem;
  transform: none;
  transition: transform 1s 1s;
}
@starting-style {
  aside .accessibility {
    transform: translate(100%, 0);
  }
}
@media screen and (max-width: 600px) {
  aside .accessibility {
    flex-direction: row;
    align-items: stretch;
    position: absolute;
    top: 0;
    right: 1rem;
    z-index: 3;
    transition: opacity 1s 1s;
  }
  @starting-style {
    aside .accessibility {
      opacity: 0;
    }
  }
}
aside .accessibility .access-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 5px 10px;
  margin-right: 0.5rem;
  border-radius: 10px;
  border: 1px solid var(--secondary);
  cursor: pointer;
  transition: filter 0.3s, background-color 0.3s;
}
aside .accessibility .access-button img {
  height: 15px;
  transition: scale 0.3s;
}
aside .accessibility .access-button img:where(:is(body.dark-mode aside .accessibility .access-button img)) {
  filter: invert(100%);
}
aside .accessibility .access-button:hover {
  background-color: rgba(var(--secondary_rgb), 0.07);
}
aside .accessibility .access-button:hover img {
  scale: 1.15;
}
aside .accessibility .access-options {
  width: 80%;
  max-width: 500px;
  height: 80%;
  max-height: 300px;
  margin: auto;
  border: none;
  border-radius: 1rem;
  box-shadow: 0 10px 20px -10px #000;
}
aside .accessibility .access-options::backdrop {
  background: rgba(0, 0, 0, 0.6);
}
aside .accessibility .access-options .options-global-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
aside .accessibility .access-options .options-global-container .options-inner-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 245px;
  height: fit-content;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-menu-title {
  font-family: "Afacad", sans-serif;
  font-size: 1.5rem;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  align-items: center;
  gap: 1.5rem 1rem;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .lang-switcher {
  display: flex;
  width: fit-content;
  height: fit-content;
  padding: 0 0.25rem;
  gap: 0.5rem;
  border-radius: 10px;
  background-color: rgba(var(--secondary_rgb), 0.1);
  position: relative;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .lang-switcher::before {
  content: "";
  display: block;
  background-color: var(--secondary);
  width: 50%;
  height: 100%;
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
  transition: translate 0.3s;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .lang-switcher span {
  width: 50%;
  padding: 0.25rem;
  color: var(--secondary);
  position: relative;
  z-index: 1;
  transition: color 0.3s;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .lang-switcher.fr span:first-child {
  color: #FFF;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .lang-switcher.fr span:first-child:where(:is(body.dark-mode aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .lang-switcher.fr span:first-child)) {
  color: var(--primary);
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .lang-switcher.fr span:last-child {
  cursor: pointer;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .lang-switcher.fr span:last-child:where(:is(body.dark-mode aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .lang-switcher.fr span:last-child)) {
  color: var(--primary);
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .lang-switcher.en::before {
  translate: 100%;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .lang-switcher.en span:first-child {
  cursor: pointer;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .lang-switcher.en span:first-child:where(:is(body.dark-mode aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .lang-switcher.en span:first-child)) {
  color: var(--primary);
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .lang-switcher.en span:last-child {
  color: #FFF;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .lang-switcher.en span:last-child:where(:is(body.dark-mode aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .lang-switcher.en span:last-child)) {
  color: var(--primary);
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .mode-switcher {
  display: flex;
  width: fit-content;
  height: fit-content;
  padding: 0 0.25rem;
  gap: 0.5rem;
  border-radius: 10px;
  background-color: rgba(var(--secondary_rgb), 0.1);
  position: relative;
}
@media screen and (max-width: 600px) {
  aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .mode-switcher {
    height: auto;
  }
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .mode-switcher::before {
  content: "";
  display: block;
  background-color: var(--secondary);
  width: 50%;
  height: 100%;
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
  transition: translate 0.3s;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .mode-switcher span {
  display: flex;
  padding: 0.35rem 0.25rem;
  color: var(--secondary);
  position: relative;
  z-index: 1;
  transition: color 0.3s;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .mode-switcher span svg {
  width: 18px;
  height: 15px;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .mode-switcher span[onclick="changeMode('light')"]:where(:is(body:not(.dark-mode) aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .mode-switcher span[onclick="changeMode('light')"])) svg {
  fill: #FFF;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .mode-switcher span[onclick="changeMode('light')"]:where(:is(body.dark-mode aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .mode-switcher span[onclick="changeMode('light')"])) {
  cursor: pointer;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .mode-switcher span[onclick="changeMode('dark')"]:where(:is(body:not(.dark-mode) aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .mode-switcher span[onclick="changeMode('dark')"])) {
  cursor: pointer;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .mode-switcher:where(:is(body:not(.dark-mode) aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .mode-switcher))::before {
  translate: 0;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .mode-switcher:where(:is(body.dark-mode aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .mode-switcher))::before {
  translate: 100%;
}
@media screen and (max-width: 600px) {
  aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .mode-switcher + p {
    display: none;
  }
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher {
  display: flex;
  width: fit-content;
  height: fit-content;
  padding: 0 0.25rem;
  gap: 0.5rem;
  border-radius: 10px;
  background-color: rgba(var(--secondary_rgb), 0.1);
  position: relative;
}
@media screen and (max-width: 600px) {
  aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher {
    display: none;
  }
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher::before {
  content: "";
  display: block;
  background-color: var(--secondary);
  width: 33%;
  height: 100%;
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
  transition: translate 0.3s;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher span {
  display: flex;
  padding: 0.35rem 0.25rem;
  color: var(--secondary);
  position: relative;
  z-index: 1;
  transition: color 0.3s;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher span svg {
  width: 18px;
  height: 15px;
  transition: fill 0.3s;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher span[onclick="changeText('medium')"]:where(:is(body.text-medium aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher span[onclick="changeText('medium')"])) svg {
  fill: #fff;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher span[onclick="changeText('medium')"]:where(:is(body.text-big aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher span[onclick="changeText('medium')"])), aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher span[onclick="changeText('medium')"]:where(:is(body.text-max aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher span[onclick="changeText('medium')"])) {
  cursor: pointer;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher span[onclick="changeText('medium')"] svg {
  scale: 0.75;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher span[onclick="changeText('big')"]:where(:is(body.text-medium aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher span[onclick="changeText('big')"])), aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher span[onclick="changeText('big')"]:where(:is(body.text-max aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher span[onclick="changeText('big')"])) {
  cursor: pointer;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher span[onclick="changeText('big')"]:where(:is(body.text-big aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher span[onclick="changeText('big')"])) svg {
  fill: #fff;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher span[onclick="changeText('max')"]:where(:is(body.text-medium aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher span[onclick="changeText('max')"])), aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher span[onclick="changeText('max')"]:where(:is(body.text-big aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher span[onclick="changeText('max')"])) {
  cursor: pointer;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher span[onclick="changeText('max')"]:where(:is(body.text-max aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher span[onclick="changeText('max')"])) svg {
  fill: #fff;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher span[onclick="changeText('max')"] svg {
  scale: 1.25;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher:where(:is(body.text-medium aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher))::before {
  translate: 0;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher:where(:is(body.text-big aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher))::before {
  translate: 100%;
}
aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher:where(:is(body.text-max aside .accessibility .access-options .options-global-container .options-inner-container .access-options-list .text-size-switcher))::before {
  translate: 200%;
}
aside .accessibility .access-options .access-options-close-button {
  all: unset;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: auto;
  position: relative;
  grid-area: close;
  position: absolute;
  top: 1rem;
  right: 1rem;
}
aside .accessibility .access-options .access-options-close-button::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--main_rgb), 0.1);
  border-radius: 99px;
  position: absolute;
  top: 0;
  left: 0;
  transition: scale 0.3s ease-out;
}
aside .accessibility .access-options .access-options-close-button::after {
  content: url("../assets/close.svg");
  display: block;
  width: 15px;
  height: 15px;
  filter: drop-shadow(0 3px 3px rgba(var(--main_rgb), 0.3));
  transition: scale 0.3s ease-out, rotate 0.3s ease-out;
}
aside .accessibility .access-options .access-options-close-button:hover::before {
  scale: 1.2;
}
aside .accessibility .access-options .access-options-close-button:hover::after {
  scale: 1.3;
  rotate: -180deg;
}
aside .accessibility .access-options .access-options-close-button:focus {
  outline: 1px auto;
}
aside nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  font-family: "Afacad", sans-serif;
  position: fixed;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  transform: none;
  transition: transform 1s 1.3s;
}
@starting-style {
  aside nav {
    transform: translateX(115px);
  }
}
@media screen and (max-width: 600px) {
  aside nav {
    width: 100%;
    padding: 0.5rem 1rem;
    flex-direction: row;
    justify-content: space-between;
    box-sizing: border-box;
    border-top: 1px solid rgba(var(--secondary_rgb), 0.2);
    top: initial;
    right: initial;
    translate: 0;
    position: relative;
    height: fit-content;
    flex-shrink: 0;
    transition: opacity 1s 1.3s;
  }
  @starting-style {
    aside nav {
      opacity: 0;
    }
  }
}
aside nav a {
  padding: 0.25rem;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  animation: nav-active-link linear;
  animation-timeline: --main-sections;
  animation-range: calc((var(--j) - 1) * 16.67%) calc(var(--j) * 16.67% + 1px);
  transition: color 0.3s 0.2s;
}
@keyframes nav-active-link {
  0%, 100% {
    color: #fff;
  }
}
aside nav a:where(:is(body.text-big aside nav a)) {
  font-size: 1.15rem;
}
aside nav a:where(:is(body.text-max aside nav a)) {
  font-size: 1.3rem;
}
@media screen and (max-width: 600px) {
  aside nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  @keyframes nav-active-link {
    0%, 100% {
      color: var(--secondary);
    }
  }
}
aside nav a:nth-child(1) {
  --j: 1;
}
aside nav a:nth-child(2) {
  --j: 2;
}
aside nav a:nth-child(3) {
  --j: 3;
}
aside nav a:nth-child(4) {
  --j: 4;
}
aside nav a:nth-child(5) {
  --j: 5;
}
aside nav a:nth-child(6) {
  --j: 6;
}
aside nav a::before {
  content: "";
  display: block;
  width: 0;
  height: 100%;
  background-color: var(--main);
  border-radius: 2rem 0 0 2rem;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  transition: width 0.8s cubic-bezier(0.65, 0, 0, 1);
  animation: nav-active-link-bg linear;
  animation-timeline: --main-sections;
  animation-range: calc((var(--j) - 1) * 16.67%) calc(var(--j) * 16.67% + 1px);
}
@media screen and (max-width: 600px) {
  aside nav a::before {
    background-color: rgba(var(--main_rgb), 0.2);
    border-radius: 1rem;
    right: initial;
    left: -4px;
  }
}
@keyframes nav-active-link-bg {
  0%, 100% {
    width: calc(100% + 0.5rem);
  }
}
aside nav a span.compact {
  display: none;
}
@media screen and (max-width: 600px) {
  aside nav a span:where(:not(.compact)) {
    display: none;
  }
  aside nav a span.compact {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
  }
}
aside nav a img {
  display: none;
}
@media screen and (max-width: 600px) {
  aside nav a img {
    display: block;
    width: 40px;
  }
}
@media screen and (min-width: 601px) {
  aside nav a:hover {
    color: #fff;
  }
  aside nav a:hover::before {
    width: calc(100% + 0.5rem);
  }
}

section {
  height: calc(100dvh - 3rem);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  grid-area: section;
  scroll-timeline: --main-sections y;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overflow-y: auto;
}
@media screen and (max-width: 600px) {
  section {
    box-sizing: border-box;
    height: 100%;
    padding: 0;
  }
}
section article {
  height: calc(100dvh - 6rem);
  min-height: calc(100dvh - 6rem);
  padding: 2rem 0 4rem;
  scroll-snap-align: start;
  position: relative;
}
@media screen and (max-width: 600px) {
  section article {
    min-height: calc(100dvh - 104px);
    height: calc(100dvh - 104px);
    padding: 3rem 0 0 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }
}
section article > label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: fit-content;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-family: "AlumniSansPinstripe";
  font-size: 2rem;
  text-shadow: 0 0 var(--secondary);
  position: relative;
}
section article > label:where(:is(body.text-big section article > label)) {
  font-size: 2.25rem;
}
section article > label:where(:is(body.text-max section article > label)) {
  font-size: 2.5rem;
}
section article > label::before {
  content: "";
  display: block;
  width: 50px;
  height: 1px;
  background-color: var(--tertiary);
}
@media screen and (max-width: 600px) {
  section article > label::before {
    display: none;
  }
}
section article > label svg {
  width: 30px;
}
section article.about {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 601px) {
  section article.about::after {
    content: "";
    display: block;
    width: 10px;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
    opacity: 0.1;
    position: absolute;
    top: 0;
    right: 0;
    transition: opacity 1s 1.5s;
  }
  @starting-style {
    section article.about::after {
      opacity: 0;
    }
  }
}
section article.about > [class$=-container] {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scrollbar-color: #A97E77 rgba(169, 126, 119, 0.05);
}
section article.about > [class$=-container] > [class$=-list] {
  width: max-content;
  padding-top: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 2rem;
  display: grid;
  grid-auto-flow: column;
  overflow-x: auto;
}
section article.about > [class$=-container] > [class$=-list] > div {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 0.5rem;
  position: relative;
}
@media screen and (max-width: 600px) {
  section article.about {
    min-height: 100%;
    height: 100%;
  }
}
@media screen and (min-width: 601px) {
  section article.about::after {
    content: "";
    display: block;
    width: 10px;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
    opacity: 0.1;
    position: absolute;
    top: 0;
    right: 0;
    transition: opacity 1s 1.5s;
  }
  @starting-style {
    section article.about::after {
      opacity: 0;
    }
  }
}
section article.about > header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
@media screen and (max-width: 600px) {
  section article.about > header {
    margin-bottom: 1rem;
  }
}
section article.about > header > img {
  max-height: 120px;
  transition: opacity 2s 0.3s;
}
@starting-style {
  section article.about > header > img {
    opacity: 0;
  }
}
section article.about > header .text-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
section article.about > header .text-content .h1 {
  overflow: hidden;
}
section article.about > header .text-content .h1 h1 {
  font-size: 2.25rem;
  color: var(--main);
  transition: translate 1s;
}
@starting-style {
  section article.about > header .text-content .h1 h1 {
    translate: 0 100%;
  }
}
@media screen and (max-width: 600px) {
  section article.about > header .text-content .h1 h1 {
    font-size: 1.75rem;
  }
}
section article.about > header .text-content .h2 {
  overflow: hidden;
  display: none;
}
section article.about > header .text-content .h2 h2 {
  font-size: 1.35rem;
  color: var(--tertiary);
  opacity: 0.9;
  transition: translate 1s 0.3s;
}
@starting-style {
  section article.about > header .text-content .h2 h2 {
    translate: 0 100%;
  }
}
@media screen and (max-width: 600px) {
  section article.about > header .text-content .h2 h2 {
    font-size: 1rem;
  }
}
section article.about > header .text-content .social-network-links {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}
section article.about > header .text-content .social-network-links .dribbble-link img {
  height: 18px;
  filter: contrast(7) saturate(0);
  transition: filter 0.5s;
}
section article.about > header .text-content .social-network-links .dribbble-link img:where(:is(body.dark-mode section article.about > header .text-content .social-network-links .dribbble-link img)) {
  filter: contrast(0) brightness(1.5);
}
section article.about > header .text-content .social-network-links .dribbble-link:hover img {
  filter: none;
}
section article.about > header .text-content .social-network-links .linkedin-link img {
  height: 18px;
  filter: contrast(1.5) saturate(0);
  transition: filter 0.5s;
}
section article.about > header .text-content .social-network-links .linkedin-link img:where(:is(body.dark-mode section article.about > header .text-content .social-network-links .linkedin-link img)) {
  filter: contrast(0) brightness(1.5);
}
section article.about > header .text-content .social-network-links .linkedin-link:hover img {
  filter: none;
}
section article.about > header .text-content .social-network-links .dribbble-link {
  transition: opacity 1s 0.5s;
}
@starting-style {
  section article.about > header .text-content .social-network-links .dribbble-link {
    opacity: 0;
  }
}
section article.about > header .text-content .social-network-links .linkedin-link {
  transition: opacity 1s 0.6s;
}
@starting-style {
  section article.about > header .text-content .social-network-links .linkedin-link {
    opacity: 0;
  }
}
section article.about > label {
  margin-bottom: 0;
  transition: opacity 1s 0.7s;
}
@starting-style {
  section article.about > label {
    opacity: 0;
  }
}
section article.about > label svg .about-lab-bg {
  transform-box: fill-box;
  transform-origin: center center;
  animation: sliding 4s linear infinite;
}
@keyframes sliding {
  0%, 61% {
    translate: 0;
    opacity: 1;
  }
  63% {
    translate: 100% 0;
    opacity: 1;
  }
  64% {
    translate: 100% 0;
    opacity: 0;
  }
  65% {
    translate: -100% 0;
    opacity: 0;
  }
  66% {
    translate: -100% 0;
    opacity: 1;
  }
  72%, 100% {
    translate: 0;
    opacity: 1;
  }
}
section article.about .about-container .about-list {
  padding-top: 0;
  grid-auto-flow: row;
  gap: 5rem;
  font-size: 0.875rem;
}
section article.about .about-container .about-list:where(:is(body.text-big section article.about .about-container .about-list)) {
  font-size: 1rem;
}
section article.about .about-container .about-list:where(:is(body.text-max section article.about .about-container .about-list)) {
  font-size: 1.25rem;
}
@media screen and (max-width: 600px) {
  section article.about .about-container .about-list {
    padding-right: 0;
    padding-bottom: 0;
  }
}
section article.about .about-container .about-list .about-pro {
  display: flex;
  gap: 2rem;
}
section article.about .about-container .about-list .about-pro b {
  font-weight: 600;
}
@media screen and (max-width: 600px) {
  section article.about .about-container .about-list .about-pro {
    flex-direction: column;
    gap: 1rem;
  }
}
section article.about .about-container .about-list .about-pro .journey-content {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: opacity 1s 1.1s;
}
@starting-style {
  section article.about .about-container .about-list .about-pro .journey-content {
    opacity: 0;
  }
}
@media screen and (max-width: 600px) {
  section article.about .about-container .about-list .about-pro .journey-content {
    max-width: calc(100dvw - 2rem);
    font-size: 0.85rem;
    gap: 0.25rem;
  }
}
section article.about .about-container .about-list .about-pro .journey-content .pro-intro .first-letter {
  font-family: "Gloock";
  font-size: 2rem;
}
section article.about .about-container .about-list .about-pro .journey-content .pro-details {
  line-height: 1.5;
}
@media screen and (max-width: 600px) {
  section article.about .about-container .about-list .about-pro .journey-content .pro-details {
    line-height: 1.15;
  }
}
section article.about .about-container .about-list .about-pro .journey-content .pro-details a {
  color: inherit;
}
section article.about .about-container .about-list .about-pro .journey-content .pro-details a:hover {
  color: var(--main);
}
section article.about .about-container .about-list .about-pro .skills-content {
  max-width: 600px;
  padding-top: 1.15rem;
  transition: opacity 1s 1.2s;
}
@starting-style {
  section article.about .about-container .about-list .about-pro .skills-content {
    opacity: 0;
  }
}
@media screen and (max-width: 600px) {
  section article.about .about-container .about-list .about-pro .skills-content {
    padding-top: 0;
    padding-right: 1rem;
    padding-bottom: 0.5rem;
    width: calc(100dvw - 2rem);
    overflow-x: auto;
  }
}
section article.about .about-container .about-list .about-pro .skills-content .skills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media screen and (max-width: 600px) {
  section article.about .about-container .about-list .about-pro .skills-content .skills-grid {
    display: flex;
    width: max-content;
  }
}
section article.about .about-container .about-list .about-pro .skills-content .skills-grid div {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  transition: background-color 0.3s, border-color 0.3s;
}
section article.about .about-container .about-list .about-pro .skills-content .skills-grid div:where(:is(body.dark-mode section article.about .about-container .about-list .about-pro .skills-content .skills-grid div)) {
  background-color: transparent;
  border-color: var(--tertiary);
}
@media screen and (max-width: 600px) {
  section article.about .about-container .about-list .about-pro .skills-content .skills-grid div {
    width: 60dvw;
    padding: 0.75rem;
    gap: 0.25rem;
  }
}
section article.about .about-container .about-list .about-pro .skills-content .skills-grid div span {
  font-family: "Afacad";
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--main);
}
@media screen and (max-width: 600px) {
  section article.about .about-container .about-list .about-pro .skills-content .skills-grid div span {
    font-size: 1rem;
  }
}
section article.about .about-container .about-list .about-perso {
  height: fit-content;
  display: flex;
  gap: 2rem;
  font-family: "Afacad";
  transition: opacity 1s 1.3s;
}
@starting-style {
  section article.about .about-container .about-list .about-perso {
    opacity: 0;
  }
}
@media screen and (max-width: 600px) {
  section article.about .about-container .about-list .about-perso {
    display: none;
  }
}
section article.about .about-container .about-list .about-perso > div {
  max-width: 450px;
  display: flex;
  gap: 0.5rem;
}
section article.about .about-container .about-list .about-perso > div img {
  height: 45px;
}
section article.about .about-container .about-list .about-perso > div p {
  padding-top: 0.25rem;
}
section article.about .about-container .about-list .about-perso > div:where(:not(:last-child)) {
  padding-right: 2rem;
  border-right: 1px solid rgba(var(--tertiary_rgb), 0.5);
}
section article.proj > label svg .proj-lab-cir {
  transform-box: fill-box;
  transform-origin: calc(50% + 1px) calc(50% - 2px);
  animation: rotation 12s linear infinite reverse;
}
section article.proj > label svg .proj-lab-square {
  transform-box: fill-box;
  transform-origin: center center;
  animation: rotation 12s linear infinite;
}
section article.proj > label svg .proj-lab-tri {
  transform-box: fill-box;
  transform-origin: center center;
  animation: rotation 12s linear infinite reverse;
}
@keyframes rotation {
  0% {
    rotate: 0;
  }
  100% {
    rotate: 360deg;
  }
}
section article.proj > label .access-hint {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: max-content;
  padding: 0.25rem 0.5rem;
  background-color: rgba(169, 126, 119, 0.1);
  font-family: "Afacad";
  font-size: 0.875rem;
  border-radius: 5px;
  position: relative;
}
section article.proj > label .access-hint:where(:is(body.text-big section article.proj > label .access-hint)) {
  font-size: 1rem;
}
section article.proj > label .access-hint:where(:is(body.text-max section article.proj > label .access-hint)) {
  font-size: 1.25rem;
}
section article.proj > label .access-hint::before {
  content: url('data:image/svg+xml;utf8,<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" fill="%23473D3B"><path d="M7,1.16666667 C10.2165,1.16666667 12.8333333,3.7835 12.8333333,7 C12.8333333,10.2165 10.2165,12.8333333 7,12.8333333 C3.7835,12.8333333 1.16666667,10.2165 1.16666667,7 C1.16666667,3.7835 3.7835,1.16666667 7,1.16666667 Z M7,0 C3.13425,0 0,3.13425 0,7 C0,10.86575 3.13425,14 7,14 C10.86575,14 14,10.86575 14,7 C14,3.13425 10.86575,0 7,0 Z M5.81408333,9.33916667 C6.14308333,8.29558333 6.76608333,7.0455 6.87633333,6.72933333 C7.03558333,6.27025 6.75325,6.06666667 5.86133333,6.85125 L5.663,6.47791667 C6.68033333,5.37133333 8.77508333,5.12108333 8.06225,6.8355 C7.61716667,7.90591667 7.29866667,8.62866667 7.11666667,9.18633333 C6.85125,9.99891667 7.5215,9.66933333 8.17775,9.06325 C8.267,9.20908333 8.29616667,9.25633333 8.38541667,9.42433333 C6.92825,10.8115 5.31066667,10.934 5.81408333,9.33916667 L5.81408333,9.33916667 Z M8.58025,4.57391667 C8.26991667,4.83816667 7.81025,4.83233333 7.553,4.56108333 C7.29575,4.28983333 7.33891667,3.85641667 7.64866667,3.59216667 C7.959,3.32791667 8.41866667,3.33433333 8.67591667,3.605 C8.932,3.87683333 8.89,4.31025 8.58025,4.57391667 Z"></path></svg>');
  display: block;
  width: 12px;
  height: 12px;
  translate: 0 -2px;
}
section article.proj .carousel .flickity-slider .carousel-cell {
  width: clamp(400px, 50%, 800px);
  padding: 0.5rem;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 0.5rem;
}
@media screen and (max-width: 600px) {
  section article.proj .carousel .flickity-slider .carousel-cell {
    width: calc(100% - 3rem);
  }
}
section article.proj .carousel .flickity-slider .carousel-cell button {
  display: flex;
  aspect-ratio: 16/9;
  background-color: var(--secondary);
  border: none;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
@media screen and (max-width: 600px) {
  section article.proj .carousel .flickity-slider .carousel-cell button {
    aspect-ratio: 3/4;
  }
}
section article.proj .carousel .flickity-slider .carousel-cell button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section article.proj .carousel .flickity-slider .carousel-cell p {
  width: fit-content;
  padding: 0.075rem 0.75rem 0.15rem;
  background-color: rgba(var(--main_rgb), 0.8);
  font-family: "Afacad";
  font-size: 0.875rem;
  letter-spacing: 0.25px;
  color: #fff;
  border-radius: 8px;
}
section article.proj .carousel .flickity-slider .carousel-cell p:where(:is(body.text-big section article.proj .carousel .flickity-slider .carousel-cell p)) {
  font-size: 1rem;
}
section article.proj .carousel .flickity-slider .carousel-cell p:where(:is(body.text-max section article.proj .carousel .flickity-slider .carousel-cell p)) {
  font-size: 1.25rem;
}
section article.proj .carousel .flickity-button {
  border: 1px solid rgba(var(--secondary_rgb), 0.2);
  box-shadow: 0 4px 20px -10px var(--secondary);
  transition: background-color 0.3s, border 0.3s, box-shadow 0.3s;
}
section article.proj .carousel .flickity-button:where(:is(body.dark-mode section article.proj .carousel .flickity-button)) {
  background-color: var(--main);
}
section article.proj .carousel .flickity-button.flickity-prev-next-button .flickity-button-icon {
  left: 30%;
  width: 40%;
  fill: var(--secondary);
  transition: fill 0.3s, scale 0.3s;
}
section article.proj .carousel .flickity-button:hover {
  border: 1px solid rgba(var(--main_rgb), 0.4);
  box-shadow: 0 4px 10px -5px var(--main);
}
section article.proj .carousel .flickity-button:hover .flickity-button-icon {
  scale: 1.2;
}
section article.proj .carousel .flickity-button:hover .flickity-button-icon:where(:not(body.dark-mode section article.proj .carousel .flickity-button:hover .flickity-button-icon)) {
  fill: var(--main);
}
section article.proj .carousel .flickity-button:focus {
  outline: 1px auto;
}
section article.proj .carousel .flickity-page-dots .dot {
  width: 25px;
  height: 6px;
  margin: 0 7px;
  border-radius: 20px;
}
section article.proj .carousel .flickity-page-dots .dot:where(:is(body.dark-mode section article.proj .carousel .flickity-page-dots .dot)) {
  background: #FFF;
}
@media screen and (max-width: 600px) {
  section article.proj .carousel .flickity-page-dots .dot {
    width: 15px;
  }
}
section article.proj .popins > div[popover] {
  width: 85vw;
  max-width: 1500px;
  height: 75vh;
  padding: 2.5rem;
  background-color: #FFF;
  border: none;
  border-radius: 2rem;
  position: fixed;
  top: 50%;
  left: 50%;
  opacity: 0;
  translate: -50% calc(-50% + 10px);
  transition: opacity 0.3s, translate 0.3s, display 0.5s, overlay 0.5s, background-color 0.3s;
  transition-behavior: allow-discrete;
}
section article.proj .popins > div[popover]:where(:is(body.dark-mode section article.proj .popins > div[popover])) {
  background-color: var(--background);
}
@media screen and (max-width: 600px) {
  section article.proj .popins > div[popover] {
    width: 95dvw;
    height: 85dvh;
    box-sizing: border-box;
  }
}
section article.proj .popins > div[popover]::backdrop {
  background-color: rgba(var(--secondary_rgb), 0.6);
  opacity: 0;
  transition: opacity 0.3s, display 0.5s, overlay 0.5s;
  transition-behavior: allow-discrete;
}
section article.proj .popins > div[popover]:popover-open {
  opacity: 1;
  translate: -50% -50%;
  transition: opacity 0.3s 0.1s, translate 0.3s 0.1s, display 0.5s, overlay 0.5s;
}
section article.proj .popins > div[popover]:popover-open::backdrop {
  opacity: 1;
}
@starting-style {
  section article.proj .popins > div[popover]:popover-open::backdrop {
    opacity: 0;
  }
}
@starting-style {
  section article.proj .popins > div[popover]:popover-open {
    opacity: 0;
    translate: -50% calc(-50% + 40px);
  }
}
section article.proj .popins > div[popover] .popin-container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "main close";
}
section article.proj .popins > div[popover] .close-button {
  all: unset;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: auto;
  position: relative;
  grid-area: close;
}
section article.proj .popins > div[popover] .close-button::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--main_rgb), 0.1);
  border-radius: 99px;
  position: absolute;
  top: 0;
  left: 0;
  transition: scale 0.3s ease-out;
}
section article.proj .popins > div[popover] .close-button::after {
  content: url("../assets/close.svg");
  display: block;
  width: 15px;
  height: 15px;
  filter: drop-shadow(0 3px 3px rgba(var(--main_rgb), 0.3));
  transition: scale 0.3s ease-out, rotate 0.3s ease-out;
}
section article.proj .popins > div[popover] .close-button:hover::before {
  scale: 1.2;
}
section article.proj .popins > div[popover] .close-button:hover::after {
  scale: 1.3;
  rotate: -180deg;
}
section article.proj .popins > div[popover] .close-button:focus {
  outline: 1px auto;
}
section article.proj .popins > div[popover] .popin-content {
  grid-area: main;
}
section article.proj .popins > div[popover] .popin-content > .title {
  font-family: "AlumniSansPinstripe";
  font-family: "Afacad";
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--secondary);
}
section article.proj .popins > div[popover] .popin-content > .title:where(:is(body.text-big section article.proj .popins > div[popover] .popin-content > .title)) {
  font-size: 1.75rem;
}
section article.proj .popins > div[popover] .popin-content > .title:where(:is(body.text-max section article.proj .popins > div[popover] .popin-content > .title)) {
  font-size: 2rem;
}
@media screen and (max-width: 600px) {
  section article.proj .popins > div[popover] .popin-content > .title {
    font-size: 1.15rem;
  }
}
section article.proj .popins > div[popover] .popin-content .content-details {
  height: 100%;
  padding-top: 20px;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  box-sizing: border-box;
}
@media screen and (max-width: 600px) {
  section article.proj .popins > div[popover] .popin-content .content-details {
    width: calc(100% + 35px);
    flex-direction: column;
  }
}
section article.proj .popins > div[popover] .popin-content .content-details .images {
  width: 65%;
  max-width: 800px;
  height: calc(75vh - 32px - 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  overflow-y: auto;
  flex-shrink: 0;
  position: relative;
  transition: background-color 0.3s;
}
section article.proj .popins > div[popover] .popin-content .content-details .images:where(:is(body.dark-mode section article.proj .popins > div[popover] .popin-content .content-details .images)) {
  background-color: #FFF;
}
@media screen and (max-width: 600px) {
  section article.proj .popins > div[popover] .popin-content .content-details .images {
    width: 100%;
    height: auto;
    max-height: 25dvh;
    flex-direction: row;
    box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.2);
  }
}
section article.proj .popins > div[popover] .popin-content .content-details .images img {
  width: auto;
  height: auto;
  max-width: 100%;
}
@media screen and (max-width: 600px) {
  section article.proj .popins > div[popover] .popin-content .content-details .images img {
    max-width: 85%;
  }
}
section article.proj .popins > div[popover] .popin-content .content-details p {
  padding-top: 1rem;
  line-height: 1.3;
  color: var(--secondary);
}
section article.proj .popins > div[popover] .popin-content .content-details p:where(:is(body.text-big section article.proj .popins > div[popover] .popin-content .content-details p)) {
  font-size: 1.15rem;
}
section article.proj .popins > div[popover] .popin-content .content-details p:where(:is(body.text-max section article.proj .popins > div[popover] .popin-content .content-details p)) {
  font-size: 1.3rem;
}
@media screen and (max-width: 600px) {
  section article.proj .popins > div[popover] .popin-content .content-details p {
    font-size: 0.875rem;
    line-height: 1.15;
  }
  section article.proj .popins > div[popover] .popin-content .content-details p::before {
    content: "<<  Faites défiler les images  >>";
    display: block;
    font-style: italic;
    color: var(--tertiary);
    justify-self: center;
    margin-bottom: 1.5rem;
  }
}
@media screen and (min-width: 601px) {
  section article.methodo::after {
    content: "";
    display: block;
    width: 10px;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
    opacity: 0.1;
    position: absolute;
    top: 0;
    right: 0;
    transition: opacity 1s 1.5s;
  }
  @starting-style {
    section article.methodo::after {
      opacity: 0;
    }
  }
}
section article.methodo > [class$=-container] {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scrollbar-color: #A97E77 rgba(169, 126, 119, 0.05);
}
section article.methodo > [class$=-container] > [class$=-list] {
  width: max-content;
  padding-top: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 2rem;
  display: grid;
  grid-auto-flow: column;
  overflow-x: auto;
}
section article.methodo > [class$=-container] > [class$=-list] > div {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 0.5rem;
  position: relative;
}
section article.methodo > label svg .meth-lab-top {
  animation: appear 6s infinite;
}
section article.methodo > label svg .meth-lab-mid {
  animation: appear 6s 0.1s infinite;
}
section article.methodo > label svg .meth-lab-bot {
  animation: appear 6s 0.2s infinite;
}
@keyframes appear {
  0%, 75% {
    opacity: 1;
    translate: 0;
  }
  79% {
    opacity: 0;
    translate: 0;
  }
  80% {
    opacity: 0;
    translate: 0 10px;
  }
  100% {
    opacity: 1;
    translate: 0;
  }
}
section article.methodo .methodo-container {
  font-size: 0.85rem;
}
section article.methodo .methodo-container:where(:is(body.text-big section article.methodo .methodo-container)) {
  font-size: 1rem;
}
section article.methodo .methodo-container:where(:is(body.text-max section article.methodo .methodo-container)) {
  font-size: 1.2rem;
}
section article.methodo .methodo-container .methodo-list {
  grid-template-columns: repeat(4, minmax(250px, 450px));
  grid-template-rows: repeat(3, min-content);
  gap: 6rem;
}
@media screen and (max-width: 600px) {
  section article.methodo .methodo-container .methodo-list {
    grid-template-columns: repeat(4, minmax(250px, 85dvw));
  }
}
section article.methodo .methodo-container .methodo-list > div h3 {
  font-family: "Gloock", sans-serif;
  font-size: 1.25rem;
  color: var(--secondary);
}
section article.methodo .methodo-container .methodo-list > div h3:where(:is(body.text-big section article.methodo .methodo-container .methodo-list > div h3)) {
  font-size: 1.5rem;
}
section article.methodo .methodo-container .methodo-list > div h3:where(:is(body.text-max section article.methodo .methodo-container .methodo-list > div h3)) {
  font-size: 1.75rem;
}
section article.methodo .methodo-container .methodo-list > div .tools-details {
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 1rem;
  background-color: rgba(var(--tertiary_rgb), 0.1);
  margin-top: 1rem;
}
@media screen and (max-width: 600px) {
  section article.methodo .methodo-container .methodo-list > div .tools-details {
    font-size: 0.8rem;
  }
}
section article.methodo .methodo-container .methodo-list > div .tools-details .tool-icons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
}
section article.methodo .methodo-container .methodo-list > div .tools-details .tool-icons img {
  height: 35px;
}
section article.methodo .methodo-container .methodo-list > div:where(:not(:last-child))::after {
  content: url("../assets/meth-arrow.svg");
  display: block;
  width: 40px;
  position: absolute;
  top: 0;
  right: 0;
  translate: calc(50% + 3rem) 0;
}
@media screen and (min-width: 601px) {
  section article.exp::after {
    content: "";
    display: block;
    width: 10px;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
    opacity: 0.1;
    position: absolute;
    top: 0;
    right: 0;
    transition: opacity 1s 1.5s;
  }
  @starting-style {
    section article.exp::after {
      opacity: 0;
    }
  }
}
section article.exp > [class$=-container] {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scrollbar-color: #A97E77 rgba(169, 126, 119, 0.05);
}
section article.exp > [class$=-container] > [class$=-list] {
  width: max-content;
  padding-top: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 2rem;
  display: grid;
  grid-auto-flow: column;
  overflow-x: auto;
}
section article.exp > [class$=-container] > [class$=-list] > div {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 0.5rem;
  position: relative;
}
section article.exp > label svg {
  transform-origin: center center;
  animation: shaking 6s infinite;
}
section article.exp > label svg .exp-lab-handle {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: hiding 6s infinite;
}
section article.exp > label svg .exp-lab-line {
  transform-box: fill-box;
  transform-origin: center center;
  animation: shrinking 6s infinite;
}
@keyframes shaking {
  0%, 44%, 56%, 100% {
    rotate: 0deg;
  }
  45% {
    rotate: -4deg;
  }
  47% {
    rotate: 4deg;
  }
  49% {
    rotate: -4deg;
  }
  51% {
    rotate: 4deg;
  }
  53% {
    rotate: -4deg;
  }
  55% {
    rotate: 4deg;
  }
}
@keyframes hiding {
  0%, 40%, 60%, 100% {
    translate: 0;
  }
  50% {
    translate: 0 100%;
  }
}
@keyframes shrinking {
  0%, 40%, 45%, 55%, 100% {
    scale: 1 1;
  }
  50% {
    scale: 0 1;
  }
}
section article.exp .exp-list-container .exp-list {
  grid-template-columns: repeat(5, minmax(250px, 380px));
  grid-template-rows: repeat(3, min-content);
  gap: 2rem;
}
section article.exp .exp-list-container .exp-list:where(:is(body.text-big section article.exp .exp-list-container .exp-list)), section article.exp .exp-list-container .exp-list:where(:is(body.text-max section article.exp .exp-list-container .exp-list)) {
  grid-template-columns: repeat(5, minmax(250px, 450px));
}
@media screen and (max-width: 600px) {
  section article.exp .exp-list-container .exp-list {
    padding-top: 0.5rem;
    padding-bottom: 1.5rem;
    gap: 1.5rem;
    overflow: hidden;
    grid-template-columns: repeat(5, minmax(250px, 80dvw));
  }
}
section article.exp .exp-list-container .exp-list > div {
  padding: 2.5rem;
  background-color: rgba(255, 255, 255, 0.85);
  border: 1px solid transparent;
  box-shadow: 0 20px 25px -10px rgba(var(--secondary_rgb), 0.1);
  transition: border-color 0.3s, background-color 0.3s;
}
section article.exp .exp-list-container .exp-list > div::before {
  content: url("../assets/scotch.svg");
  width: 60px;
  position: absolute;
  top: 0;
  left: 0;
  translate: 15px -15px;
  rotate: -30deg;
  opacity: 0.7;
  transition: opacity 0.3s;
}
section article.exp .exp-list-container .exp-list > div:where(:is(body.dark-mode section article.exp .exp-list-container .exp-list > div)) {
  background-color: transparent;
  border-color: rgba(var(--tertiary_rgb), 0.5);
}
section article.exp .exp-list-container .exp-list > div:where(:is(body.dark-mode section article.exp .exp-list-container .exp-list > div))::before {
  opacity: 0.1;
}
@media screen and (max-width: 600px) {
  section article.exp .exp-list-container .exp-list > div {
    padding: 1.5rem 2rem;
  }
}
section article.exp .exp-list-container .exp-list > div > .exp-logo {
  width: auto;
  height: auto;
  max-height: 1.75rem;
  position: absolute;
  top: 0;
  right: 0;
  translate: -1rem 1rem;
  transition: opacity 0.3s;
}
section article.exp .exp-list-container .exp-list > div > .exp-logo:where(:is(body.dark-mode section article.exp .exp-list-container .exp-list > div > .exp-logo)) {
  opacity: 0;
}
@media screen and (max-width: 600px) {
  section article.exp .exp-list-container .exp-list > div > .exp-logo {
    translate: -1rem 1.25rem;
  }
}
section article.exp .exp-list-container .exp-list > div > label {
  font-family: "Afacad";
  font-size: 1.25rem;
  color: var(--main);
  position: relative;
}
section article.exp .exp-list-container .exp-list > div > label:where(:is(body.text-big section article.exp .exp-list-container .exp-list > div > label)) {
  font-size: 1.5rem;
}
section article.exp .exp-list-container .exp-list > div > label:where(:is(body.text-max section article.exp .exp-list-container .exp-list > div > label)) {
  font-size: 1.75rem;
}
@media screen and (max-width: 600px) {
  section article.exp .exp-list-container .exp-list > div > label {
    width: calc(100% - 25px);
    font-size: 1.15rem;
    line-height: 1.25;
  }
}
section article.exp .exp-list-container .exp-list > div > label > span {
  font-weight: 700;
}
section article.exp .exp-list-container .exp-list > div > span {
  font-family: "Afacad";
  font-weight: 500;
}
section article.exp .exp-list-container .exp-list > div > span:where(:is(body.text-big section article.exp .exp-list-container .exp-list > div > span)) {
  font-size: 1.15rem;
}
section article.exp .exp-list-container .exp-list > div > span:where(:is(body.text-max section article.exp .exp-list-container .exp-list > div > span)) {
  font-size: 1.3rem;
}
section article.exp .exp-list-container .exp-list > div > .paragraph {
  width: 100%;
  max-height: calc(100vh - 360px);
  padding-right: 1rem;
  font-size: 0.875rem;
  overflow-y: auto;
  scrollbar-color: rgba(var(--secondary_rgb), 0.2) rgba(var(--main_rgb), 0.02);
  transition: color 0.3s;
}
section article.exp .exp-list-container .exp-list > div > .paragraph:where(:is(body.text-big section article.exp .exp-list-container .exp-list > div > .paragraph)) {
  font-size: 1rem;
}
section article.exp .exp-list-container .exp-list > div > .paragraph:where(:is(body.text-max section article.exp .exp-list-container .exp-list > div > .paragraph)) {
  font-size: 1.15rem;
}
section article.exp .exp-list-container .exp-list > div > .paragraph:where(:is(body.dark-mode section article.exp .exp-list-container .exp-list > div > .paragraph)) {
  color: var(--tertiary);
}
@media screen and (max-width: 600px) {
  section article.exp .exp-list-container .exp-list > div > .paragraph {
    line-height: 1.2;
  }
}
section article.exp .exp-list-container .exp-list > div > .paragraph > ul {
  padding-left: 0.75rem;
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--tertiary);
  opacity: 0.9;
  transition: color 0.3s, opacity 0.3s;
}
section article.exp .exp-list-container .exp-list > div > .paragraph > ul:where(:is(body.dark-mode section article.exp .exp-list-container .exp-list > div > .paragraph > ul)) {
  color: var(--main);
  opacity: 1;
}
@media screen and (max-width: 1280px) and (min-width: 601px) {
  section article.form::after {
    content: "";
    display: block;
    width: 10px;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
    opacity: 0.1;
    position: absolute;
    top: 0;
    right: 0;
    transition: opacity 1s 1.5s;
  }
  @starting-style {
    section article.form::after {
      opacity: 0;
    }
  }
}
section article.form > label svg .form-lab-center {
  transform-box: fill-box;
  transform-origin: left bottom;
  animation: launch-center 5s infinite;
}
section article.form > label svg .form-lab-left {
  transform-box: fill-box;
  transform-origin: left bottom;
  animation: launch-left 5s infinite;
}
section article.form > label svg .form-lab-right {
  transform-box: fill-box;
  transform-origin: left bottom;
  animation: launch-right 5s infinite;
}
@keyframes launch-center {
  0%, 40% {
    scale: 1;
    opacity: 1;
  }
  50% {
    scale: 1;
    opacity: 0;
  }
  51% {
    scale: 0;
    opacity: 0;
  }
  62%, 75% {
    scale: 1;
    opacity: 1;
  }
}
@keyframes launch-left {
  0%, 40% {
    scale: 1;
    opacity: 1;
  }
  50% {
    scale: 1;
    opacity: 0;
  }
  51%, 55% {
    scale: 0;
    opacity: 0;
  }
  65%, 100% {
    scale: 1;
    opacity: 1;
  }
}
@keyframes launch-right {
  0%, 40% {
    scale: 1;
    opacity: 1;
  }
  50% {
    scale: 1;
    opacity: 0;
  }
  51%, 58% {
    scale: 0;
    opacity: 0;
  }
  65%, 100% {
    scale: 1;
    opacity: 1;
  }
}
section article.form .form-list-container {
  width: 100%;
  height: max-content;
  overflow-x: auto;
  scrollbar-color: var(--tertiary) rgba(var(--tertiary_rgb), 0.05);
}
@media screen and (max-width: 1280px) {
  section article.form .form-list-container {
    height: 100%;
    padding-bottom: 3rem;
    box-sizing: border-box;
  }
}
section article.form .form-list-container .form-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
}
@media screen and (max-width: 600px) {
  section article.form .form-list-container .form-list {
    padding-right: 1.5rem;
  }
}
section article.form .form-list-container .form-list > div {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media screen and (max-width: 600px) {
  section article.form .form-list-container .form-list > div {
    max-width: 70dvw;
  }
}
section article.form .form-list-container .form-list > div > label {
  width: fit-content;
  padding: 0 0.5rem;
  background-color: var(--main);
  font-family: "Afacad";
  color: #fff;
}
section article.form .form-list-container .form-list > div > label:where(:is(body.text-big section article.form .form-list-container .form-list > div > label)) {
  font-size: 1.15rem;
}
section article.form .form-list-container .form-list > div > label:where(:is(body.text-max section article.form .form-list-container .form-list > div > label)) {
  font-size: 1.3rem;
}
section article.form .form-list-container .form-list > div > span {
  font-family: "Afacad";
  font-size: 0.875rem;
  font-weight: 600;
}
section article.form .form-list-container .form-list > div > span:where(:is(body.text-big section article.form .form-list-container .form-list > div > span)) {
  font-size: 1rem;
}
section article.form .form-list-container .form-list > div > span:where(:is(body.text-max section article.form .form-list-container .form-list > div > span)) {
  font-size: 1.15rem;
}
section article.form .form-list-container .form-list > div > p {
  max-width: 500px;
  font-size: 0.875rem;
}
section article.form .form-list-container .form-list > div > p:where(:is(body.text-big section article.form .form-list-container .form-list > div > p)) {
  font-size: 1rem;
}
section article.form .form-list-container .form-list > div > p:where(:is(body.text-max section article.form .form-list-container .form-list > div > p)) {
  font-size: 1.15rem;
}
@media screen and (max-width: 1280px) {
  section article.form .form-list-container .form-list > div > p {
    font-size: 1rem;
    line-height: 1.5;
  }
  section article.form .form-list-container .form-list > div > p:where(:is(body.text-big section article.form .form-list-container .form-list > div > p)) {
    font-size: 1.15rem;
  }
  section article.form .form-list-container .form-list > div > p:where(:is(body.text-max section article.form .form-list-container .form-list > div > p)) {
    font-size: 1.3rem;
  }
}
@media screen and (max-width: 600px) {
  section article.form .form-list-container .form-list > div > p {
    font-size: 0.875rem;
  }
}
section article.form .form-list-container .form-list > div > .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
}
section article.form .form-list-container .form-list > div > .tags > span {
  font-size: 0.74rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--secondary);
}
section article.form .form-list-container .form-list > div > .tags > span:where(:is(body.text-big section article.form .form-list-container .form-list > div > .tags > span)) {
  font-size: 0.9rem;
}
section article.form .form-list-container .form-list > div > .tags > span:where(:is(body.text-max section article.form .form-list-container .form-list > div > .tags > span)) {
  font-size: 1rem;
}
@media screen and (max-width: 1280px) {
  section article.form .form-list-container .form-list {
    width: max-content;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}
section article.contact > label svg .contact-lab-dot {
  stroke-dasharray: 0 130;
  stroke-dashoffset: 72;
  stroke-linecap: round;
  animation: lap2 5s cubic-bezier(0.41, 0.73, 0.47, 0.74) infinite;
}
@keyframes lap {
  0%, 80% {
    stroke-dashoffset: 72;
  }
  100% {
    stroke-dashoffset: -58;
  }
}
@keyframes lap2 {
  0%, 80% {
    stroke-dasharray: 0 130;
    stroke-dashoffset: 72;
  }
  90% {
    stroke-dasharray: 130 0;
    stroke-dashoffset: 72;
  }
  100% {
    stroke-dasharray: 0 130;
    stroke-dashoffset: -58;
  }
}
section article.contact .main-content {
  height: calc(100% - 3rem);
  display: flex;
  gap: 2rem;
}
@media screen and (max-width: 960px) {
  section article.contact .main-content {
    flex-direction: column;
    gap: 1rem;
  }
}
@media screen and (max-width: 600px) {
  section article.contact .main-content {
    width: calc(100% - 1rem);
  }
}
section article.contact .main-content .contact-content {
  box-sizing: border-box;
  width: clamp(500px, 50%, 700px);
  padding: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  background-color: #fff;
  border-radius: 2rem;
  box-shadow: 0 5px 40px -20px rgba(var(--secondary_rgb), 0.3);
}
section article.contact .main-content .contact-content:where(:is(body.dark-mode section article.contact .main-content .contact-content)) {
  background-color: rgba(var(--tertiary_rgb), 0.2);
  box-shadow: none;
}
@media screen and (max-width: 960px) {
  section article.contact .main-content .contact-content {
    width: 100%;
    padding: 2rem;
  }
}
@media screen and (max-width: 600px) {
  section article.contact .main-content .contact-content {
    gap: 1.25rem;
  }
}
section article.contact .main-content .contact-content svg {
  width: 80px;
}
section article.contact .main-content .contact-content svg #bubble1 {
  transform-origin: 42% 42%;
  animation: rotating 6s 0.15s infinite;
}
section article.contact .main-content .contact-content svg #bubble1:where(:is(body.dark-mode section article.contact .main-content .contact-content svg #bubble1)) {
  stroke: #FFF;
}
section article.contact .main-content .contact-content svg #bubble2 {
  animation: translating 6s infinite;
}
section article.contact .main-content .contact-content svg #oval1 {
  animation: appearance 3s infinite;
}
section article.contact .main-content .contact-content svg #oval2 {
  animation: appearance 3s 0.1s infinite;
}
section article.contact .main-content .contact-content svg #oval3 {
  animation: appearance 3s 0.2s infinite;
}
section article.contact .main-content .contact-content svg #white-oval:where(:is(body.dark-mode section article.contact .main-content .contact-content svg #white-oval)) {
  fill: #473936;
}
@keyframes rotating {
  0%, 90% {
    rotate: 0deg;
  }
  95% {
    rotate: 10deg;
  }
  100% {
    rotate: 0deg;
  }
}
@keyframes translating {
  0%, 90% {
    translate: 0;
  }
  95% {
    translate: -2px -2px;
  }
  100% {
    translate: 0;
  }
}
@keyframes appearance {
  0%, 70% {
    translate: 0;
    opacity: 1;
  }
  80% {
    translate: 0;
    opacity: 0;
  }
  81% {
    translate: 0 -3px;
    opacity: 0;
  }
  100% {
    translate: 0 0;
    opacity: 1;
  }
}
section article.contact .main-content .contact-content p {
  max-width: 400px;
}
section article.contact .main-content .contact-content p:where(:is(body.text-big section article.contact .main-content .contact-content p)) {
  font-size: 1.15rem;
}
section article.contact .main-content .contact-content p:where(:is(body.text-max section article.contact .main-content .contact-content p)) {
  font-size: 1.3rem;
}
@media screen and (max-width: 600px) {
  section article.contact .main-content .contact-content p {
    font-size: 0.875rem;
  }
}
section article.contact .main-content .contact-content .social-network-links {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}
section article.contact .main-content .contact-content .social-network-links .dribbble-link img {
  height: 18px;
  filter: contrast(7) saturate(0);
  transition: filter 0.5s;
}
section article.contact .main-content .contact-content .social-network-links .dribbble-link img:where(:is(body.dark-mode section article.contact .main-content .contact-content .social-network-links .dribbble-link img)) {
  filter: contrast(0) brightness(1.5);
}
section article.contact .main-content .contact-content .social-network-links .dribbble-link:hover img {
  filter: none;
}
section article.contact .main-content .contact-content .social-network-links .linkedin-link img {
  height: 18px;
  filter: contrast(1.5) saturate(0);
  transition: filter 0.5s;
}
section article.contact .main-content .contact-content .social-network-links .linkedin-link img:where(:is(body.dark-mode section article.contact .main-content .contact-content .social-network-links .linkedin-link img)) {
  filter: contrast(0) brightness(1.5);
}
section article.contact .main-content .contact-content .social-network-links .linkedin-link:hover img {
  filter: none;
}
section article.contact .main-content .contact-content .email,
section article.contact .main-content .contact-content .telephone {
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background-color: var(--background);
  border-radius: 1rem;
  border: 1px solid rgba(var(--secondary_rgb), 0.1);
}
section article.contact .main-content .contact-content .email a,
section article.contact .main-content .contact-content .telephone a {
  display: block;
  text-decoration: none;
  font-family: "Afacad";
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--main);
}
section article.contact .main-content .contact-content .email a:where(:is(body.text-big section article.contact .main-content .contact-content .email a,
body.text-big section article.contact .main-content .contact-content .telephone a)),
section article.contact .main-content .contact-content .telephone a:where(:is(body.text-big section article.contact .main-content .contact-content .email a,
body.text-big section article.contact .main-content .contact-content .telephone a)) {
  font-size: 1.5rem;
}
section article.contact .main-content .contact-content .email a:where(:is(body.text-max section article.contact .main-content .contact-content .email a,
body.text-max section article.contact .main-content .contact-content .telephone a)),
section article.contact .main-content .contact-content .telephone a:where(:is(body.text-max section article.contact .main-content .contact-content .email a,
body.text-max section article.contact .main-content .contact-content .telephone a)) {
  font-size: 1.75rem;
}
section article.contact .main-content .contact-content .email a::selection,
section article.contact .main-content .contact-content .telephone a::selection {
  background: var(--secondary);
  color: #fff;
}
section article.contact .main-content .contact-content .email a:hover,
section article.contact .main-content .contact-content .telephone a:hover {
  text-decoration: underline;
}
section article.contact .main-content .contact-content .email .copy-text,
section article.contact .main-content .contact-content .telephone .copy-text {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
section article.contact .main-content .contact-content .email .copy-text::before,
section article.contact .main-content .contact-content .telephone .copy-text::before {
  content: "";
  display: block;
  width: calc(100% + 16px);
  aspect-ratio: 1/1;
  border-radius: 99px;
  position: absolute;
  left: -8px;
  top: -8px;
  transition: background-color 0.3s;
}
section article.contact .main-content .contact-content .email .copy-text img,
section article.contact .main-content .contact-content .telephone .copy-text img {
  width: 15px;
  transition: opacity 0.3s, filter 0.3s;
}
section article.contact .main-content .contact-content .email .copy-text img:where(:is(body.dark-mode section article.contact .main-content .contact-content .email .copy-text img,
body.dark-mode section article.contact .main-content .contact-content .telephone .copy-text img)),
section article.contact .main-content .contact-content .telephone .copy-text img:where(:is(body.dark-mode section article.contact .main-content .contact-content .email .copy-text img,
body.dark-mode section article.contact .main-content .contact-content .telephone .copy-text img)) {
  filter: invert(1);
}
section article.contact .main-content .contact-content .email .copy-text::after,
section article.contact .main-content .contact-content .telephone .copy-text::after {
  content: url("../assets/check.svg");
  display: block;
  width: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
}
section article.contact .main-content .contact-content .email .copy-text:where(:not(.copied)),
section article.contact .main-content .contact-content .telephone .copy-text:where(:not(.copied)) {
  cursor: pointer;
}
section article.contact .main-content .contact-content .email .copy-text:hover:where(:not(.copied))::before,
section article.contact .main-content .contact-content .telephone .copy-text:hover:where(:not(.copied))::before {
  background-color: rgba(var(--secondary_rgb), 0.1);
}
section article.contact .main-content .contact-content .email .copy-text:focus,
section article.contact .main-content .contact-content .telephone .copy-text:focus {
  outline: 1px auto;
}
section article.contact .main-content .contact-content .email .copy-text.copied::before,
section article.contact .main-content .contact-content .telephone .copy-text.copied::before {
  background-color: rgba(36, 179, 83, 0.1);
}
section article.contact .main-content .contact-content .email .copy-text.copied img,
section article.contact .main-content .contact-content .telephone .copy-text.copied img {
  opacity: 0;
}
section article.contact .main-content .contact-content .email .copy-text.copied::after,
section article.contact .main-content .contact-content .telephone .copy-text.copied::after {
  visibility: visible;
  opacity: 1;
}
section article.contact .main-content .cv-content {
  padding: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 960px) {
  section article.contact .main-content .cv-content {
    padding: 1rem;
  }
}
section article.contact .main-content .cv-content a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: inherit;
  text-decoration: none;
  font-family: "Afacad";
}
section article.contact .main-content .cv-content a img {
  max-width: 250px;
}
@media screen and (max-width: 960px) {
  section article.contact .main-content .cv-content a img {
    display: none;
  }
}
section article.contact .main-content .cv-content a > span {
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background-color: var(--main);
  color: #fff;
  border-radius: 0.75rem;
  overflow: hidden;
  transition: box-shadow 0.3s, scale 0.3s;
}
section article.contact .main-content .cv-content a > span:where(:is(body.text-big section article.contact .main-content .cv-content a > span)) {
  font-size: 1.15rem;
}
section article.contact .main-content .cv-content a > span:where(:is(body.text-max section article.contact .main-content .cv-content a > span)) {
  font-size: 1.3rem;
}
section article.contact .main-content .cv-content a > span::before {
  content: "➜";
  display: flex;
  rotate: 90deg;
}
@keyframes translation {
  0% {
    translate: 0;
  }
  50% {
    translate: 0 25px;
  }
  51% {
    translate: 0 -25px;
  }
  100% {
    translate: 0;
  }
}
section article.contact .main-content .cv-content a:hover > span {
  scale: 1.05;
  box-shadow: 0 5px 20px -10px rgba(var(--secondary_rgb), 0.5);
}
section article.contact .main-content .cv-content a:hover > span::before {
  animation: translation 0.6s;
}

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