/* 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("../bg.jpg");
  height: 100%;
  background-size: cover;
  background-position: center;
}
h1, h2, h5, h6 {
  margin: 0;
  padding: 0;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.6)
}
/*font definitions*/
@font-face {
  font-family: "pastone";
  src: url("../fonts/Pastone-Italic.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "fancy";
  src: url("../fonts/fancy.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
} 
@font-face {
  font-family: "oldwest";
  src: url("../fonts/Ye Olde Towne.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "it";
  src: url("../fonts/Trattatello.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "noto";
  src: url("../fonts/noto.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
a {
  color: white;
  font-weight: bold;
}
.bun {
  max-width: 800px;
  margin: 0 auto;
  padding: 12px;
}
.title {
  font-family: "fancy", serif;
  text-align: left;
  white-space: nowrap;
  font-size: 50px;
  color: white;
}
.title2 {
  font-family: "it", serif;
  text-align: left;
  white-space: nowrap;
  max-width: 800px;
  font-size: 44px;
  color: white;
}
.quote {
  font-family: "pastone", serif;
  margin: 0 auto;
  text-align: left;
  font-size: 16px;
  color: white;
  text-indent: 1em;
}
.meal {
  display: flex;
  justify-content: center;
  max-width: 800px;
  gap: 20px;
  padding-left: 12px;
  padding-right: 12px;
  margin: 0 auto;
  z-index: 2;
}

/* this is the navigation menu, known lovingly as a side of fries*/
.fries {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: rgba(0,0,0,0.3);
  max-width: 200px;
  color: white;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.6)
}
/*i dont really understand this, but the webpage is named after burger for clarity*/
.meat {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 20vh;
}
/*overlay over the body*/
.overlay {
  background-color: rgba(0,0,0,0.3);;
  color: white;
  border-radius: 8px;
  max-width: 600px;
  text-align: left;
  padding: 20px;
  padding-right: 24px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.6)
}
.date {
  margin: 0;
  padding: 0;
  font-style: italic;
}
.bbody {
  text-shadow: 2px 2px 5px rgba(0,0,0,0.4);
}
#banner {
  width: 34%;
  height: 34%;
  position: relative;
  top: 29px;
}
footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
#next {
  height: 95%;
}
#note {
  width: 35%;
  height: 35%;
  position: relative;
  top: 20px;
}

#latest {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background-color: rgba(0,0,0,0.3);
  color: white;
  padding: 12px;
  border-radius: 8px;
  margin: 0 auto;
  max-width: 800px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.6)
}
#powerline {
  position: absolute;
  top:-40px;
  left: -300px;
  width: 40px;
  z-index: 1;
  pointer-events: none;
}