@import "./reset.css";
@import "./footer.css";
@import "./buttons.css";
@import "./led.css";
@import "./typography.css";
@import "./animations.css";
@import "./christmaslights.css";
@import "./romancehearts.css";


body {
  background-color: #1c294f;
  box-sizing: border-box;
  text-align: center;
}

.intro {
  padding-bottom: 25px;
}

.intro h1 {
  padding-top: 2%;
  padding-left: 5px;
  padding-right: 5px;
}

.header img {
  padding-top: 10%;
}

header {
  padding-top: 1.5%;
  line-height: 2.5rem;
  padding-bottom: 10px;
}

.subhead {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-left: 10%;
  padding-right: 10%;
  line-height: 2.25rem;
}

/* Polaroid Section */

.printer-slot-container {
  display: flex;
  justify-items: center;
  align-items: center;
  flex-direction: column;
  padding-left: 20%;
  padding-right: 20%;
}

.printer-slot {
  border-radius: 5px;
  margin-bottom: 0;
  transform: translateY(9px);
  width: 585px;
  height: 1px;
  border: solid 2px rgba(22, 22, 22, 0.3);
  background-color: rgb(22, 22, 22);
}

.section {
  display: flex;
  justify-items: center;
  align-items: center;
  flex-direction: column;
  padding-left: 20%;
  padding-right: 20%;
  padding-top: 30px;
}

.poem-container {
  display: flex;
  justify-content: center;
  background-color: rgb(245, 245, 245);
  width: 500px;
  height: 500px;
  padding-bottom: 110px;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  border: solid rgba(186, 183, 183, 0.5) 2px;
  box-shadow: 3px 9px 14px rgba(24, 24, 24, 0.7);


  /* New code to try to fix initial rectangle appearing early and makes state persistent */
  animation: drop 3s ease-out forwards;


}

/* Temporarily commented out to see if this will start working again */

/* #btnDownload {
  visibility: hidden;
  display: none;
} */


.changePhoto {
  position: absolute;
  margin: 0 auto;
}

.overlay {
  position: absolute;
  background-color: hsla(30, 33%, 25%, 0.7);
  box-sizing: border-box;
  width: 500px;
  height: 500px;
} 




.poem-text {
  position: absolute;
  box-sizing: border-box;
  text-align: left;
  display: table;
  table-layout: fixed;
  width: 500px;
  height: 500px;
  padding-left: 25px;
  padding-right: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;

}

/* Controls the formatting behaviour of each line */

#first,
#second,
#third {
  display: flex;
  /* align-items: space-around; */
  text-align: left;
  max-width: 100%;
  /* padding-left: 6%; */
}

#first,
#second {
  padding-bottom: 5%;
}

.poem-caption {
  margin: 0 auto;
  padding-top: 10px;
  line-height: 2.25rem;
  font-size: 1.75rem;
  text-align: center;
  font-family: "Dancing Script", cursive;
  color: black;
}

/* End of polaroid section */

/* Credits */

.poem-project-explainer-container {
  padding-left: 20%;
  padding-right: 20%;
}
.poem-project-explainer-container a {
  font-weight: 900;
}

.logos {
  display: inline-block;
  padding-left: 2.5%;
  padding-right: 2.5%;
  max-width: 95%;
  flex-wrap: wrap;
  padding-bottom: 2%;
}

.redcarlogo {
  max-width: 40%;
  padding-right: 2%;
  padding-bottom: 2%;
}

.mbrlogo {
  max-width: 20%;
  padding-bottom: 2%;
}

.councillogo {
  padding-right: 2%;
  max-height: 12vh;
}

/* Navigation */

.nav-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

.row {
  display: flex;
  flex-direction: row;
}

.nav-container a {
  display: flex;
  justify-content: space-around;
  justify-content: center;
  letter-spacing: 1.5px;
  font-size: 2.75rem;
  text-decoration: none;
  color: #ffffff;
  padding-right: 2vw;
  padding-left: 2vw;
}

.nav-container a:hover {
  color: brown;
}

.hidden {
  display: none;
}


#smalldisplaycaption {
  font-size: 1.25rem;
  display: none;
}

#hashtag-bottom {
  display: none;
}

/* 
Media Queries */

/* Big Screen */

@media only screen and (max-width: 1290px) {
  .poem-text {
    line-height: 130%;
  }

}

/* iPad and iPad Pro Portrait */

@media only screen and (max-width: 1024px) {
  .zoom {
    transform: scale(0.7);
  }

  #first,
  #second {
    padding-bottom: 7%;
  }

  .poem-text {
    line-height: 3vh;
  }
}

/* iPad Portrait */

@media only screen and (min-width: 768px) and (max-width: 959px) {
  .intro {
    padding-top: 5%;
  }
  .intro h1 {
    font-size: 3rem;
    line-height: 5rem;
  }

  h2 {
    font-size: 2.5vw;
  }

  .subhead {
    font-size: 3rem;
  }

  .poem-text {
    line-height: 2.65rem;
  }

  .btn-push {
    width: 50%;
    padding-bottom: 5px;
    padding-top: 5px;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 2.25vw;
  }

  @keyframes ipadportraitfade {
    0% {
      opacity: 1;
      width: 500px;
    }
    25% {
      opacity: 1;
      width: 500px;
    }
    50% {
      opacity: 1;
      width: 500px;
    }
    75% {
      opacity: 1;
      width: 500px;
    }
    100% {
      opacity: 1;
      width: 500px;
    }
  }

  .overlay {
    animation: ipadportraitfade 4s linear 1;
  }
}

/* iPad Landscape */

@media only screen 
and (min-width: 568px) 
and (max-width: 1024px)
and (orientation: landscape) 
and (-webkit-min-device-pixel-ratio: 2) {

  .intro h1 {
  padding-top: 3%;
    font-size: 6vw;
    line-height: 2.7rem; 
    line-height: 7vw;
  }
  .led-box {
    padding-top: 0px;
  }

  h2 {
    padding-top: 0px;
    line-height: 2.5rem;
  }

  .subhead {
    padding-top: 25px;
    line-height: 1.5rem;
  }

  .printer-slot {
    width: 82vw;
  }

  .poem-container {
    width: 405px;
    height: 405px;
    padding-top: 20px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .overlay {
    max-width: 400px;
    max-height: 400px;
  }

  .poem-container img {
    max-width: 400px;
  }

  .poem-text {
    font-size: 22px;
    line-height: 1.75rem;
    width: 400px;
    height: 400px;
  }

  #first,
  #second {
    padding-bottom: 5%;
  }

  #first,
  #second #third {
    padding-right: 8%;
    max-width: 95%;
  }

  .poem-caption {
    font-size: 1.5rem;
  }

  .button-container {
    padding-top: 15px;
  }

  .btn-push {
    font-size: 3.75vw;
    width: 30%;
  }

  #hashtag-top {
    display: none;
  }

  #hashtag-bottom {
    padding-top: 15px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #largecaptiondisplay {
    display: none;
  }
}

/* iPad Pro Landscape */

@media only screen 
and (min-width: 1020px) 
and (max-width: 1366px) 
and (orientation: landscape)   
and (-webkit-min-device-pixel-ratio: 2) 
{
  .printer-slot {
    width: 50vw;
  }

  .poem-text {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .btn-push {
    font-size: 1.5rem;
    width: 100%;
    padding-top: 3px;
    padding-bottom: 5px;
  }

  #first,
  #second {
    padding-bottom: 6%;
  }

  @keyframes ipadlandscapeshuffle {
    0% {
      z-index: -10;
      opacity: 0;
      width: 100%;
      height: 400px;
      padding-bottom: 0px;
    }
    50% {
      z-index: -10;
      opacity: 0;
      width: 100%;
      height: 400px;
      padding-bottom: 0px;
    }

    75% {
      z-index: 1;
      opacity: 0.2;
      filter: hue-rotate(130deg) sepia(80%);
      background: linear-gradient(to bottom, white, transparent, white);
      width: 100%;
      height: 400px;
      padding-bottom: 0px;
    }

    80% {
      opacity: 0.5;
      width: 100%;
      height: 400px;
      padding-bottom: 0px;
    }

    100% {
      height: 79%;
      z-index: 1;
      opacity: 1;
      width: 100%;
      height: 400px;
      padding-bottom: 0px;
    }
  }

  @keyframes ipadlandscapedrop {
    0% {
      background-color: rgb(232, 229, 229);
      border-top: none;
    opacity: 1; /* Changed from display: none; / visibility: hidden; */
      height: 0px;
      transform: translateY(-22px);
      box-shadow: 3px 29px 14px rgba(24, 24, 24, 0.7);
      max-width: 420px;
    }

    75% {
      border-top: none;
    opacity: 1; /* Changed from display: none; / visibility: hidden; */
      height: 420px;
      transform: translateY(-22px);
      box-shadow: 3px 24px 14px rgba(24, 24, 24, 0.7);
      max-width: 420px;
    }

    90% {
      border-top: none;
    opacity: 1; /* Changed from display: none; / visibility: hidden; */
      height: 420px;
      transform: translateY(-22px);
      transform: skew(0.3deg, -1deg);
      box-shadow: 3px 14px 14px rgba(24, 24, 24, 0.7);
      max-width: 420px;
    }

    100% {
      height: 420px;
      transform: translateY(-4px);
      box-shadow: 3px 10px 14px rgba(24, 24, 24, 0.7);
      max-width: 420px;
    }
  }

  .poem-container {
    animation: ipadlandscapedrop 3s linear 1;
    animation-duration: 4s;
  }

  .poem-container img {
    animation: ipadlandscapeshuffle 3s linear 1;
    animation-duration: 4s;
  }
}

/* Microsoft Surface Duo Portrait */

@media only screen and (max-width: 540px) {
  header {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-top: 10%;
    padding-left: 20%;
    padding-right: 20%;
    font-size: 2rem;
  }

  .intro {
    padding-left: 10px;
    padding-right: 10px;
  }

  .credit {
    font-size: 0.75rem;
  }

  .printer-slot {
    width: 70vw;
  }

  .poem-container {
    width: 400px;
    height: 400px;
    padding-bottom: 2%;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 100%;
  }

  .overlay {
    width: 57.6%;
    height: 300px;
    max-width: 100%;
  }

  .poem-text {
    width: 400px;
    height: 100%;
    padding-left: 25px;
    padding-right: 10px;
    max-width: 100%;
    line-height: 2rem;
    font-size: 1.25rem;
  }

  figure img {
    width: 400px;
    max-width: 100%;
    height: 300px;
  }

  .poem-caption {
    font-size: 1.25rem;
    line-height: 2rem;
  }

  .btn-push {
    width: 30%;
    padding-bottom: 5px;
    padding-top: 5px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .logos {
    display: flex;
    flex-direction: column;
  }

  @keyframes surfaceduodrop {
    0% {
      background-color: rgb(232, 229, 229);
      border-top: none;
    opacity: 1; /* Changed from display: none; / visibility: hidden; */
    height: 0px;
      transform: translateY(-22px);
      box-shadow: 3px 29px 14px rgba(24, 24, 24, 0.7);
      max-width: 311px;
    }

    75% {
      border-top: none;
    opacity: 1; /* Changed from display: none; / visibility: hidden; */
      height: 400px;
      transform: translateY(-22px);
      box-shadow: 3px 24px 14px rgba(24, 24, 24, 0.7);
      max-width: 311px;
    }

    90% {
      border-top: none;
    opacity: 0; /* Changed from display: none; / visibility: hidden; */
      height: 400px;
      transform: translateY(-22px);
      transform: skew(0.3deg, -1deg);
      box-shadow: 3px 14px 14px rgba(24, 24, 24, 0.7);
      max-width: 311px;
    }

    100% {
      height: 400px;
      transform: translateY(-4px);
      box-shadow: 3px 10px 14px rgba(24, 24, 24, 0.7);
      max-width: 311px;
    }
  }

  @keyframes surfaceduoshuffle {
    0% {
      z-index: -10;
      opacity: 0;
      width: 100%;
      height: 300px;
      padding-bottom: 1%;
    }
    50% {
      z-index: -10;
      opacity: 0;
      width: 100%;
      height: 300px;
      padding-bottom: 1%;
    }

    75% {
      z-index: 1;
      opacity: 0.2;
      filter: hue-rotate(130deg) sepia(80%);
      background: linear-gradient(to bottom, white, transparent, white);
      width: 100%;
      height: 300px;
      padding-bottom: 1%;
    }

    80% {
      opacity: 0.5;
      width: 100%;
      height: 300px;
      padding-bottom: 1%;
    }

    100% {
      height: 79%;
      z-index: 1;
      opacity: 1;
      width: 100%;
      height: 300px;
      padding-bottom: 1%;
    }
  }

  @keyframes surfaceduofade {
    0% {
      opacity: 0;
      width: 311px;
    }
    25% {
      opacity: 0;
      width: 311px;
    }
    50% {
      opacity: 0;
      width: 311px;
    }
    75% {
      opacity: 0;
      width: 311px;
    }
    100% {
      opacity: 1;
      width: 311px;
    }
  }

  @keyframes captionsurfaceduofade {
    0% {
      opacity: 0;
      font-size: 1.25rem;
    }
    25% {
      opacity: 0;
      font-size: 1.25rem;
      display: flex;
      flex: wrap;
    }
    50% {
      opacity: 0;
      font-size: 1.25rem;
      display: flex;
      flex: wrap;
    }
    75% {
      opacity: 0;
      font-size: 1.25rem;
      display: flex;
      flex: wrap;
    }
    100% {
      opacity: 1;
      font-size: 1.25rem;
      display: flex;
      flex: wrap;
    }
  }

  .overlay {
    animation: surfaceduofade 4s linear 1;
  }

  .poem-container {
    animation: surfaceduodrop 3s linear 1;
    animation-duration: 4s;
  }

  .poem-container img {
    animation: surfaceduoshuffle 3s linear 1;
    animation-duration: 4s;
  }

  .poem-text {
    animation: fade 3s linear 1;
    animation-duration: 4s;
  }

  figcaption {
    animation: captionsurfaceduofade 3s linear 1;
    animation-duration: 6s;
  }
}

/* iPhone 6/7/8/8+/X Landscape */

@media only screen and (min-width: 568px) and (max-width: 824px) and (orientation: landscape) {
  .poem-text {
    font-size: 1.5rem;
    max-width: 95%;
  }

  @keyframes iphonelandscapeshuffle {
    0% {
      z-index: -10;
      opacity: 0;
      width: 100%;
      max-height: 400px;
      padding-bottom: 1%;
    }
    50% {
      z-index: -10;
      opacity: 0;
      width: 100%;
      max-height: 400px;
      padding-bottom: 1%;
    }

    75% {
      z-index: 1;
      opacity: 0.2;
      filter: hue-rotate(130deg) sepia(80%);
      background: linear-gradient(to bottom, white, transparent, white);
      width: 100%;
      max-height: 400px;
      padding-bottom: 1%;
    }

    80% {
      opacity: 0.5;
      width: 100%;
      max-height: 400px;
      padding-bottom: 1%;
    }

    100% {
      z-index: 1;
      opacity: 1;
      width: 100%;
      max-height: 400px;
      padding-bottom: 1%;
    }
  }

  /* fade to go in here */

  @keyframes overlayiphonelandscapefade {
    0% {
      opacity: 0;
      font-size: 1.25rem;
    }
    25% {
      opacity: 0;
      font-size: 1.25rem;
      display: flex;
      flex: wrap;
      width: 400px;
    }
    50% {
      opacity: 0;
      font-size: 1.25rem;
      display: flex;
      flex: wrap;
      width: 400px;
    }
    75% {
      opacity: 0;
      font-size: 1.25rem;
      display: flex;
      flex: wrap;
      width: 400px;
    }
    100% {
      opacity: 1;
      font-size: 1.25rem;
      display: flex;
      flex: wrap;
      width: 400px;
    }
  }

  .poem-container img {
    animation: iphonelandscapeshuffle 3s linear 1;
    animation-duration: 4s;
  }

  .overlay {
    animation: overlayiphonelandscapefade 4s linear 1;
  }
}

/* iPhone 6/7/8/8+/X Portrait */

@media only screen and (max-width: 414px) {
  header {
    padding-left: 0px;
    padding-right: 0px;
  }

  .intro h1 {
    font-size: 2.25rem;
    line-height: 2.3rem;
  }

  .subhead {
    padding-left: 5%;
    padding-right: 5%;
  }

  h2 {
    font-size: 6vw;
  }

  .credit {
    font-size: 1rem;
    line-height: 1.5rem;
    width: 75%;
  }

  .section {
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 10px;
  }

  .printer-slot {
    width: 94vw;
  }

  .poem-container {
    padding-top: 12px;
    max-width: 320px;
    max-height: 320px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 74px;
  }

  .poem-container img {
    max-width: 320px;
  }

  .overlay {
    width: 321px;
    max-width: 100%;
    height: 300px;
  }

  .poem-text {
    line-height: 1.65rem;
  }

  #first,
  #second {
    padding-bottom: 6%;
  }

  #first,
  #second,
  #third {
    max-width: 95%;
  }

  #hashtag-top {
    display: none;
  }

  #hashtag-bottom {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .generator-button-section {
    padding-left: 0px;
    padding-right: 0px;
  }

  .button-container {
    padding-top: 10px;
    padding-right: 34px;
    display: flex;
    flex-direction: column;
  }

  .btn-push {
    font-size: 5.75vw;
    width: 100%;
  }

  @keyframes overlayiphone6fade {
    0% {
      opacity: 0;
      font-size: 1.25rem;
    }
    25% {
      opacity: 0;
      font-size: 1.25rem;
      display: flex;
      flex: wrap;
      width: 280px;
    }
    50% {
      opacity: 0;
      font-size: 1.25rem;
      display: flex;
      flex: wrap;
      width: 320px;
    }
    75% {
      opacity: 0;
      font-size: 1.25rem;
      display: flex;
      flex: wrap;
      width: 320px;
    }
    100% {
      opacity: 1;
      font-size: 1.25rem;
      display: flex;
      flex: wrap;
      width: 320px;
    }
  }

  @keyframes iphone6drop {
    0% {
      background-color: rgb(232, 229, 229);
      border-top: none;
    opacity: 1; /* Changed from display: none; / visibility: hidden; */
      height: 0px;
      transform: translateY(-22px);
      box-shadow: 3px 29px 14px rgba(24, 24, 24, 0.7);
      max-width: 321px;
    }

    75% {
      border-top: none;
    opacity: 1; /* Changed from display: none; / visibility: hidden; */
      height: 400px;
      transform: translateY(-22px);
      box-shadow: 3px 24px 14px rgba(24, 24, 24, 0.7);
      max-width: 321px;
    }

    90% {
      border-top: none;
    opacity: 1; /* Changed from display: none; / visibility: hidden; */
      height: 400px;
      transform: translateY(-22px);
      transform: skew(0.3deg, -1deg);
      box-shadow: 3px 14px 14px rgba(24, 24, 24, 0.7);
      max-width: 321px;
    }

    100% {
      height: 400px;
      transform: translateY(-4px);
      box-shadow: 3px 10px 14px rgba(24, 24, 24, 0.7);
      max-width: 321px;
    }
  }

  .poem-container {
    animation: iphone6drop 3s linear 1;
    animation-duration: 4s;
  }

  .overlay {
    animation: overlayiphone6fade 4s linear 1;
  }
}

/* iPhone 5/S/SE (Older model SE) Portrait */

@media only screen and (max-width: 320px) {
  header {
    padding-left: 0px;
    padding-right: 0px;
  }

  .intro h1 {
    font-size: 2rem;
    line-height: 2rem;
  }

  .credit {
    line-height: 1.4rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  .printer-slot {
    width: 97vw;
  }

  .poem-container {
    padding-top: 12px;
    max-width: 280px;
    max-height: 280px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 107px;
  }

  .poem-container img {
    max-width: 280px;
  }

  .overlay {
    width: 281px;
    max-width: 100%;
    height: 300px;
  }

  #first,
  #second {
    padding-bottom: 7%;
  }

  .poem-caption {
    padding-top: 1px;
  }

  #smalldisplaycaption {
    display: flex;
    justify-content: center;
    line-height: 1.5rem;
    padding-top: 3px;
  }

  #hashtag-top {
    display: none;
  }

  #hashtag-bottom {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .poem-text {
    line-height: 1.65rem;
    padding-left: 15px;
  }

  .generator-button-section {
    padding-left: 0px;
    padding-right: 0px;
  }

  .button-container {
    padding-top: 10px;
    padding-right: 34px;
    display: flex;
    flex-direction: column;
  }

  .btn-push {
    font-size: 5.75vw;
    width: 100%;
  }

  @keyframes iphone5drop {
    0% {
      background-color: rgb(232, 229, 229);
      border-top: none;
    opacity: 1; /* Changed from display: none; / visibility: hidden; */
      height: 0px;
      transform: translateY(-22px);
      box-shadow: 3px 29px 14px rgba(24, 24, 24, 0.7);
      max-width: 281px;
    }

    75% {
      border-top: none;
    opacity: 1; /* Changed from display: none; / visibility: hidden; */
      height: 400px;
      transform: translateY(-22px);
      box-shadow: 3px 24px 14px rgba(24, 24, 24, 0.7);
      max-width: 281px;
    }

    90% {
      border-top: none;
    opacity: 1; /* Changed from display: none; / visibility: hidden; */
      height: 400px;
      transform: translateY(-22px);
      transform: skew(0.3deg, -1deg);
      box-shadow: 3px 14px 14px rgba(24, 24, 24, 0.7);
      max-width: 281px;
    }

    100% {
      height: 400px;
      transform: translateY(-4px);
      box-shadow: 3px 10px 14px rgba(24, 24, 24, 0.7);
      max-width: 281px;
    }
  }

  @keyframes overlayiphone5fade {
    0% {
      opacity: 0;
      font-size: 1.25rem;
    }
    25% {
      opacity: 0;
      font-size: 1.25rem;
      display: flex;
      flex: wrap;
      width: 280px;
    }
    50% {
      opacity: 0;
      font-size: 1.25rem;
      display: flex;
      flex: wrap;
      width: 280px;
    }
    75% {
      opacity: 0;
      font-size: 1.25rem;
      display: flex;
      flex: wrap;
      width: 280px;
    }
    100% {
      opacity: 1;
      font-size: 1.25rem;
      display: flex;
      flex: wrap;
      width: 280px;
    }
  }

  .overlay {
    animation: overlayiphone5fade 4s linear 1;
  }

  .poem-container {
    animation: iphone5drop 3s linear 1;
  }

  #largedisplaycaption {
    display: none;
  }
}