/* CSS RESET */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* html {
  position: relative;
  min-height: 100%;
  max-width: 100%;
} */

body {
  background-color: #D4CCBA;
  color: #280D03;
}

/* GENERAL TYPOGRAPHY */

h1, h2, h3, h4 {
  font-family: 'Neuton', 'Georgia', serif;
  font-weight: 700;
}

h1 {
  font-size: 3.6rem;
  text-align: justify;
  text-align-last: justify;
  letter-spacing: 4px;
  line-height: 30px;
  padding: 0 0 1rem 0;
}

h1:after {
  content: ”;
  display: inline-block;
  width: 100%;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 1.3rem;
}

h4 {
  font-weight: 400;
  font-size: 0.9rem;
  font-family: 'Pigeon', 'PT Serif', 'Georgia', serif;
  font-weight: 400;
  padding: 0.2rem 0 0 0;
  text-align: justify;
  text-align-last: justify;
}

h4:after {
    content: ”;
    display: inline-block;
    width: 100%;
}

p, footer, tbody {
  font-family: miller-text, 'Georgia', serif;
  font-style: normal;
  font-weight: 400;
}

p:first-child:first-letter {
  float: left;
  font-family: miller-text, 'Georgia', serif;
  font-size: 2rem;
  line-height: 30px;
  padding: 3px 3px 0 0;
}

figcaption {
  font-weight: 400;
  font-size: 0.9rem;
  font-family: 'Pigeon', 'PT Serif', 'Georgia', serif;
  font-weight: 400;
  padding: 0.2rem 0 0.2rem 0;
  text-align: justify;
  text-align-last: justify;
}

figcaption:after {
  content: ”;
  display: inline-block;
  width: 100%;
}

.header__title {
  font-family: 'Neuton', 'Georgia', serif;
  font-size: 1.2rem;
  font-weight: 400;
}

p {
  text-align: justify;
}

p, tbody {
  font-size: 0.9rem;
  padding-top: 0.2rem;
}

p + p {
  text-indent: 1rem;
}

@font-face {
  font-family: Pigeon;
  /* Credit to Dai Foldes / Lost Typeface Co-op */
  src: url(Pigeon.otf);
}

@font-face {
  font-family: Regitta;
  src: url(Regattia-Bold.otf);
}

a {
  font-family: 'Pigeon', 'PT Serif', 'Georgia', serif;
  font-weight: 400;
  font-size: 0.95rem;
  color: #280D03;
  text-decoration: underline rgba(40, 13, 3, 0.3);
}

a .finger__container{
  visibility: hidden;
}

a:hover .finger__container{
  visibility: visible;
  transition: ease-in-out 0.5s;
}

a:hover {
  text-decoration: underline;
}

blockquote {
  font-family: 'Pigeon', 'PT Serif', 'Georgia', serif;
  font-weight: 400;
  font-size: 1.5rem;
  border-left: solid 4px #280D03; 
  margin: 0.3rem 0 0.3rem 0;
  padding: 0 0 0 0.2rem;
}

footer {
  font-size: 0.85rem;
}

/* HEADER */

.header__title--image {
  display: flex;
  justify-content: center;
  align-content: center;
}

.title__container {
  height: 17rem;
  width: 35rem;
  margin: 0.5rem 0 0.5rem 0;
  text-align: center;
}

.title__container img {
  height: 100%;
}

.header__info {
  display: inline-flex;
}

.header__info--issue {
  position: relative;
  left: 0;
  margin-left: 2rem;
}

.header__info--date {
  position: absolute;
  left: 43vw;
  text-transform: capitalize;
}

.header__info--price {
  position: absolute;
  right: 0;
  margin-right: 2rem;
}

.second__divider {
  margin-top: 0.2rem;
}

/* DIVIDERS  */

.divider {
  border: #280D03 1px solid;
}

.container__divider--small {
  display: flex;
  justify-content: center;
}

.divider--small {
  margin: 0.2rem 0 0 0;
  border: #280D03 1px solid;
  width: 17%;
}

/* GRID */

.grid {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
      "head head head head head"
      "hero hero hero viol viol"
      "hero hero hero mans silv"
      "hero hero hero jubi silv"
      "wedd vill vill jubi silv"
      "wedd vill vill pipe silv"
      "cham vill vill pipe silv"
      "bake bake ster ster birh"
      "bake bake ster ster shee"
      "bake bake make make shee"
      "bake bake make make cred"
      "foot foot foot foot foot"; 
  grid-gap: 1rem;
  padding: 0 0.5rem 0 0.5rem;
}

.header__title {
  grid-area: head;
}

.column__heroes {
  grid-area: hero;
}

.column__wedding {
  grid-area: wedd;
}

.column__champagne {
  grid-area: cham;
}

.column__baker {
  grid-area: bake;
}

.column__villains {
  grid-area: vill;
}

.column__birth {
  grid-area: birh;
}

.column__steerage {
  grid-area: ster;
}

.column__makeup {
  grid-area: make;
}

.column__violin {
  grid-area: viol;
}

.column__man {
  grid-area: mans;
}

.column__jubilant {
  grid-area: jubi;
}

.column__pipe {
  grid-area: pipe;
}

.column__silver {
  grid-area: silv;
}

.column__sheep {
  grid-area: shee;
}

.column__credits {
  grid-area: cred;
}

.column__footer {
  grid-area: foot;
}

#divider-hide {
  display: none;
}

/* WINE AD */

.wine-holder {
  display: inline;
}

/* HEROES */

.heroes__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
}

.heroes__grid--item {
  grid-column: 1/1;
}

.heroes__grid--image {
  grid-column: 2/4;
}

.heroes--img {
  max-width: 100%;
}

/* WEDDING */

.column__wedding h3 {
  text-align: justify;
  text-align-last: justify;
  font-size: 1.2rem;
  letter-spacing: 9px;
  padding: 0 0 0.3rem 0;
}

/* CHAMPAGNE */

.column__champagne h3 {
  text-align: justify;
  text-align-last: justify;
  font-size: 1.2rem;
  letter-spacing: 3px;
  line-height: 21px;
  padding: 0 0 0.1rem 0;
}

.champ__holder--img {
  float: left;
  shape-outside: url("images/wine-holder.png");
  shape-margin: 2%;
}

/* VILLAINS */

.column__villains h1 {
    font-size: 3.3rem;
    text-align: justify;
    text-align-last: justify;
    letter-spacing: 4px;
    line-height: 30px;
    padding: 0 0 1rem 0;
  }
  
.column__villains h1:after {
    content: ”;
    display: inline-block;
    width: 100%;
}

.villains__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
}

.villains--mor {
  grid-column: 1/1;
}

.villains--irene {
  grid-column: 2/2;
}

.container__img--villain {
  float: right;
  padding: 0.4rem 0.2rem 0.2rem 0.2rem;
  width: 7rem;
  height: 7rem;
}

.container__content--villain {
  clear: left;
}

.villain-img {
  width: 100%;
  height: 100%;
}

/* VIOLIN */

.violin--ad {
  width: 100%;
  height: 95%;
  border: #280D03 solid 2px;
}

/* BAKER STREET */

.baker__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
}

.baker--img {
  border: #280D03 solid 2px;
}

.baker-street-img {
  width: 100%;
}

.column__baker h1 {
  letter-spacing: 3px;
  line-height: 40px;
  font-size: 2.7rem;
  padding: 0 0 0.3rem 0;
}

a.museum .finger__container{
  visibility: hidden;
}

a.museum:hover .finger__container{
  visibility: visible;
  transition: ease-in-out 0.5s;
}

a.museum:hover {
  text-decoration: underline;
}

/* MAN */

.column__man h3 {
  text-align: justify;
  text-align-last: justify;
  font-size: 1.2rem;
  line-height: 8px;
  padding: 0 0 0.4rem 0;
  letter-spacing: 3px;
}

.column__man p {
  font-family: 'Pigeon', 'PT Serif', 'Georgia', serif;
  font-weight: 400;
  font-size: 1rem;
  text-align: center;
  padding: 0.3rem 0 0.2rem 0;
}

/* JUBILANT */

.column__jubilant h3 {
  text-align: justify;
  text-align-last: justify;
  font-size: 1.2rem;
  letter-spacing: 5px;
}

/* SILVER */

.column__silver h3 {
  font-size: 1.2rem;
  letter-spacing: 0.2px;
  line-height: 8px;
  padding: 0 0 0.4rem 0;
  text-align: justify;
  text-align-last: justify;
  letter-spacing: 2px;
}

.finger__svg {
  max-height: 0.9rem;
  padding: 0 0 0 0.2rem;
}

a.silverscreen .finger__container{
  visibility: hidden;
}

a.silverscreen:hover .finger__container{
  visibility: visible;
  transition: ease-in-out 0.5s;
}

a.silverscreen:hover {
  text-decoration: underline;
}

/* PIPE AND SHEEP*/

.column__pipe, .column__sheep {
  border: #280D03 solid 2px;
  padding: 0.2rem;
}

/* BIRTH */

.column__birth h3 {
  letter-spacing: 8px;
  line-height: 8px;
  padding: 0 0 0.4rem 0;
  text-align: justify;
  text-align-last: justify;
}

.column__birth {
  text-align: justify;
}

/* STEERAGE */

.column__steerage {
  text-align: justify;
}

.column__steerage h3 {
  letter-spacing: 3.5px;
}

table {
  width: 100%;
  height: auto;
}

/* MAKEUP */

.column__makeup h2 {
  font-size: 2rem;
  text-align: justify;
  text-align-last: justify;
  margin-top: -1.5rem;
}

.makeup--img {
  width: 100%;
  padding: 0.3rem 0 0.3rem 0;
}

.price__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.price__container--item figcaption{
  text-align: center;
  text-align-last: center;
}

/* CREDITS */

.column__credits h3 {
  letter-spacing: 3px;
  line-height: 8px;
  padding: 0 0 0.4rem 0;
  text-align: justify;
  text-align-last: justify;
}

/* FOOTER */

footer {
  padding: 0 0 0.5rem 0;
}

.footer__container {
  padding: 0.3rem 0 0 0;
}
.footer__container a:hover {
  text-decoration: underline;
}

.copyright {
  position: sticky;
  float: left;
}

.typography-copyright {
  position: sticky;
  float: right;
}

@media (min-width: 950px) {

  .header__info--date {
    left: 40vw;
  }

  .heroes__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1rem;
  }
  
  .heroes__grid--item {
    grid-column: 1/1;
  }
  
  .heroes__grid--image {
    grid-column: 2/4;
  }

  .heroes--img {
    height: 90%;
  }

  .grid {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
        "head head head head head"
        "hero hero hero viol viol"
        "hero hero hero mans silv"
        "hero hero hero jubi silv"
        "wedd vill vill jubi silv"
        "wedd vill vill pipe silv"
        "cham vill vill pipe silv"
        "bake bake ster ster silv"
        "bake bake ster ster shee"
        "bake bake make make shee"
        "bake bake make make cred"
        "foot foot foot foot foot"; 
    grid-gap: 1rem;
    padding: 0 0.5rem 0 0.5rem;
  }
  

  /* HIDDEN  */

.column__sheep {
  display: block;
}

.column__champagne {
  display: block;
}

.column__pipe {
  display: block;
}

.column__man {
  display: block;
}

.column__violin {
  display: block;
}

.column__birth {
  display: block;
}

.column__credits {
  display: block;
}

}

@media (min-width: 770px) and (max-width: 950px) {

  .header__info--date {
    left: 40vw;
  }
}

.heroes__grid {
  grid-template-columns: 1fr;
}

.heroes__grid--item{
  grid-column: 1/1;
}

.heroes__grid--image {
  grid-column: 1/1;
}

.grid {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas: 
      "head head head head"
      "hero hero mans silv"
      "hero hero jubi silv"
      "hero hero jubi silv"
      "wedd vill vill silv"
      "wedd vill vill birh"
      "cham vill vill pipe"
      "bake bake ster ster"
      "bake bake ster ster"
      "bake bake make make"
      "bake bake make make"
      "foot foot foot foot"; 
}

.column__sheep {
  display: none;
}

.column__violin {
  display: none;
}

.column__credits {
  display: none;
}


@media (min-width: 500px) and (max-width: 770px){

  #divider-hide {
    display: block;
  }

  .grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
        "head"
        "head"
        "hero"
        "hero"
        "hero"
        "hero"
        "viol"
        "viol"
        "mans"
        "silv"
        "silv"
        "silv"
        "silv"
        "wedd"
        "wedd"
        "wedd"
        "vill"
        "vill"
        "vill"
        "vill"
        "vill"
        "vill"
        "vill"
        "pipe"
        "bake"
        "bake"
        "bake"
        "bake"
        "jubi"
        "jubi"
        "jubi"
        "birh"
        "ster"
        "ster"
        "ster"
        "book"
        "book"
        "cham"
        "cham"
        "shee"
        "make"
        "make"
        "make"
        "cred"
        "foot";
    grid-gap: 0.3rem;
  }

.title__container {
  height: 14rem;
  width: 100%;
}

/* TYPOGRAPHY   */

h1 {
  font-size: 3rem;
}

figcaption {
  font-size: 0.7rem;
}

h3 {
  font-size: 3rem;
}

h4 {
  font-size: 0.8rem;
}

p:first-child:first-letter {
  float: left;
  font-family: miller-text, 'Georgia', serif;
  font-size: 2.5rem;
  line-height: 30px;
  padding: 3px 3px 0 0;
}

/* HIDDEN  */

.column__sheep {
  display: none;
}

.column__champagne {
  display: none;
}

.column__pipe {
  display: none;
}

.column__man {
  display: none;
}

.column__violin {
  display: none;
}

/* HEADER */

.header__info--issue {
  visibility: none;
  color: #D4CCBA;
  margin-left: 0rem;
}

.header__info--price {
  visibility: none;
  display: none
}

.header__info--date {
  left: 34vw;
}

/* DYNAMIC DUO */

.heroes__grid {
  grid-template-columns: 1fr 1fr;
}

.heroes__grid--image {
  grid-column: 2/2;
}

.container__heroes--img {
  text-align: center;
}

.heroes--img {
  height: 23rem;
}

/* SILVER  */

.column__silver {
  grid-template-columns: 1fr 1fr;
}

.column__silver h3 {
  font-size: 3rem;
  line-height: 24px;
  padding: 0 0 0.7rem 0;
  text-align: center;
  letter-spacing: 3px;
  margin-top: -0.6rem;
}

.column__wedding h3 {
  text-align: center;
  letter-spacing: 22px;
  padding: 0 0 0rem 0;
  font-size: 3rem;
  margin-top: -0.7rem;
  margin-bottom: -0.5rem;
}

.column__villains h1 {
  letter-spacing: 12px;
  padding-top: 0.5rem
}

.container__img--villain {
  padding: 0.4rem 0.4rem 0rem 0.4rem;
}

.column__baker h1 {
  font-size: 3rem;
}

.column__steerage h3 {
  letter-spacing: 12px;
  font-size: 3rem;
  text-align: justify;
  text-align-last: justify;
  line-height: 45px;
}

.column__birth h3 {
  letter-spacing: 15px;
  line-height: 26px;
  padding: 0 0 0.7rem 0;
  font-size: 3rem;
  margin-top: 0.3rem;
}

.column__jubilant h3 {
  letter-spacing: 9px;
  font-size: 3rem;
  margin-top: -0.6rem;
  margin-bottom: -0.3rem;
}

.column__makeup h2 {
  font-size: 3rem;
  margin-top: -2rem;
  line-height: 45px;
  letter-spacing: 10px;
}

.column__credits h3 {
  line-height: 17px;
  padding: 0 0 0.8rem 0;
  font-size: 3rem;
  margin-top: 0.5rem;
  letter-spacing: 5px;
}

@media (min-width: 300px) and (max-width: 500px){

  #divider-hide {
    display: block;
  }

.title__container {
  height: 13.5rem;
  width: 100%;
}

/* HEROES */

.heroes__grid {
  grid-template-columns: 1fr;
}

.heroes__grid--image {
  grid-column: 1/1;
}

.heroes--img {
  text-align: center;
}

/* TYPOGRAPHY */

h1 {
  letter-spacing: 0px;
  padding: 0 0 0.5rem 0;
  font-size: 2.7rem;
}

figcaption {
  padding: 0 0 0.1rem 0;
}

h3 {
  font-size: 2.7rem;
}

.column__wedding h3 {
  letter-spacing: 23px;
  font-size: 2.7rem;
  margin-top: -0.7rem;
  margin-bottom: -0.3rem;
  }

.column__silver h3 {
  margin-top: -0.7rem;
  font-size: 2.7rem;
  line-height: 17px;
}

  .column__villains h1 {
  font-size: 2.7rem;
  padding: 0 0 0.6rem 0;
  letter-spacing: 16px;
  }

  .column__baker h1 {
  font-size: 2.7rem;
  letter-spacing: 2px;
  }

  .column__jubilant h3 {
  letter-spacing: 9px;
  font-size: 2.7rem;
  margin-top: -0.5rem;
  margin-bottom: -0.2rem;
  }

  .column__birth h3 {
  letter-spacing: 15px;
  font-size: 2.7rem;
  }

  .column__steerage h3 {
  letter-spacing: 3px;
  font-size: 2.7rem;
  }

  .column__makeup h2 {
  font-size: 2.7rem;
  letter-spacing: 8px;
  }

  .column__credits h3 {
  font-size: 2.7rem;
margin-top: 0.7rem;
  }
}
}