@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap);
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline; }
  
  /* HTML5 display-role reset for older browsers */
  
  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block; }
  
  body {
    line-height: 1; }
  
  ol, ul {
    list-style: none; }
  
  blockquote, q {
    quotes: none; }
  
  blockquote {
    &:before, &:after {
      content: '';
      content: none; } }
  
  q {
    &:before, &:after {
      content: '';
      content: none; } }
  
  table {
    border-collapse: collapse;
    border-spacing: 0; }
:root {
    --primary-color: #9100ff;
    --secondary-color: #20066e;
    --accent-color: #e100ff;
    --light-color: #e5e5f1;
    --dark-color: #1f1f1f;
    --dark-color-hover: rgba(31, 31, 31, 90%);
    --font-color: #290125;
}
@font-face {
    font-family: 'Sunrise';
    src: url('SangBleuSunrise-Regular-WebTrial.eot');
    src: local('Sunrise Regular'), local('Sunrise-Regular'),
        url('SangBleuSunrise-Regular-WebTrial.eot?#iefix') format('embedded-opentype'),
        url('SangBleuSunrise-Regular-WebTrial.woff2') format('woff2'),
        url('SangBleuSunrise-Regular-WebTrial.woff') format('woff'),
        url('SangBleuSunrise-Regular-WebTrial.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Sunrise';
    src: url('SangBleuSunrise-Bold-WebTrial.eot');
    src: local('Sunrise Bold'), local('Sunrise-Bold'),
        url('SangBleuSunrise-Bold-WebTrial.eot?#iefix') format('embedded-opentype'),
        url('SangBleuSunrise-Bold-WebTrial.woff2') format('woff2'),
        url('SangBleuSunrise-Bold-WebTrial.woff') format('woff'),
        url('SangBleuSunrise-Bold-WebTrial.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Sunrise';
    src: url('SangBleuSunrise-Light-WebTrial.eot');
    src: local('Sunrise Italic'), local('Sunrise-Italic'),
        url('SangBleuSunrise-Light-WebTrial.eot?#iefix') format('embedded-opentype'),
        url('SangBleuSunrise-Light-WebTrial.woff2') format('woff2'),
        url('SangBleuSunrise-Light-WebTrial.woff') format('woff'),
        url('SangBleuSunrise-Light-WebTrial.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
  }

  @font-face {
    font-family: 'Sunrise';
    src: url('SangBleuSunrise-RegularItalic-WebTrial.eot');
    src: local('Sunrise Lighter'), local('Sunrise-Lighter'),
        url('SangBleuSunrise-Light-WebTrial.eot?#iefix') format('embedded-opentype'),
        url('SangBleuSunrise-Light-WebTrial.woff2') format('woff2'),
        url('SangBleuSunrise-Light-WebTrial.woff') format('woff'),
        url('SangBleuSunrise-Light-WebTrial.ttf') format('truetype');
    font-weight: lighter;
    font-style: normal;
  }

html {
    font-size: 8px;
    font-family: 'Sunrise', serif !important;
}
@keyframes anim {
    0% {
      stroke: #9100ff;
      stroke-width: 2px;
      stroke-dashoffset: -2400;
    }
    50% {
      stroke: #20066e;
      stroke-width: 1px;
    }
    75% {
      stroke: #e100ff;
      stroke-width: 2px;
    }
    100% {
       stroke: #ff0099;
       stroke-width: 1px;
       stroke-dashoffset: 0;
    }
  }

@keyframes text {
    0% {
      color: #9100ff;
    }
    50% {
      color: #20066e;
    }
    75% {
      color: #e100ff;
    }
    100% {
       color: #ff0099;
    }
}

@keyframes progressbar {
    0% {
      background: #9100ff;
    }
    15% {
      background: #20066e;
    }
    30% {
      background: #00ffff;
    }
    45% {
      background: #00ff00;
    }
    60% {
      background: #ffff00;
    }
    75% {
      background: #ff5f1f;
    }
    90% {
      background: #f72119;
    }
    95% {
      background: #e100ff;
    }
    100% {
       background: #ff0099;
    }
}

@keyframes glitch{
  2%,64%{
    transform: translate(2px,0) skew(0deg);
  }
  4%,60%{
    transform: translate(-2px,0) skew(0deg);
  }
  62%{
    transform: translate(0,0) skew(5deg); 
  }
}

@keyframes glitchTop{
  2%,64%{
    transform: translate(2px,-2px);
  }
  4%,60%{
    transform: translate(-2px,2px);
  }
  62%{
    transform: translate(13px,-1px) skew(-13deg); 
  }
}

@keyframes glitchBottom{
  2%,64%{
    transform: translate(-2px,0);
  }
  4%,60%{
    transform: translate(-2px,0);
  }
  62%{
    transform: translate(-22px,5px) skew(21deg); 
  }
}


/* You can add global styles to this file, and also import other style files */
::selection {
  color: #fff;
  background: var(--accent-color);
}

/* width */
::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--light-color);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--dark-color);
  border-radius: 24px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--dark-color-hover);
}

body {
  min-height: 100vh;
  color: var(--font-color);
  background: url('BG6.png') no-repeat;
  background-size: cover;
}

/*# sourceMappingURL=styles.css.map*/