@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

html, body, header, main, section, footer {
	margin: 0;
	padding: 0;
	border: none;
	display: block;
}


html, body {
	overflow-x: hidden;
  background-color: var(--color-gray-4);
}



:root {

  --color-green: #A8E62E;
  --color-blue: #2EA8E6;
  --color-yellow: #E6D62E;
  --color-red: #E63D2E;
  --color-pink: #E62EB8;
  --theme-color: var(--color-green);


  --color-gray-1: #D2D2D2;
	--color-gray-2: #787878;
	--color-gray-3: #2B2B2B;
	--color-gray-4: #1E1E1E;
  --color-gray-5: #414141;

  --font-size-3xl: 56px;
  --font-size-xxl: 40px;
  --font-size-xl: 21px;
  --font-size-l: 17px;

  /*
  todo
  --font-size-m: 15px;
  --font-size-s: 14px;
  --opacity-m:
  --opacity-s:
  */

  --box-shadow-l: 0px 10px 30px rgba(0,0,0,.66);
  --box-shadow-m: 0px 5px 15px rgba(0,0,0,.5);
}


[data-theme-color="var(--color-green)"] {
  background-color: var(--color-green);
}
[data-theme-color="var(--color-blue)"] {
  background-color: var(--color-blue);
}
[data-theme-color="var(--color-yellow)"] {
  background-color: var(--color-yellow);
}
[data-theme-color="var(--color-red)"] {
  background-color: var(--color-red);
}
[data-theme-color="var(--color-pink)"] {
  background-color: var(--color-pink);
}



::selection {
  background: rgba(255,255,255,.2);
}
::-moz-selection {
  background: rgba(255,255,255,.2);
}






h1, h2, h3,
span, li, p, a,
#header-container > span {
	font-family: 'Inter', sans-serif;
	cursor: default;
  font-smooth: always;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;

  color: var(--color-gray-1);
}



span, li, p, a {
  font-size: 17px;
  line-height: 26px;
}

a {
  cursor: pointer;
}

h1, h2, h3,
#header-container > span {
  color: var(--color-gray-1);
}

h1 strong, h2 strong, h3 strong {
  font-weight: 700;
}

h1 {
  font-size: var(--font-size-3xl);
  font-weight: 500;
  line-height: 63px;
}

h2 {
  font-size: var(--font-size-xxl);
  line-height: 50px;
  font-weight: 500;
}

h3 {
  font-size: var(--font-size-xl);
  line-height: 34px;
  font-weight: 400;
}



.logo {
  width: 54px;
  height: 38px;
  display: block;
}



.logo-triangle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 14px solid transparent;
  border-radius: 2px;
  display: block;
}

.logo-bar {
  height:14px;
  width:54px;
  background: var(--color-gray-5);
  position: absolute;
  bottom:0;
  left:0;
  border-radius: 7px;
  overflow: hidden;
  display: block;
}

.logo-progress {
  height: 14px;
  width: 50%;
  display: block;
}



@keyframes logoFadeIn {
  from { width: 0 }
  to { width: 50% }
}


.logo-progress {
  animation-name: logoFadeIn;
  animation-fill-mode: both;
  animation-timing-function: ease-out;
  animation-delay: 175ms;
  animation-duration: 300ms;
}

.logo, .logo > *, .logo span span {
  cursor: pointer;
}




.loading .spinner {
  width: 50px;
  height: 50px;
  border-top-color: var(--color-gray-2);
  border-left-color: var(--color-gray-2);
  animation: spinner 550ms linear infinite;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-style: solid;
  border-width: 5px;
  border-radius: 50%;
  box-sizing: border-box;
  vertical-align: middle;
  display: inline-block;
}

@keyframes spinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}