/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
body {
  background-color: #440000;
  color: white;
  font-family: Verdana;
  height: 93vh;
}

.container {
  /*width: 88vw;*/
  /*height: 95vh;*/
  max-width:95%;
  min-height:100%;
  margin:auto;
  display: flex;
  justify-content:center; 
  align-items:center; 
  flex-direction: row; 
  flex-wrap: nowrap;
  width:fit-content;
  gap:22px;
  word-break: break-word;
  /*border: solid 7px black;*/
  padding: 10px;
  /*background-color: lightgrey;*/
}

.left {
  display: block;
  width: 15vw;
  min-width: 110px;
  left: 0;
  color: #ffffff;
  background-color: #261c19;
  overflow: hidden;
  word-break: break-word;
  border: solid #ffffff 3px;
  border-radius: 10px;
  box-shadow: 0 0 10px #000000;
  padding: 5px;
  text-align: center;
}

.middle {
  display:flexbox;
  height: 88%;
  min-width: 200px;
  min-height: 600%;
  word-break: break-word;
  justify-content:center;
  align-items:center;
  flex-direction:row;
  flex-wrap: nowrap;
  padding: 10px;
  gap: 5px;
  border: solid #ffffff 5px;
  border-radius: 10px;
  box-shadow: 0 0 10px #000000;
  background-color: darkred
  
}

.topbox {
  display:flex;
  flex-direction:row;
  height: 15%;
  background-color: #261c19;
  /*overflow: hidden;*/
  word-break: break-word;
  border: solid #ffffff 3px;
  border-radius: 0;
  box-shadow: 0 0 10px #000000;
  padding: 5px;
  max-height: 270px;
  gap: 10px;
}

.topbox-text {
  overflow-y:scroll;
  text-align: center;
  color: #ffffff;
  background-color: #41302b; 
}

.topbox-image {
  margin:auto;
  /*animation: floating 3s infinite ease-in-out;*/
}

@keyframes floating { 
  0% { 
    transform: translate(0,  0); 
  } 

  50%  { 
    transform: translate(0, 5px); 
  } 

  100%   {
    transform: translate(0, 0); 
  } 
}   

.middlebox {
  display:block;
  height: 15%;
  background-color: #261c19;
  overflow: hidden;
  word-break:break-word;
  border: solid #ffffff 3px;
  border-radius: 0;
  box-shadow: 0 0 10px #000000;
  padding: 5px;
  max-height: 270px;
  gap: 10px;
  text-align: center;
}

.middlebox-content {
  display: block;
}

.middlebox-icons {
  padding-left: 25px;
  padding-right: 25px;
}

.window-title {
  padding: 8px 10px;
  margin: -10px -10px 10px -10px;
  background: white;
  color: black;
  font-weight: bold;
}

.contents-section {
  margin-bottom: 5px;
}

.contents-links {
  display:block;
}

.contents-link img{
  filter: drop-shadow(0 0 2px white);
  transition: 0.2s all;
}

.contents-link:hover img{
  transition: 0.2s all;
  animation: jerky 0.8s infinite;
}

@keyframes jerky {
  0% {
    transform: scale(1.5) rotate(5deg);
  }  

  50% {
      transform: scale(1.5) rotate(2deg);
  }

  51% {
    transform: scale(1.5) rotate(-5deg);
  }

  100% {
    transform: scale(1.5) rotate(-2deg);
  }
}

.right {
  display: block;
  width: 15vw;
  min-width: 110px;
  left: 0;
  color: #ffffff;
  background-color: #261c19;
  overflow: hidden;
  word-break: break-word;
  border: solid #ffffff 3px;
  border-radius: 10px;
  box-shadow: 0 0 10px #000000;
  padding: 5px;
  text-align: center;
}

.middle2 {
  display:block;
}

.credits-list li{
  padding-top:7px;
  padding-bottom:7px;
  text-align:left;
  border-bottom:  double #585858 5px;
}

@media screen and (max-width: 800px) {
  .container {
    display:block;
  }
  .middle {
    min-width: 10vw;
  }
  .topbox-image {
    width:150px;
    height:150px;
  }
  .left {
    min-width: 71vw;
    margin: auto;
  }
  .right {
    min-width: 70vw;
    margin: auto;
  }
}