@import url('https://fonts.googleapis.com/css2?family=Patua+One&family=Ubuntu&display=swap');

* {
  font-family: 'Ubuntu', sans-serif;
}

:root {
  --swampy: rgb(80,100,0);
  --swampyDark: rgb(20,25,20);
  --mobileWidth: min(85vw, 350px);
}

#back {
  top: 1vw;
  left: 1.4vw;
  position: absolute;
  color: white;
  text-decoration: none;
  font-size: 1.3vw;
  z-index: 105;
}
#back:hover {
  color: white;
  text-decoration: underline;
}

#imgContainer {
  width: 100%;
  height: 25vh;
  top: 0; 
  left: 0;
  position: absolute;
  overflow: hidden;
}

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

#headerDim {
  background: rgba(0,0,0, 0.7);
  z-index: 100;
  width: 100%;
  height: 25vh;
  top: 0;
  left: 0;
  position: absolute;
}

#headerText {
  top: 12vh;
  left: 50vw;
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 9vh;
  text-align: center;
  width: 90vw;
  font-family: 'Patua One', sans-serif;
  color: white;
  margin: 0;
  text-shadow: 0 0 0.5vw black;
  z-index: 105;
}

#content {
  top: calc(30vh + 8vw);
  left: 50vw;
  position: absolute;
  transform: translate(-50%, 0);
  width: 50vw;
  height: 35vw;
}

#content p {
  font-size: 1.3vw;
  line-height: 2vw;
  margin: 0;
  margin-bottom: 3vw;
}

#bar {
  width: 20vw;
  height: 1px;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  border-bottom: solid 2px rgb(220,220,220);
  margin-bottom: 6vw;
}