/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */



:root {
    --primary: #A1E1D1;
    --secondary: #39977f;
    --background: #1a1818;
    --primarytext: #ff00ff;
    --secondarytext: #00ffff;
}


.responsive {
  width: 100%;
  height: auto;
}


.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--background);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.progress-bar {
    width: 200px;
    height: 20px;
    background: #111;
    border: 2px solid var(--primary);
    margin-top: 20px;
}

.progress {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transition: width 0.5s ease;
}



.stars {
    position: absolute;
    width: 100%;
    height: 100%;
}

.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: twinkle 1s infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}



.glitch-title {
    
    text-transform: uppercase;
    position: relative;
    text-shadow: 
        1px 1px var(--primarytext),
        -1px -1px var(--secondarytext);
   
}

@keyframes glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}


@media (max-width: 768px) {


}

bodynl {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.container {
  margin: -10px;
  width: 110vw;
  height: 110vh;
  overflow: hidden;
  position: relative;

}

.northern-lights {
  position: absolute;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  animation: northern 10s linear infinite alternate;
  background: linear-gradient(10deg, #a1d9b4 20%, #32988a 40%, #000e3c 70%);
}

entertext {
  position: absolute;
  bottom: -5%;
  left: 50%;
  transform: translate(-50%, 0%);
  font-family: 'New Rocker', cursive;
  font-weight: 100;
  text-align: center;
  font-size: 5vw;
  color: #3366b2;
  text-shadow: #fff 2px 2px 0, #fff -2px -2px 0,
  #fff -2px 2px 0, #fff 2px -2px 0;

}

#wolfHead {
  display: block;
  position: absolute;
  top: 50vh;
  left: 30%;
  width: 35vw;
  height: 35vw;
  transform: translate(0, -50%) rotate(45deg);
  transition: .3s ease-in;
  z-index: 2;
}

body:hover #wolfHead {
  transform: translate(0, -50%) rotate(0deg);
  transition: .3s ease-in;
}

#tulienter {
  display: block;
  position: absolute;
  top: 30vh;
  left: 40%;
  width: 20vw;
  height: 20vw;
  transform: translate(0, 0) ;
  transition: .3s ease-in;
  z-index: 2;
}


@font-face {
    font-family: 'anonymousregular';
    src: url('/Fonts/Anonymous-webfont.eot');
    src: url('/Fonts/Anonymous-webfont.eot?#iefix') format('embedded-opentype'),
         url('/Fonts/Anonymous-webfont.woff2') format('woff2'),
         url('/Fonts/Anonymous-webfont.woff') format('woff'),
         url('/Fonts/Anonymous-webfont.ttf') format('truetype'),
         url('/Fonts/Anonymous-webfont.svg#anonymousregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


td {
  text-align: center;
  vertical-align: middle;
}



.st0 {
  fill: #3481C3;
}

.st1 {
  fill: #2574B7;
}

.st2 {
  fill: #2C5DA6;
}

.st3 {
  fill: #244892;
}

.st4 {
  fill: #3169AC;
}

.st5 {
  fill: #3182C4;
}

.st6 {
  fill: #2674B8;
}

.st7 {
  fill: #3490CE;
}

.st8 {
  fill: #8ABAE4;
}

.st9 {
  fill: #B0CEE9;
}

.st10 {
  fill: #9CC2E7;
}

.st11 {
  fill: #7CB4E1;
}

.st12 {
  fill: #2E3E7A;
}

.st13 {
  fill: #3B88C8;
}

.st14 {
  fill: #1B3551;
}

.st15 {
  fill: #3667AF;
}

.st16 {
  fill: #2757A2;
}

.st17 {
  fill: #296AB2;
}

.st18 {
  fill: #2C77BA;
}

.st19 {
  fill: #4389C8;
}

.st20 {
  fill: #2F61AA;
}

.st21 {
  fill: #FCF7F7;
}

.st22 {
  fill: #2F7ABC;
}

.st23 {
  fill: #1D4382;
}

.st24 {
  fill: #61A6DA;
}

.st25 {
  fill: #499BD5;
}

.st26 {
  fill: #214164;
}

.st27 {
  fill: #6EACDE;
}

.st28 {
  fill: #3283C5;
}

.st29 {
  fill: #2F94CE;
}

.st30 {
  fill: #7FB2E0;
}

@keyframes northern {
  0%   {  transform: translate(5%, -2%);}
  25%  {  transform: translate(10%, 7%);}
  40%  {  transform: rotate(-10deg);}
  60%  {  transform: translate(7%, -2%);}
  85%  {  transform: translate(6%, 3%) rotate(12deg);}
  100% {  transform: none;}
}