*,
*>* {
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: Charmonman;
  font-weight: 400;
  font-style: normal;
  src: url(./charmonman/charmonman_400/Charmonman-Regular.ttf)
}

@font-face {
  font-family: Charmonman;
  font-weight: 700;
  font-style: normal;
  src: url(./charmonman/charmonman_700/Charmonman-Bold.ttf);
}

:root {
  --duration: 60s;
  --density: 70;
}

body {
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-color: hsl(41, 10%, 50%);
}

#starting {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: black;
  z-index: 500;
  transition: opacity 2s;
}

#starting .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  background: transparent;
  font-family: Charmonman;
  font-weight: 700;
  font-size: 30px;
  white-space: nowrap;
  text-align: center;
}

/* The actual window, frame and all, is always on top */
#window {
  z-index: 300;
}

/* windowArea */
#windowArea {
  z-index: 200;
}

/* within the window areal */
.icicles {
  z-index: 0;
}

.waterDrops {
  z-index: 10;
}

.darkForeground {
  z-index: 15;
}

.anyGirl {
  z-index: 20;
}

/* landscape */
.landscape {
  z-index: 100;
}

.darkBackground {
  z-index: -10;
}





.windowContainer {
  width: fit-content;
  height: 100%;
  background-color: transparent;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


#window {
  position: relative;
  height: 100%;
}

#windowArea {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.glass1,
.glass2,
.glass3,
.glass4 {
  position: absolute;
  top: 52%;
  left: 47.8%;
  transform: translate(-50%, -50%);
}

/* water spots */
.glass1 {
  height: 65%;
  top: 49%;

}

/* smaller drops */
.glass2 {
  height: 85%;
}

/* Snow crystals on window */
.glass3 {
  height: 90%;
}

/* Icicles */
.icicles {
  position: absolute;
  top: 12.5%;
  left: 30%;
  width: 30%;
}

.landscape {
  position: absolute;
  top: 49.3%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 72%;
}

.night {
  position: absolute;
  top: 5%;
  left: 5%;
  height: 90%;
  width: 90%;
  background-color: black;
}

.anyGirl {
  position: absolute;
  height: 50%;
  top: 36%;
  left: 48%;
  opacity: .3;
}

/* person */
#windowContainer.active #windowArea .anyGirl {
  animation: focus-1 var(--duration) linear infinite alternate
}

@keyframes focus-1 {
  0%, 100% {
    filter: blur(.5em);
    opacity: .2;
  }
  55% {
    filter: blur(0);
    opacity: .4;
  }
}

/* water drops */
#windowContainer.active #windowArea .waterDrops {
  animation: waterDrops var(--duration) linear infinite alternate
}

@keyframes waterDrops {
  0%, 100% {
    filter: blur(2px);
    opacity: .1;
  }
  50% {
    filter: blur(0);
    opacity: .6;
  }
} 

/* make icicles & snow darker for nighttime */
#windowContainer.active #windowArea .darkForeground {
  animation: icicles var(--duration) linear infinite alternate
}

@keyframes icicles {
  0%, 100% {
    opacity: 0;;
  }
  50% {
    /* opacity: .4; */
    opacity: .4;
  }
} 


/* make background even darker */
#windowContainer.active .landscape {
  animation: nightfall var(--duration) linear infinite alternate
}

@keyframes nightfall {
  0%, 100% {
    filter: blur(0);
    opacity: 1;
  }
  50% {
    filter: blur(.3rem);
    opacity: .4;
  }
} 


/* Generate the snow image using radial gradients */
/* $grad: ();
@for $i from 0 to var(--density) {
  $v: random(4) + 2;
  $a: random(5) * .1 + .5;
  $grad: $grad, radial-gradient(
      $v+px $v+px at
      (random($w - $v * 2) + $v)+px
      (random($w - $v * 2) + $v)+px, 
      rgba(255,255,255,$a) 50%,
      rgba(0,0,0,0)
  ) !global;
}

// The CSS
html {
  height: 100%;
  background: linear-gradient(#123 30%, #667);
  overflow: hidden;
}
.snow, .snow:before, .snow:after {
  position: absolute;
  top: -$w + px;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: $grad;
  background-size: $w + px $w + px;
  animation: snow $s linear infinite;
  content: "";
}
.snow:after {
  margin-left: -$w/3 + px;
  opacity: .4;
  animation-duration: $s*2;
  animation-direction: reverse;
  filter: blur(3px);
}
.snow:before {
  animation-duration: $s*3;
  animation-direction: reverse;
  margin-left: -$w/2 + px;
  opacity: .65;
  filter: blur(1.5px);
}
@keyframes snow {
  to {
    transform: translateY($w + px);
  }
} */