:root{
  --dark2: #540804;
  --dark1: #81171b;
  --med1: #ad2e24;
  --light1: #c75146;
  --light2: #ea8c55;
  --base: #fff;
}

#content-box{
  position: relative;
  background-color: rgba(255,255,255,0.6);
  max-width: 60%;
  left: 50%; 
  transform: translate(-50%, 10%);

}

.svglight2{
  fill: var(--light2);
}
.svglight1{
  fill: var(--light1);
}
.svgmed1{
  fill: var(--med1);
}
.svgdark1{
  fill: var(--dark1);
}
.svgdark2{
  fill: var(--dark2);
}

body{
  margin: 0px;
  min-width: 100%;
  min-height: 100%;
  background-color: var(--light1);
  color: var(--dark2);
  font-family: Verdana;
}

#container{
  max-width: 100vw;
  margin-left: 10vw;
  margin-right: 10vw;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

h1{
  order: 0;
  flex-grow: 1;
  color: var(--dark1);
}

img #winggif{
  order: 1;
  flex-grow: 1;
  flex-shrink: 3;
  margin: auto;
  max-width: 80%;
}

#svg{
  z-index: -1;
  position: absolute;
  left: 50%; 
  transform: translate(-50%, 0%);
  min-width: 70%;
  max-width: 80%;
  height: fit-content;
}

body > footer {
  position: fixed;
  bottom: 0;
}

footer img{
  max-height: 32px;
}