html {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

body {
  text-align: center;
  margin: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
}
.blue {
  background: #4084e2;
  mask-image: url(stars.svg);
  mask-size: 45em;
}

.orange {
  background: #f1945e;
}

.blue::after {
  content: "";
  background: #bee6ff;
  mask-image: url(stripes.svg);
  mask-size: 20em;
}

.orange::after {
  content: "";
  background: #fbdbb6;
  mask-image: url(stripes.svg);
  mask-size: 20em;
}

.stripes, .stripes::after {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -2;
  top: 0;
  left: 0;
}

#blurthisyoufilthycasual {
  opacity: transparent;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  backdrop-filter: blur(15px);
  z-index: -1;
}

a {
  text-decoration: none;
}

iframe {
  z-index: 1;
  width: 100vw;
  flex-grow: 1;
}


.container {
 margin-left: 0.4em;
 display: inline-block;
 position: relative;
 cursor: pointer;
 font-size: 1.3em;
 text-align: left;
 margin-top: 0.2em;
 text-indent:1.25em;
 /*! width: 6.25em; */
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

.container input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
}

.checkmark {
 position: absolute;
 top: 0.075em;
 left: 0;
 height: 1em;
 width: 1em;
 border-radius: 25%;
 background-color: #fff;
}

.container:hover input ~ .checkmark {
 background-color: #ccc;
}

.container input:checked ~ .checkmark {
 background-color: #F6AEE3;
}

.checkmark:after {
 content: "";
 position: absolute;
 display: none;
}

.container input:checked ~ .checkmark:after {
 display: block;
}

.container .checkmark:after {
 left: 0.275em;
 top: 0.1em;
 width: 0.25em;
 height: 0.5em;
 border: solid white;
 border-width: 0 0.15em 0.15em 0;
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
}

#layouting {
  display: flex;
  height: 100vh;
  width: 100vw;
  flex-direction: column;
  color: white;
  font-family: monospace;
}
#top_layout {
  height: 10em;
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.7) 100%);
  border-bottom: 2px solid grey;
  width: 100vw;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 3em auto;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}
#bottom_layout {
  width: 100vw;
  height: fit-content;
  background: black;
  display: flex;
}
h1 {
  margin: 0 0.2em;
  display: inline-block;
}
#titlebar {
  margin: 0.4em;
  height: fit-content;
  text-align: left;
  grid-area: 1 / 1 / 2 / 2;
}
#modelcredit {
  height: fit-content;
  margin: 0.4em;
  text-align: right;
  grid-area: 1 / 2 / 2 / 3;
}
a {
  color: #F6AEE3;
}
#colors {
  grid-area: 2 / 1 / 3 / 3;
  overflow: hidden;
  display: flex;
}
.swatch {
  flex-grow: 1;
  align-content: end;
}
#toggles {
  flex-grow: 1;
}
#height, #species {
  font-size: 1.4em;
  margin: 0.1em;
}