@charset "utf-8";
:root{
  font: 16px/1.5 'Times New Roman', system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol;
  --primary: hsl(178, 78%, 13%);
  --secondary: hsl(32, 51%, 62%);
  --tertiary: hsl(34, 20%, 80%);

  --dark: hsl(0, 0%, 3%);
  --light: hsl(0, 0%, 98%);

  --rounded: 290486px;
}

::-webkit-scrollbar{ width: 4px; }
::-webkit-scrollbar-thumb{ width: 3px; border-radius: 3px; background: var(--primary);}
::-webkit-scrollbar-track{ background: transparent;}
::-webkit-scrollbar-corner{ background: transparent;}

*,
*::before,
*::after{ box-sizing: border-box; margin: 0; padding: 0; outline: none;}

html,
body{ width: 100%; overflow-x: hidden; color: var(--dark);}

button,
input,
select,
textarea{ all: unset; font-size: 1rem; border: 1px solid var(--light); border-radius: var(--radius);}

h1,h2,h3,h4,h5,h6{ line-height: 1.75; font-family: 'Times New Roman', system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol;}

h1{ font-size: 2rem;}
h2{ font-size: 1.5rem;}
h3{ font-size: 1.25rem;}
h4{ font-size: 1rem;}
h5{ font-size: .875rem;}
h6{ font-size: .75rem;}

img{ position: relative; all: unset; display: inline-block; vertical-align: middle;}
img::before {  
  position: absolute;
  content: 'ERROR 400';
}

iframe{ all: unset;}

button:focus,
input:focus,
select:focus,
textarea:focus{ border: 1px solid var(--primary);}

a[href]:link,
a[href]:visited,
a[href]:active,
a[href]:focus{ text-decoration: none;}

.loading{ position: fixed; z-index: 9999; top: 0; right: 0; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; width: 100vw; height: 100vh; background: var(--primary);}
.loading:after{ content: 'Loading'; position: absolute; z-index: 0; top: 60%; display: block; font-size: 1vw; text-transform: uppercase; color: var(--light); animation: o 2s infinite linear;}
.loading .itms{ display: flex; justify-content: center; align-items: center; width: 5vw; height: 5vw; margin: 0 1vw; border-radius: 50%; background: var(--light); transform: scale(0);}
.loading .itms i{ font-size: 3vw; color: var(--primary);  }
.loading .itms{ animation: sbo 4s infinite linear;}
.loading .itms:nth-child(2){ animation-delay: .5s;}
.loading .itms:nth-child(3){ animation-delay: 1s;}
.loading .itms:nth-child(4){ animation-delay: 1.5s;}

@keyframes sbo{ 
  0%{ transform: scale(0); filter: blur(50px); opacity: 0;}
  30%,
  75%{ transform: scale(1);filter: blur(0px); opacity: 1;}
  90%,
  100%{ transform: scale(0);filter: blur(50px); opacity: 1;}
}
@keyframes o{ 
  0%{ opacity: 0.1;}
  50%{ opacity: 1;}
  100%{ opacity: 0.1;}
}