:root {
  font-size: 16px;
  --color-bg-white: #fff;
  --color-text-black: #000;
  --color-black-translucent-50: rgba(0, 0, 0, 0.5);
  --color-white-translucent-50: rgba(255, 255, 255, 0.5);
  --color-white: #fff;
  --color-black: #000;
  --color-gray: #ccc;
  --color-dark: #202124;
  --color-dark-2: #303136;
  --color-green: #8bf6cf;
  --color-yellow: #fff789;
  --color-red: #ff9494;
  --color-purple: #d6b6ff;
  --color-blue: #5cbeff;
  --background-linear-gradient: linear-gradient(
    90deg,
    #d0abff 0%,
    #82cdff 20%,
    #6ef4d0 30%,
    #fff78d 55%,
    #ff7c7c 85%
  );
  --color-white-translucent: rgba(255, 255, 255, 0.2);
  --color-white-translucent-2: rgba(255, 255, 255, 0.25);
  --color-black-translucent: rgba(0, 0, 0, 0.05);
  --color-black-translucent-2: rgba(0, 0, 0, 0.15);
  --color-theme-translucent: rgb(230 230 230 / 33%);
  --box-shadow: 0 1.8px 3.8px 0 rgb(0 0 0 / 7%), 0 0.3px 0.9px 0 rgb(0 0 0 / 5%);
  --shadow-2: 0px 6px 12px 0px rgba(0, 0, 0, 0.075);
  --shadow-hover: 0 0 2px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.08),
    inset 0 0 0px 5px var(--color-white);
  --opacity: 0.55;
  --font-size: 1rem;
  --font-size-small: 0.85rem;
  --font-size-big: 1.15rem;
  --font-size-3: 1.5rem;
  --font-size-2: 2.5rem;
  --font-size-1: 4rem;
  --radius: 1rem;
  --radius-small: 0.75rem;
  --radius-big: 1.75rem;
  --radius-full: 75rem;
  --size-small: 2.375rem;
  --size-large: 3.25rem;
  --size-big: 3rem;
  --max-size-container: 1200px;
  --max-size-container-2: 800px;
  --transition-hover: hover 0.2s, background 0.2s, opacity 0.2s, box-shadow 0.2s;
  --transition: all 200ms;
}

html[data-theme='dark'] {
  --background-linear-gradient: var(--color-dark);
  --color-theme-translucent: var(--color-dark);
  --color-bg-white: var(--color-dark-2);
  --color-text-black: #fff;
  --color-black-translucent: rgba(255, 255, 255, 0.2);
  --color-black-translucent-50: rgba(255, 255, 255, 0.5);
}

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  outline-color: var(--color-black);
  background: var(--background-linear-gradient);
  transition: var(--transition-hover);
  background-size: 110% 200%;
  animation: gradientAnimation 10s ease infinite;
}
body {
  background: var(--color-theme-translucent);
  transition: var(--transition-hover);
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

a,
button,
h1,
h2,
h3,
p,
textarea,
input,
select,
option {
  font-family: inherit;
  letter-spacing: -0.2px;
  outline-color: var(--color-text-black);
}

a,
button,
h1,
h2,
h3,
input,
select,
option {
  font-weight: bold;
}

ol,
ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

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

button {
  cursor: pointer;
}

/* Transitions */
a,
button {
  transition: var(--transition-hover);
}

p {
  font-size: var(--font-size);
}
h1 {
  font-size: var(--font-size-1);
  line-height: 1.2;
}
h2 {
  font-size: 2rem;
  line-height: 1.2;
}
h3 {
  font-size: 1.5rem;
}

article {
  text-align: left;
  margin: 0 auto;
  max-width: 800px;
  color: var(--color-text-black);
}
article h2 {
  margin: 4rem 0 1.5rem;
}
article ul {
  list-style: disc;
  margin-left: 2rem;
}
article li {
  margin-bottom: 1rem;
}
article hr {
  margin-top: 2rem;
  border: 0;
}

/* Colors Animation */
.colors {
  animation: colorsAnimation 60s ease alternate infinite;
}
@keyframes colorsAnimation {
  0% {
    background: var(--color-green);
  }
  25% {
    background: var(--color-yellow);
  }
  50% {
    background: var(--color-red);
  }
  75% {
    background: var(--color-purple);
  }
  100% {
    background: var(--color-blue);
  }
}
.colorsSvg {
  animation: colorsAnimationSvg 60s ease alternate infinite;
}
@keyframes colorsAnimationSvg {
  0% {
    fill: var(--color-green);
  }
  25% {
    fill: var(--color-yellow);
  }
  50% {
    fill: var(--color-red);
  }
  75% {
    fill: var(--color-purple);
  }
  100% {
    fill: var(--color-blue);
  }
}

::placeholder {
  color: var(--color-text-black);
  opacity: var(--opacity);
}
/* IE 10-11 */
:-ms-input-placeholder {
  color: var(--color-text-black);
  opacity: var(--opacity);
}
/* MS Edge (legacy) */
::-ms-input-placeholder {
  color: var(--color-text-black);
  opacity: var(--opacity);
}

.container {
  max-width: var(--max-size-container);
  margin: 0 auto;
}

.activeLink {
  opacity: 1 !important;
  background: var(--color-bg-white) !important;
  color: var(--color-text-black) !important;
  /* box-shadow: var(--box-shadow) !important; */
}
.activeLink svg {
  color: var(--color-text-black) !important;
}

/* Mobile */
@media screen and (max-width: 940px) {
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.5rem;
  }
}
