:root {
  --color-mass-1: #121416;
  --color-mass-2: #353535;
  --color-details-1: #ffffff;
  --color-details-2: #6db627;
  --color-details-3: #454545;
  --color-details-4: #a567cb;
  --color-details-5: #D2D6DA;
  --color-logo-a: var(--color-details-1);
  --color-logo-b: var(--color-details-2);
  --hover: 0 0 0 9999px rgba(0, 0, 0, 0.2) inset;
  --shadow-95: rgba(0, 0, 0, 0.95);
  --shadow-85: rgba(0, 0, 0, 0.85);
  --shadow-75: rgba(0, 0, 0, 0.75);
  --shadow-55: rgba(0, 0, 0, 0.55);
  --shadow-25: rgba(0, 0, 0, 0.25);
  --blue: #255368;
  --orange: #ad5e08;
  --red: #8d0d08;
  --green: #066430;

  --x-poly-1: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
  --x-poly-2: polygon(20% 0%, 50% 30%, 80% 0%, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0% 80%, 30% 50%, 0% 20%);
  --o-poly-1: polygon(0 0, 0 0, 0 0, 0 100%, 0 100%, 0 100%, 100% 100%, 100% 100%, 100% 100%, 100% 0, 100% 0, 100% 0);
  --o-poly-2: polygon(0 0, 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 100%);

  --global-min-width: 320px;
  --ui-height: 72px;
}

body, html {
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  font-size: 100%;
  color: var(--color-details-1);
  margin: 0;
  padding: 0;
  min-width: var(--global-min-width);
  width: 100vw;
  height: 100vh;
  background-color: var(--color-mass-1);
  overflow-y: auto !important;
}

main {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.body__main {
  box-sizing: border-box;
  min-width: var(--global-min-width);
  flex: 1 0 auto;
  overflow-y: auto;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  gap: 2rem;
}

*::-webkit-scrollbar {
  display: none;
}
  
* {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

a {
  all: unset;
}

.loader {
  height: 5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-details-2);
  animation: load_anim 3s infinite cubic-bezier(0.5, 1, 0.5, 1);
}

.fa-mm {
  fill: var(--color-details-4);
}

@keyframes load_anim {
  00.00% {border-radius: 0;   background: var(--color-details-2) ;clip-path: var(--x-poly-1);}
  00.01% {border-radius: 0;   background: var(--color-details-2) ;clip-path: var(--x-poly-2);}
  25.00% {border-radius: 50%; background: var(--color-details-2) ;clip-path: var(--o-poly-2);}
  25.01% {border-radius: 50%; background: var(--color-details-2) ;clip-path: var(--o-poly-1);}
  50.00% {border-radius: 0;   background: var(--color-details-2) ;clip-path: var(--x-poly-1);}
  50.01% {border-radius: 0;   background: var(--color-details-2) ;clip-path: var(--x-poly-2);}
  75.00% {border-radius: 50%; background: var(--color-details-2) ;clip-path: var(--o-poly-2);}
  75.01% {border-radius: 50%; background: var(--color-details-2) ;clip-path: var(--o-poly-1);}
  100.0% {border-radius: 0;   background: var(--color-details-2) ;clip-path: var(--x-poly-1);}
}

.main_bg {
  background: fixed;
  background-size: cover;
  background-blend-mode: multiply;
  background-attachment: fixed;
  background-position: 50% 50%;
  background-image: url('assets/oxygen_bckg.png');
}

input[type], button {
  filter: none !important;
  border: none !important;
  box-sizing: border-box !important;
  -ms-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
  color: var(--color-details-2);
  border-radius: 0px !important;
  border: 1px solid var(--color-details-3) !important;
  background-color: var(--color-mass-2);
}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 9999px var(--color-mass-2) inset !important;
  -webkit-text-fill-color: var(--color-details-2) !important;
}

input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 9999px color-mix(in lab, var(--color-mass-2) 100%, rgb(0, 0, 0) 20%) inset !important;
  -webkit-text-fill-color: var(--color-details-1) !important;
}

input[type]::placeholder {
  color: color-mix(in lab, var(--color-details-2) 100%, rgb(0, 0, 0) 20%);
}

input[type]:focus, button:focus, input[type]:active, button:active {
  outline: none !important;
  color: var(--color-details-1);
  border: 1px solid var(--color-details-4) !important;
  background-color: color-mix(in lab, var(--color-mass-2) 100%, rgb(0, 0, 0) 20%);
  caret-color: var(--color-details-1);
}

input[type=submit]:focus {
  caret-color: transparent;
}

input[type=submit]:hover, input[type=button]:hover, button:hover {
  cursor: pointer;
  color: var(--color-details-4);
  box-shadow: var(--hover);
}

input[type=checkbox]:focus {
  outline: 1px solid var(--color-details-4) !important;
  caret-color: transparent;
}

input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.oxygen__border {
  border: 2px solid transparent;
  border-image: linear-gradient(
    135deg,
    rgba(109, 182, 39, 0.5),
    rgba(109, 182, 39, 0.2) 30%,
    rgba(109, 182, 39, 0.5) 100%
  ) 1;
}

.oxygen__border:hover {
  border-image: linear-gradient(
    135deg,
    rgba(165, 103, 203, 0.5),
    rgba(165, 103, 203, 0.2) 30%,
    rgba(165, 103, 203, 0.5) 100%
  ) 1;
}

@media only screen and (max-width: 768px) {
  .body__main {
    flex-wrap: wrap;
  }
}

@media only screen and (max-height: 768px) and (max-width: 768px) {
  .body__main {
    align-items: flex-start;
  }
}