:root {
  --blackColor: #000000;
  --blackColorRgb: 0, 0, 0;
  --primaryColor: #ffffff;
  --primaryColorRgb: 255, 255, 255;
  --secondaryColor: #141b1f;
  --secondaryColorRgb: 20, 27, 31;
  --tertiaryColor: #1e8ee9;
  --tertiaryColorRgb: 30, 142, 233;
  --quaternaryColor: #a3df23;
  --quaternaryColorRgb: 163, 223, 35;
  --quinticColor: #ee581d;
  --quinticColorRgb: 238, 88, 29;
  --primaryColorTheme: var(--primaryColor);
  --primaryColorRgbTheme: var(--primaryColorRgb);
  --secondaryColorTheme: var(--secondaryColor);
  --secondaryColorRgbTheme: var(--secondaryColorRgb);
  --tertiaryColorTheme: var(--tertiaryColor);
  --tertiaryColorRgbTheme: var(--tertiaryColorRgb);
  --quaternaryColorTheme: var(--quaternaryColor);
  --quaternaryColorRgbTheme: var(--quaternaryColorRgb);
  --quinticColorTheme: var(--quinticColor);
  --quinticColorRgbTheme: var(--quinticColorRgb);

  --headingFont: "Raleway";
  --specialTextFont: "Raleway";
  --paragraphFont: "Merriweather";

  --primaryHeadingColor: #1e8ee9;
  --secondaryHeadingColor: #141b1f;
  --tertiaryHeadingColor: #ffffff;
  --primaryHeadingColorTheme: var(--primaryHeadingColor);
  --secondaryHeadingColorTheme: var(--secondaryHeadingColor);
  --tertiaryHeadingColorTheme: var(--tertiaryHeadingColor);

  --primaryParagraphColor: #141b1f;
  --secondaryParagraphColor: #ffffff;
  --primaryParagraphColorTheme: var(--primaryParagraphColor);
  --secondaryParagraphColorTheme: var(--secondaryParagraphColor);

  --megaFontSize: 4.5vw;
  --superheadingFontSize: 4vw;
  --headingFontSize: 2vw;
  --subheadingFontSize: 1.4vw;
  --paragraphFontSize: 1.2vw;
  --subparagraphFontSize: 1vw;

  --darkOpacity: 0;
  --lightOpacity: 1;
}

[data-theme="dark"] {
  --primaryColorTheme: #141b1f;
  --primaryColorRgbTheme: 20, 27, 31;
  --secondaryColorTheme: #afafaf;
  --secondaryColorRgbTheme: 175, 175, 175;
  --tertiaryColorTheme: #1e8ee9;
  --tertiaryColorRgbTheme: 30, 142, 233;

  --primaryHeadingColorTheme: #1e8ee9;
  --secondaryHeadingColorTheme: #ffffff;
  --tertiaryHeadingColorTheme: #141b1f;

  --primaryParagraphColorTheme: #ffffff;
  --secondaryParagraphColorTheme: #141b1f;

  --darkOpacity: 1;
  --lightOpacity: 0;
}

body,
html {
  width: 100vw;
  height: max-content;
  padding: 0;
  margin: 0;
  position: relative;
  scroll-behavior: smooth;
  background-color: var(--secondaryColorTheme);
  overflow-x: hidden;
}

button, 
input[type="submit"],
input[type="checkbox"]{
  cursor: pointer;
}

.link, a {
  text-decoration: none;
  color: inherit;
  margin: 0;
}

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: space-between;
}

.divisor-line {
  width: 70%;
  border: 0.1vw solid var(--secondaryHeadingColorTheme);
  margin: 0;
  animation-timing-function: ease-in-out;
  background-color: var(--secondaryHeadingColorTheme);
}

.page-wrapper{
  padding: 3vw;
  box-sizing: border-box;
  box-shadow: 0 0 4vw 0 rgba(var(--secondaryColorRgbTheme), 0.25);
}

.span-zhero {
  color: var(--tertiaryHeadingColor);
  font-weight: 900;
  letter-spacing: -1vw;
  margin: 0;
  text-shadow: none;
  background-color: var(--tertiaryColor);
  padding: 0 2vw;
  padding-right: 3vw;
}

.span-zhero-blue {
  color: var(--primaryHeadingColorTheme);
  font-weight: 900;
  text-shadow: 0 0 0.4vw #00000020;
}

.selected-menu-item{
  color: var(--tertiaryColor) !important;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.hidden-menu-interface{
  visibility: hidden;
}

.dark {
  opacity: var(--darkOpacity);
  transition: opacity 0.2s ease-in-out;
}

.light {
  opacity: var(--lightOpacity);
  transition: opacity 0.2s ease-in-out;
}

.wobble{
  position: relative;
  top: 0;
  left: 0;
  animation: wobble 20s 0s infinite;
  animation-timing-function: ease-in-out;
}

.parallax{
  width: 100%;
  height: auto;
}

img {
  image-rendering: crisp-edges;
}

b{
  font-weight: 800;
}

::selection{
  background-color: var(--tertiaryColorTheme);
  color: var(--secondaryHeadingColor);
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--primaryColorTheme);
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--secondaryColorRgb), 0.6);
  border-radius: 0.2vw;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--secondaryColorTheme);
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--secondaryColorRgbTheme), 0.8);
}

input[type="checkbox"] {
  appearance: none;
  background-color: #fff;
  margin: 0;
  margin-right: 0.5vw;
  font: inherit;
  width: 0.3vw;
  height: 0.3vw;
  border-radius: 0.2vw;
  display: grid;
  place-content: center;
}

input.orange-checkbox[type="checkbox"]{
  color: var(--quinticColor);
  border: 0.15vw solid var(--quinticColor) !important;
}

input.orange-checkbox[type="checkbox"]::before{
  background-color: var(--quinticColor) !important;
}

input.blue-checkbox[type="checkbox"]{
  color: var(--tertiaryColor);
  border: 0.15vw solid var(--tertiaryColor) !important;
}

input.blue-checkbox[type="checkbox"]::before{
  background-color: var(--tertiaryColor) !important;
}

input.theme-checkbox[type="checkbox"]{
  color: var(--secondaryColorTheme);
  border: 0.15vw solid var(--secondaryColorTheme) !important;
}

input.theme-checkbox[type="checkbox"]::before{
  background-color: var(--secondaryColorTheme) !important;
}

input[type="checkbox"]::before {
  content: "";
  width: 0.85vw;
  height: 0.85vw;
  opacity: 0;
  transition: 120ms transform ease-in-out;
  transform-origin: bottom left;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  background-color: var(--tertiaryColor);
  color: var(--secondaryColorTheme);
}

input[type="checkbox"]:checked::before {
  opacity: 1;
}

@media(max-width: 672px){
  :root{
    --superheadingFontSize: 10vw;
    --headingFontSize: 6vw;
    --subheadingFontSize: 4.6vw;
    --paragraphFontSize: 4vw;
    --subparagraphFontSize: 3.5vw;
  }

  input[type="checkbox"] {
    margin-right: 1.2vw;
    padding: 0.25vw !important;
    width: 3vw !important;
    height: 3vw !important;
    border: 0.35vw solid var(--quinticColor) !important;
    border-radius: 0.4vw;
  }

  input[type="checkbox"]::before {
    content: "";
    width: 1.45vw;
    height: 1.45vw;
    opacity: 0;
    transition: 120ms transform ease-in-out;
    transform-origin: bottom left;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    background-color: var(--tertiaryColor);
    color: var(--secondaryColorTheme);
  }


  .divisor-line {
    width: 70%;
    border: 0.2vw solid var(--secondaryHeadingColorTheme);
  }

  .page-wrapper{
    padding: 6vw;
    box-shadow: 0 0 8vw 0 rgba(var(--secondaryColorRgbTheme), 0.25);
  }

  .span-zhero {
    letter-spacing: -2vw;
    padding: 0 4vw;
    padding-right: 6vw;
  }

  .span-zhero-blue {
    text-shadow: 0 0 0.8vw #00000020;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 0.4vw;
  }

  input[type="checkbox"] {
    margin-right: 1vw;
    width: 0.6vw;
    height: 0.6vw;
    border-radius: 0.4vw;
  }

  input.orange-checkbox[type="checkbox"]{
    border: 0.3vw solid var(--quinticColor) !important;
  }

  input.blue-checkbox[type="checkbox"]{
    border: 0.3vw solid var(--tertiaryColor) !important;
  }

  input.theme-checkbox[type="checkbox"]{
    border: 0.3vw solid var(--secondaryColorTheme) !important;
  }

  input[type="checkbox"]::before {
    width: 1.7vw;
    height: 1.7vw;
  }
}