@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=Libertinus+Mono&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

body, html {
  font-family: "DotGothic16", sans-serif;
  font-size: 1em;
  color: #407345;
}
body {
  background-image: url("imgs/plaid_brown.jpg");
  background-repeat: repeat-y;
  background-size: 100% auto;
}

a {
  color: #407345;
  background-color: rgba(132, 179, 137, 0.5);
  font-weight: bold;
}

::selection {
  color: #407345;
  background-color: rgba(132, 179, 137, 0.5);
}

ul {
  list-style-type: none;
}

ul li::before {
  content: "✿";
  margin-right: 0.2em;
}

.header {
  padding: 10px;
  background: beige;
  position: absolute;
  font-size: 3em;
  text-align: center;
  right: 5vw;
  width: 20vw;
  top: 5vh;
  height: 25vh;
}

.list {
  padding: 10px;
  background: beige;
  position: absolute;
  right: 5vw;
  width: 20vw;
  bottom: 5vh;
  height: 55vh;
  overflow-y: scroll;
}

.textbox {
  background: rgba(132, 179, 137, 0.5);
  position: absolute;
  left: 5vw;
  width: 65vw;
  top: 5vh;
  height: 60vh;
  overflow-y: scroll;
}

.box {
  display: flex;
}

.box img {
  width: 8vw;
  height: 8vw;
  border: 10px solid beige;
}

.text {
  padding: 10px;
  background: beige;
  width: 55vw;
}

.images {
  position: absolute;
  left: 5vw;
  width: 65vw;
  bottom: 5vh;
  height: 25vh;
  overflow-y: hidden;
  overflow-x: scroll;
  display: flex;
}

.images p {
  background: beige;
  color: #407345;
  text-align: center;
  border: 10px solid beige;
}

.images img {
  height: 23vh;
  width: auto;
  border: 10px solid rgba(132, 179, 137, 0.5);
}

@media(orientation: portrait) {
  .header {
    right: 10vw;
    width: 35vw;
    top: 5vh;
    height: 15vh;
    font-size: 2em;
  }

  .list {
    left: 10vw;
    width: 40vw;
    top: 5vh;
    height: 15vh;
  }

  .textbox {
    left: 10vw;
    width: 80vw;
    top: 27vh;
    height: 40vh;
  }
  
  .box img {
    width: 23vw;
    height: 23vw;
  }

  .images {
    left: 10vw;
    width: 80vw;
    bottom: 3vh;
    height: 28vh;
  }
  
  .images img {
    height: 26vh;
  }
  
}