:root {
  --gray1: hsl(0, 0%, 99%);
  --gray2: hsl(0, 0%, 97.3%);
  --gray3: hsl(0, 0%, 95.1%);
  --gray4: hsl(0, 0%, 93%);
  --gray5: hsl(0, 0%, 90.9%);
  --gray6: hsl(0, 0%, 88.7%);
  --gray7: hsl(0, 0%, 85.8%);
  --gray8: hsl(0, 0%, 78%);
  --gray9: hsl(0, 0%, 56.1%);
  --gray10: hsl(0, 0%, 52.3%);
  --gray11: hsl(0, 0%, 43.5%);
  --gray12: hsl(0, 0%, 9%);

  
}

body {
  background-image: url(./assets/tei-bg.png);
  color: var(--gray12);
}

.App {
  font-family: sans-serif;
  background-color: white;
  max-width: 1000px;
  margin: 0 auto;
}

.wrapper {
  display: grid;
  grid-template-columns: 2fr minmax(200px, 1fr);
  grid-template-rows: max-content auto;
  grid-template-areas:
    "header ."
    "main ad";
  margin-top: 2rem;
  gap: 0 2rem;
  padding: 1rem;
}

.main {
  background-color: white;
  max-width: 800px;
  grid-area: main;
}

img {
  width: 100%;
}
.title-wrapper {
  text-align: center;
  grid-area: header;
}
h1 {
  margin: 0;
  text-transform: uppercase;
  font-size: 2.4rem;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  font-weight: 800;
}
.caption {
  text-transform: uppercase;
  font-weight: bold;
  margin-top: 0.5rem;
  font-style: italic;
  text-align: center;
}
.main__info {
  display: flex;
  justify-content: space-between;
  color: var(--gray11);
}
.main__info > span:nth-of-type(2) {
  text-align: end;
}
.first-p {
  text-indent: 1.5em;
}
p {
  line-height: 1.5;
  text-align: justify;
}

.aside {
  grid-area: ad;
  position: sticky;
  height: max-content;
  top: 20px;
}

.ad {
  background-color: goldenrod;
  min-width: 200px;
  margin-bottom: 2rem;
}
.ad-image {
  display: block;
}
.dpl {
  height: 120px;
  aspect-ratio: 2/1;
  object-fit: cover;
}

@media (max-width: 660px) {
  .wrapper {
    grid-template-areas:
      "header header"
      "main main"
      "ad ad";
  }
  .aside {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
  .ad {
    max-width: 400px;
  }
  .dpl {
    height: 200px;
  }
}


/* HEADER STYLES */
.header {
  background-color: hsl(0deg 0% 7%);
  color: hsl(0deg 0% 85%);
  height: 70px;
  padding: 0 1rem;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  grid-template-columns: 50px 200px 1fr 1fr;
}
.hamburger {
  font-size: 40px;
  stroke-width: 3px;
  padding-right: 1rem;
  flex-shrink: 0;
  color: white;
}
.logo {
  width: 170px;
  padding-right: 2rem;
}
.header__right {
  display: flex;
  max-width: 300px;
  flex: 1;
  justify-content: space-around;
}
.inputWrapper {
  display: flex;
  margin-right: 5px;
}
.searchButton {
  display: grid;
  place-content: center;
  border: 1px solid black;
  background: white;
  min-width: 28px;
}
.searchInput {
}
.fake-button {
  border-radius: 100%;
  background-color: hsl(0deg 0% 85%);
  aspect-ratio: 1/1;
  width: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: hsl(0deg 0% 10%);
  padding: 4px;
}

.fake-button:not(:last-of-type) {
  margin-right: 5px;
}

@media (max-width: 600px) {
  .header {
    grid-template-columns: 50px 200px 1fr;
  }
  .header__right {
    justify-content: right;
  }
  .inputWrapper {
    display: none;
  }
}

@media (max-width: 400px) {
  .fake-button {
    display: none;
  }
}