:root {
  font-size: 62.5%;
  --background: rgb(17, 17, 17);
  --bg-opaque: rgb(17, 17, 17, 0.25);
  --background-light: rgb(35, 35, 35);
  --background-dark: rgb(8, 8, 8);
  --text: rgb(235, 236, 243);
  --brand: #be63f9;
  --text-xs: 1.6rem;
  --text-sm: 1.8rem;
  --text-md: 2.2rem;
  --text-lg: 3.6rem;
  --text-xl: 5.6rem;
  --text-2xl: 9.6rem;
}

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

*::selection {
  background: var(--brand);
  color: rgb(235, 236, 243);
}

html,
body {
  max-width: 100%;
  scroll-behavior: auto;
  font-size: var(--text-sm);
}

body {
  color: var(--text);
  background: var(--background);
  /* TransitionLink animation */
  transition-property: opacity, transform, filter, background;
  transition-timing-function: ease-in-out;
  transition-duration: 500ms;
}
/* For "TransitionLink" animation */
.page-transition {
  opacity: 0;
  background: black;
  transform: translateY(40px);
  filter: blur(12px);
}

a {
  color: inherit;
  text-decoration: none;
}

li {
  list-style: none;
}

button,
input[type="submit"],
input[type="reset"] {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

.section-wrapper {
  position: relative;
  z-index: 10;
  max-width: 1150px;
  margin: auto;
  padding: 9.6rem;
  overflow: hidden;
}
@media (max-width: 768px) {
  .section-wrapper {
    padding: 7rem 3rem;
  }
}
@media (max-width: 480px) {
  .section-wrapper {
    max-width: 360px;
    padding: 3rem 1.5rem;
    font-size: var(--text-xs);
  }
}
 @media (max-width: 310px) {
  .section-wrapper {
    max-width: 270px;
  }
} 

/* Stats -> Exp + Certif */
.chip {
  cursor: default;
  font-size: var(--text-xs);
  background: var(--background-light);
  padding: 0.2rem 0.8rem;
  border-radius: 999px;

  opacity: 0.6;
  transition: 0.2s;
}
.chip:hover {
  opacity: 1;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background-color: var(--background-dark);
}
::-webkit-scrollbar-thumb {
  background-color: var(--background-light);
  opacity: 0.5;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--brand);
}

/* Modal img loading */
.blur {
  filter: blur(5px);
  transition: filter 0.3s ease-in;
}
 
.remove-blur {
  filter: blur(0px);
  transition: filter 0.3s ease-in;
}

/* Privacy, Legal Notice */
