* {
  margin: 0;
}

.main-wrapper {
  display: grid;
  height: 110vh;
}

.words {
  position: relative;
  background-color: rgb(215,39,62);
  margin: 10vh 10vw;
  max-height: 80vh;
}

.layout-boxes {
  background-color: rgb(192, 192, 192);
  border-bottom: 3px solid rgb(130, 130, 130);
  border-right: 3px solid rgb(130, 130, 130);
  border-top: 3px solid rgb(220, 220, 220);
  border-left: 3px solid rgb(220, 220, 220);
}

.outline {
  background-color: rgb(192, 192, 192);
  font-size: 1.3em;
  padding: 0.3em;
  display: flex;
  justify-content: center;
}

.head {
}

.middle {
  display: grid;
  border-top: none;
  border-bottom: none;    
  grid-template-columns: 1fr 6fr;
  background: rgb(192, 192, 192);
  height: 92%;
}

.sidebar {
  font-size: 24px;
  display: flex;
  flex-direction: column; 
  color: red;
  text-align: center;
  padding: 0.3em;
}

.content {
  background-color: rgb(255, 230, 0);
  object-fit: fill;
  overflow-y: scroll;
  margin: 2%;
  /* height: 100%; */
}

.oops {
  display: flex;
  justify-content: center;
  padding: .3em 0;
  font-size: 3rem;
}

.text {
  display: flex;
  justify-content: center;
  margin: 1rem 1em;
}

.baby-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10%;
}

.baby {
  max-width: 30%;
}

.search {
  background-color: rgb(255, 230, 0);
}

.search-form {
  display: grid;
  grid-template-columns: 7fr 1fr;
}

.search-button {
  display: inline-block;
}

.glass {
  max-width: 50%;
}

.interaction-pics {
  background-color: blueviolet;
  height: 50vh;
  background-size: cover;
  background-position: center;
}

.interaction-pic-1 {
  background-image: url(images/pic1.png);
}

.interaction-pic-2 {
  background-image: url(images/pic2.png);
}

.interaction-pic-3 {
  background-image: url(images/pic3.png);
}

.interaction-pic-4 {
  background-image: url(images/pic4.png);
}

.interaction-pic-5 {
  background-image: url(images/pic5.png);
}

.interaction-pic-6 {
  background-image: url(images/pic6.png);
}

.interaction-pic-7 {
  background-image: url(images/pic7.png);
}

.foot {
}


body {
  background-color: red;
  font-family: "Chicago", sans-serif;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin: 1rem;
  margin-top: 5vh;
}

.col img{
  width: 100%;
  margin-bottom: 5px;
}

.header {
  display: flex;
  justify-content: center;
}

.heading {
  text-align: center;
  font-size: 92px;
  margin-top: 5vh;
  text-shadow: 2px 2px 1px yellow;
  background-color: yellow;
  padding: 0.1em;
  width: fit-content;
}

@font-face {
  font-family: "Chicago";
  src: url("ChiKareGo.ttf") format("truetype");
}

@media (max-width: 500px) {
  .grid {
      grid-template-columns: 1fr;
  }
}

#history_page {
  background-image: url("images/bw_wave.png");
  background-attachment: fixed;
  background-size: 10%;
}

#wave_img {
  position: absolute;
  left: 55vw;
  top: 10vh;
}

.text-augustin {
  margin-bottom: 20px;
  padding: 5px 20px;
  font-size: 2rem;
}

.scrolling_body {
  height: 40vh;
  margin: 5%;
  background-color: black;
  padding: 10px;
  overflow-y: scroll;
}

.history-text {
  color: red;
  font-size: 1.5rem;
  padding-bottom: 1rem;
}

.intro-text {
  font-size: 1.5rem;
  padding-bottom: 1rem;
  color: red;
}

.black-box {
  background-color: black;
}

a {
  color: green;
  margin-top: 50px;
}

.blink {
  animation: blink steps(1) 1s infinite;
}

@keyframes blink {
  0% {
      opacity: 1;
  }
  50% {
      opacity: 0;
  }
}