* {
  margin: 0;
  padding: 0;
  border: none;
}

body {
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

:root {
  --wasdW: min(75.1vw, 75.1vh);
  --wasdH: min(100vw, 100vh);
}

canvas#cd_canvas {
  display: flex;
}

canvas#image_layer0,
canvas#image_layer1,
canvas#image_layer2,
canvas#clouds_layer,
canvas#noise_layer {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
canvas#image_layer0{z-index: -7;}
canvas#image_layer1{z-index: -5;}
canvas#image_layer2{z-index: -3;}
canvas#clouds_layer {z-index: -2;}
canvas#noise_layer {z-index: -1;}

#cover_container {
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  justify-content: center;
  align-items: flex-start;
}
#cover_container #cover {
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 0 0 min(5vw, 5vh) #0ff;
}
#cover_container #cover #headings {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}
#cover_container #cover #heading,
#cover_container #cover #subheading {
  max-width: calc(50% - min(calc(5vw), 5vh) * 2);
  /* box-shadow: 0 0 1px 1px #0f0; */
  margin: 0 min(5vw, 5vh);
}
#cover_container #cover #heading {
  margin-bottom: min(1.5vw, 1.5vh);
}
#cover_container #cover #subheading {
  margin-bottom: min(5vw, 5vh);
}
#cover_container #cover #title {
  max-width: calc(100% - min(calc(5vw), 5vh) * 2);
  /* box-shadow: 0 0 1px 1px #0f0; */
  margin: min(.75vw, .75vh) min(5vw, 5vh);
  text-align: center;
  font-style: normal;
  font-size: 3em;
}
#cover_container #cover #date {
  position: absolute;
  left: min(5vw, 5vh);
  top: 0;
  min-height: min(5vw, 5vh);
  max-height: min(5vw, 5vh);
  text-shadow: none;
  display: flex;
  align-items: center;
}

#loader {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 1.5s ease;
}
#loader.visible {
  opacity: 1;
  transition: opacity 1.5s ease;
}