@import url("https://fonts.googleapis.com/css?family=Ubuntu");
@import url('https://fonts.cdnfonts.com/css/comicy');
@import url('https://fonts.cdnfonts.com/css/comic-neue');
@import url('/css/sections.css');
                
:root{
  --text-color: #000;

  --body-color: #262323;
  --body-color-dark: #090909;
  --body-color-light: #333333;
  --body-color-superlight: #444444;

  --nav-color: var(--body-color);

  --text-color: #fff;

  --primary-color: #51dbe0;
  --primary-color-dark: #4287f5;
  --primary-color-light: #7df6fa;

  --green-color: #62e051;
  --red-color: #e05151;

  --heading-font: 'Comic Neue', sans-serif;
  --heading-font-alt: 'comicy', sans-serif;
  --paragraph-font: 'Inter', sans-serif;

  --border-radius-large: 20px;
  --border-radius-small: 10px;

}

body{

  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;

  background-color: var(--body-color);

  font-family: var(--paragraph-font);

}

a {
  text-decoration: none;
  color: var(--primary-color);
  font-weight: bold;
}

li{
  list-style: none;
}



/*Loading ring*/

/* .loader {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: block;
  margin:30px auto;
  position: relative;
  color: #FFF;
  box-sizing: border-box;
  animation: animloader 1s ease-in infinite alternate;
}

@keyframes animloader {
  0% {
    box-shadow: -76px -24px ,  -28px 0,  28px 0, 76px 0;
  }
  33% {
    box-shadow: -76px 0px, -28px -24px,  28px 0, 76px 0;
  }
  66% {
    box-shadow: -76px 0px , -28px 0, 28px -24px, 76px 0;
  }
  100% {
    box-shadow: -76px 0 , -28px 0, 28px 0 , 76px -24px;
  }
} */


.loader {

  margin: 15px 0;

  --height: 120px;

  position: relative;
  width: calc(var(--height) * 2.25);
  display: flex;
  justify-content: space-between;
  height: var(--height);
  color: transparent;

}
.loader::after , .loader::before  {
  content: '';
  display: inline-block;
  width: var(--height);
  height: var(--height);
  background-color: #FFF;
  background-image:  radial-gradient(circle calc(var(--height) * 0.32), var(--primary-color) 100%, transparent 0);
  background-repeat: no-repeat;
  border-radius: 50%;
  animation: eyeMove 10s infinite , blink 10s infinite;
}
.loader::before {
  animation: eyeMoveL 10s infinite , blink 10s infinite;
}
.loader::after {
  animation: eyeMoveR 10s infinite , blink 10s infinite;
}

@keyframes eyeMoveL {
  0%  , 10% {     background-position: 0px 0px}
  13%  , 40% {     background-position: calc(var(--height) * -0.25) 0px}
  43%  , 70% {     background-position: calc(var(--height) * 0.25) 0px}
  73%  , 90% {     background-position: calc(var(--height) * 0.05) calc(var(--height) * 0.25)}
  93%  , 100% {     background-position: 0px 0px}
}
@keyframes eyeMoveR {
  0%  , 10% {     background-position: 0px 0px}
  13%  , 40% {     background-position: calc(var(--height) * -0.25) 0px}
  43%  , 70% {     background-position: calc(var(--height) * 0.25) 0px}
  73%  , 90% {     background-position: calc(var(--height) * -0.05) calc(var(--height) * 0.25)}
  93%  , 100% {     background-position: 0px 0px}
}
@keyframes blink {
  0%  , 10% , 12% , 20%, 22%, 40%, 42% , 60%, 62%,  70%, 72% , 90%, 92%, 98% , 100%
  { height: var(--height); margin: 0;}
  11% , 21% ,41% , 61% , 71% , 91% , 99%
  { height: calc(var(--height) * 0.4); margin: calc(var(--height) * 0.3) 0;}
}