body {
  background-color: pink;
  margin: 0px;
}

.chooser {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

/** Not mobile **/
@media(min-aspect-ratio: 1.0001) {
  .header {
    text-orientation: upright;
    writing-mode: vertical-lr;
    font-size: 3vw;
    letter-spacing: -.4em;
    font-weight: bold;
  }

  .titleText {
    position:absolute;
    text-align: center;
    height: 90%;
    left: 60px;
    margin-left: 20px;
  }

  .artTitleText {
    background-image: repeating-linear-gradient(in oklab 127deg, #A15, #613F75 8px,#613F75 5px, #613F75 10px);    background-clip: text;
    color: transparent;
    text-shadow: none; /** We need to get rid of text shadow **/
  }

  .images {
    margin-top: 10vh;
    margin-right: 10vh;
  }

  .VoteContainer {
    width: 100%;
    bottom: 0px;
  }
}

/** Desktop Layout **/
@media(max-aspect-ratio: 1.8) and (min-aspect-ratio: 1.0) {
  .media {
    display: grid;
    grid-template-columns: 400px auto;
    grid-template-rows: .7fr 1fr;
    grid-template-areas:
      "header images"
      "header footer";
    grid-gap: 20px;
    justify-items: center;
    height: 100%;
  }

  /** Lazy fix to misaligned footer **/
  .footer {
    margin-right: 10vh;
  }
}

/** Mobile layout **/
@media(max-aspect-ratio: 1.0001) {
  .media {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows:1fr auto auto;
    grid-template-areas:
      "header"
      "images"
      "footer";
    grid-gap: 20px;
  }

  .titleText {
    text-align: center;
    font-size: 92px;
  }

  .images {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .VoteContainer {
    width: 100vw;
    position: relative;
  }
}

/** Landscape Layout **/
@media(min-aspect-ratio: 1.8) {
  .media {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows:1fr;
    grid-template-areas:
      "header images footer";
    grid-gap: 20px;
  }

  .footer {
    align-self: center;
  }
}

.header {
  grid-area: header;
  color: #aed4e6;
  text-shadow: black 1px 2px 2px;
}

.images {
  grid-area: images;
}

.footer {
  grid-area: footer;
  text-align: center;
  height: 13vh;
}

.btnYes {
  background-image: url("Mona_Lisa_headcrop.jpg");
  width: 9vh;
  height: 11vh;
  background-size: cover;
  background-color: transparent;
  color: white;
  font-size: 2vh;
  cursor: pointer;
  background-repeat: no-repeat;
}

.btnNo {
  background-image: url("toilet.png");
  width: 9vh;
  height: 11vh;
  background-size: cover;
  background-color: pink;
  color: black;
  font-size: 2vh;
  cursor: pointer;
  background-repeat: no-repeat;
}

.footer > div > p {
  font-size: 2vh;
  margin: 0px;
}

.ArtQuestionText {
  font-size: 2vh;
  font-weight: bold;
}

.plusOne, .minusOne {
  position: relative;
  animation: translateUp 3s forwards linear;
  height: 0px;
}

.plusOne > div, .minusOne > div{
  position:relative;
  left: -10px;
  top: -100px;
  animation: upDown 1.0s alternate infinite ease-in-out;
  width:100%;
  color: #c1ff9b;
  font-weight: bold;
  text-shadow: black 2px 2px 2px;
}

.minusOne > div {
  color: #E63946;
}

@keyframes upDown {
  to { transform: translatex(100px);}
}
@keyframes translateUp {
  from { opacity: 1; }
  to { transform: translatey(-400px) translatex(100px); opacity: 0;}
}

.VoteContainer {
  display: flex;
  justify-content: space-between;
}

.VoteShareYes {
  background-color: #c1ff9b;
  height: 10vh;
  bottom: 0px;
  left: 0%;
  z-index: -1;
  text-align: start;
  align-content: center;
  font-size: 2vh;
  overflow: hidden;
}

.VoteShareYes > p {
  padding-left: 2em;
}

.VoteShareNo {
  background-color: #E63946;
  height: 10vh;
  right: 0%;
  bottom: 0px;
  z-index: -1;
  text-align: end;
  align-content: center;
  font-size: 2vh;
  overflow: hidden;
}

.VoteShareNo > p {
  padding-right: 2em;
}