/* 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-image: url(/images/texture_paper.jpg);
  background-size: 300px;
  color: black;
  font-family: monospace;
  overflow: hidden;
  margin: 0px;
  font-family: "Special Elite", system-ui;
  font-weight: 400;
  font-style: normal;
}
body a {
  text-decoration: none;
}
body a:hover {
  text-decoration: underline;
}
.container {
  display: grid;
  grid-template-areas:
    "header header"
    "menu content";
  grid-template-columns: 1fr 4fr;
  grid-template-rows: 1fr 9fr;
  height:100vh;
}

.container div.header {
  grid-area: header;
  text-align: center;
  padding: 10px;
  display: inline;
}
.container div.header h1 {
  margin: 0px 0px 10px 0px;
}
.container div.header a {
  padding: 0px 20px;
}
.container div.menu {
  grid-area: menu;
  overflow: scroll;
    padding: 10px;
  border-top: 4px ridge;
  border-right: 4px ridge;
  border-color: rgb(148, 144, 132);
  line-height: 100%;
  font-weight: 200;
}
.container div.menu h1{
  font-size: 150%;
}
.container div.menu h2{
  font-size: 110%;
  margin-top: -2%;
}
.container div.menu h3{
  font-size: 100%;
  text-indent: 15%;
  margin-top: -3%;
}

.container div.content {
  grid-area: content;
  overflow: scroll;
  padding: 10px;
  border-top: 4px ridge;
  border-color: rgb(148, 144, 132);
}
.container div.content h1 {
border-bottom: 3px solid black ;
}
.container div.content h2 {
border-bottom: 2px solid rgb(148, 144, 132) ;
}
inframe{
  width: 100%;
  height: 100%;
}
.bird_txt {
  display: inline-block;
  width: 95%;
  height: max-content;
}
.bird_txt img{
  float: right;
  border: 5px ridge rgb(148, 144, 132);
  width: inherit;
  object-fit: contain;
}
.slides {
  width: 40vw;
  height: 40vw;
  position: relative;
  margin: auto;
  float: right;
  align-content: center;
  max-height: 400px;
  max-width: 400px;
}
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color:black;
  text-decoration: none;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 10px;
  user-select: none;
  background:rgba(255,255,255, 0.8);
}
.next {
  right: 0;
}
.prev:hover, .next:hover {
  transform: scale(150%);
  text-decoration: none;
  
}
.mySlides {
  display: none
}
img {
  vertical-align: middle;
}
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active, .dot:hover {
  background-color: #717171;
}
@media (max-width: 576px) {
  .container {
    grid-template-areas:
      "header header"
      "menu menu" 
      "content content";
    margin: 0vh 0vw;
    width: 100vw;
    height: 90vh;
    grid-template-rows: unset;
  }
  .container div.content {
    border:0px;
    padding: 0px 10px;
  }
  .container div.content h1{
    margin:0px;
    padding: 0px 5px;
  }
  .container div.menu{
    border-top:2px black solid;
    border-bottom:2px black solid;
    border-right:0px;
    font-size: 80%;
    padding: 0px 10px;
    min-height: min-content;
    max-height: 20vh;
    overflow: scroll;
  }
  .container div.header {
    position: sticky;
    padding: 0px 10px;
  }
}
figure {
  position: relative;
  display: flex;
  margin: auto;
  justify-content: center;
  background-image: url(/images/texture_paper.jpg);
}
figcaption {
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  color: white;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  margin: 0;
  transition: opacity 0.2s;
  padding: 0% 5%;
  white-space: nowrap;
  font-size:clamp(14px,0.7rem,24px);
}
figure:hover figcaption{
  opacity: 1;
}
.landscape {
  max-width: 100%;
  max-height: 75%;
}
.portrait {
  max-height: 100%;
  max-width: 75%;
}