@charset "UTF-8";


.wrapper {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 800px; 
}


.container {
  display: inline-block;
  outline: 1px solid #cc5959;
  border: none;
  cursor: pointer;
  position: absolute; 
  width: 95%;
  max-width: 1400px;
  margin: 0;
  overflow: hidden;
}


.text-output {
  font-size: 5vw;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  letter-spacing: 0px;
  word-spacing: 0px;
  transition: letter-spacing 0.5s ease, word-spacing 0.5s ease;
  white-space: normal;
  word-break: break-word;
}


.container.expand:hover .text-output {
  letter-spacing: 5vw;
  word-spacing: 18px;
}


.container.shrink:hover .text-output {
  letter-spacing: -3px;
  word-spacing: -6px;
}
  
html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.box-one {
  width: 212px;
  height: 385px;
  padding: 12px;
  top: 1px;
  left: 1px;
  background: #fff6cd;
  outline: 1px solid #ed719e;
}
.box-one .text-output {
  font-size: 72px;
  letter-spacing: 0.0px;
  transition: letter-spacing 0.5s ease;
}
.box-one:hover > .text-output {
  letter-spacing: 18.0px;
}

.box-two {
  width: 400px;
  height: 166px;
  padding: 12px;
  top: -799px;
  left: 239px;
  background: #ff94bf;
  outline: 1px solid #ed719e;
}
.box-two .text-output {
  font-size: 72px;
  letter-spacing: 0.0px;
  transition: letter-spacing 0.5s ease;
}
.box-two:hover > .text-output {
  letter-spacing: -3.0px;
}

.box-three {
  width: 214px;
  height: 235px;
  padding: 12px;
  top: -1188px;
  left: 0px;
  background: #964d22;
  outline: 1px solid #ed719e;
}
.box-three .text-output {
  font-size: 72px;
  letter-spacing: 0.0px;
  transition: letter-spacing 0.5s ease;
}
.box-three:hover > .text-output {
  letter-spacing: 18.0px;
}

.box-four {
  width: 186px;
  height: 194px;
  padding: 12px;
  top: -2207px;
  left: 240px;
  background: #ffc600;
  outline: 1px solid #ed719e;
}
.box-four .text-output {
  font-size: 72px;
  letter-spacing: 0.0px;
  transition: letter-spacing 0.5s ease;
}
.box-four:hover > .text-output {
  letter-spacing: -3.0px;
}

.box-five {
  width: 400px;
  height: 232px;
  padding: 12px;
  top: -2787px;
  left: 240px;
  background: #c9baa0;
  outline: 1px solid #ed719e;
}
.box-five .text-output {
  font-size: 72px;
  letter-spacing: 0.0px;
  transition: letter-spacing 0.5s ease;
}
.box-five:hover > .text-output {
  letter-spacing: 18.0px;
}

.box-six {
  width: 187px;
  height: 193px;
  padding: 12px;
  top: -3806px;
  left: 452px;
  background: #ffffff;
  outline: 1px solid #ed719e;
}
.box-six .text-output {
  font-size: 72px;
  letter-spacing: 0.0px;
  transition: letter-spacing 0.5s ease;
}
.box-six:hover > .text-output {
  letter-spacing: -3.0px;
}

.box-seven {
  width: 400px;
  height: 384px;
  padding: 12px;
  top: -4129px;
  left: 240px;
  background: #ff2a00;
  outline: 1px solid #ed719e;
}
.box-seven .text-output {
  font-size: 72px;
  letter-spacing: 0.0px;
  transition: letter-spacing 0.5s ease;
}
.box-seven:hover > .text-output {
  letter-spacing: 18.0px;
}

.box-eight {
  width: 182px;
  height: 166px;
  padding: 12px;
  top: -5599px;
  left: 666px;
  background: #fda64d;
  outline: 1px solid #ed719e;
}
.box-eight .text-output {
  font-size: 72px;
  letter-spacing: 0.0px;
  transition: letter-spacing 0.5s ease;
}
.box-eight:hover > .text-output {
  letter-spacing: -3.0px;
}

.box-nine {
  width: 337px;
  height: 383px;
  padding: 12px;
  top: -5728px;
  left: 1154px;
  background: #b36a00;
  outline: 1px solid #ed719e;
}
.box-nine .text-output {
  font-size: 72px;
  letter-spacing: 0.0px;
  transition: letter-spacing 0.5s ease;
}
.box-nine:hover > .text-output {
  letter-spacing: -3.0px;
}

.box-ten {
  width: 462px;
  height: 89px;
  padding: 12px;
  top: -6529px;
  left: 666px;
  background: #8b6b54;
  outline: 1px solid #ed719e;
}
.box-ten .text-output {
  font-size: 72px;
  letter-spacing: 0.0px;
  transition: letter-spacing 0.5s ease;
}
.box-ten:hover > .text-output {
  letter-spacing: 18.0px;
}

.box-eleven {
  width: 66px;
  height: 645px;
  padding: 12px;
  top: -7999px;
  left: 1153px;
  background: #00ffa4;
  outline: 1px solid #ed719e;
}
.box-eleven .text-output {
  font-size: 72px;
  letter-spacing: 0.0px;
  transition: letter-spacing 0.5s ease;
}
.box-eleven:hover > .text-output {
  letter-spacing: -3.0px;
}

.box-twelve {
  width: 244px;
  height: 345px;
  padding: 12px;
  top: -8799px;
  left: 1246px;
  background: #4e7dff;
  outline: 1px solid #ed719e;
}
.box-twelve .text-output {
  font-size: 72px;
  letter-spacing: 0.0px;
  transition: letter-spacing 0.5s ease;
}
.box-twelve:hover > .text-output {
  letter-spacing: 18.0px;
}

.box-thirteen {
  width: 254px;
  height: 166px;
  padding: 12px;
  top: -9599px;
  left: 873px;
  background: #f5ff71;
  outline: 1px solid #ed719e;
}
.box-thirteen .text-output {
  font-size: 72px;
  letter-spacing: 0.0px;
  transition: letter-spacing 0.5s ease;
}
.box-thirteen:hover > .text-output {
  letter-spacing: -3.0px;
}

.box-fourteen {
  width: 245px;
  height: 275px;
  padding: 12px;
  top: -10029px;
  left: 1245px;
  background: #e7ffe7;
  outline: 1px solid #ed719e;
}
.box-fourteen .text-output {
  font-size: 72px;
  letter-spacing: 0.0px;
  transition: letter-spacing 0.5s ease;
}
.box-fourteen:hover > .text-output {
  letter-spacing: 18.0px;
}

.box-fifteen {
  width: 254px;
  height: 452px;
  padding: 12px;
  top: -11007px;
  left: 873px;
  background: #ffe300;
  outline: 1px solid #ed719e;
}
.box-fifteen .text-output {
  font-size: 72px;
  letter-spacing: 0.0px;
  transition: letter-spacing 0.5s ease;
}
.box-fifteen:hover > .text-output {
  letter-spacing: -3.0px;
}

.box-sixteen {
  width: 182px;
  height: 452px;
  padding: 12px;
  top: -11807px;
  left: 665px;
  background: #ffe4a6;
}
.box-sixteen .text-output {
  font-size: 72px;
  letter-spacing: 0.0px;
  transition: letter-spacing 0.5s ease;
}
.box-sixteen:hover > .text-output {
  letter-spacing: -3.0px;
}

.box-seventeen {
  width: 171px;
  height: 167px;
  padding: 12px;
  top: -12799px;
  left: 1516px;
  background: #b89bff;
}
.box-seventeen .text-output {
  font-size: 72px;
  letter-spacing: 0.0px;
  transition: letter-spacing 0.5s ease;
}
.box-seventeen:hover > .text-output {
  letter-spacing: -3.0px;
}

.box-eighteen {
  width: 146px;
  height: 276px;
  padding: 12px;
  top: -13229px;
  left: 1516px;
  background: #ffef23;
}
.box-eighteen .text-output {
  font-size: 72px;
  letter-spacing: 0.0px;
  transition: letter-spacing 0.5s ease;
}
.box-eighteen:hover > .text-output {
  letter-spacing: -3.0px;
}

.box-nineteen {
  width: 181px;
  height: 271px;
  padding: 12px;
  top: -13615px;
  left: 666px;
  background: #8066ff;
}
.box-nineteen .text-output {
  font-size: 72px;
  letter-spacing: 0.0px;
  transition: letter-spacing 0.5s ease;
}
.box-nineteen:hover > .text-output {
  letter-spacing: -3.0px;
}

.box-twenty {
  width: 255px;
  height: 271px;
  padding: 12px;
  top: -14416px;
  left: 873px;
  background: #ff43a0;
}
.box-twenty .text-output {
  font-size: 72px;
  letter-spacing: 0.0px;
  transition: letter-spacing 0.5s ease;
}
.box-twenty:hover > .text-output {
  letter-spacing: -3.0px;
}

.box-twenty-one {
  width: 213px;
  height: 382px;
  padding: 12px;
  top: -15327px;
  left: 1px;
  background: #6ef63e;
}
.box-twenty-one .text-output {
  font-size: 72px;
  letter-spacing: 0.0px;
  transition: letter-spacing 0.5s ease;
}
.box-twenty-one:hover > .text-output {
  letter-spacing: -3.0px;
}

.box-twenty-two {
  width: 207px;
  height: 276px;
  padding: 12px;
  top: -16429px;
  left: 1688px;
  background: #ffd072;
}
.box-twenty-two .text-output {
  font-size: 72px;
  letter-spacing: 0.0px;
  transition: letter-spacing 0.5s ease;
}
.box-twenty-two:hover > .text-output {
  letter-spacing: -3.0px;
}

.box-twenty-three {
  width: 182px;
  height: 167px;
  padding: 12px;
  top: -17599px;
  left: 1713px;
  background: #c8ff5e;
}
.box-twenty-three .text-output {
  font-size: 72px;
  letter-spacing: 0.0px;
  transition: letter-spacing 0.5s ease;
}
.box-twenty-three:hover > .text-output {
  letter-spacing: -3.0px;
}

.box-twenty-four {
  width: 379px;
  height: 151px;
  padding: 12px;
  top: -18206px;
  left: 1516px;
  background: #865a1f;
}
.box-twenty-four .text-output {
  font-size: 72px;
  letter-spacing: 0.0px;
  transition: letter-spacing 0.5s ease;
}
.box-twenty-four:hover > .text-output {
  letter-spacing: -3.0px;
}

.box-twenty-five {
  width: 378px;
  height: 382px;
  padding: 12px;
  top: -18527px;
  left: 1517px;
  background: #f166ff;
}
.box-twenty-five .text-output {
  font-size: 72px;
  letter-spacing: 0.0px;
  transition: letter-spacing 0.5s ease;
}
.box-twenty-five:hover > .text-output {
  letter-spacing: -3.0px;
}

a{
  display: block;
  text-decoration: none;
  color: inherit;
  
}

.personality-text {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  padding: 23px;
}

.flavor-title {
  font-weight: normal;
  color: hotpink;
  font-size: 20px;
}

.vanilla-text {
  word-spacing: 3em;
  font-size: 4em;
}

.back-link {
  font-weight: normal;
  color: hotpink;
  display: inline-block;
  margin-top: 1em;
  font-size: 1em;
}


.strawberry-text {
  word-spacing: 3em;
  font-size: 4em;
}


.chocolate-text {
  word-spacing: 1em;
  font-size: 4em;
}

.mango-text {
   word-spacing: 4em;
  font-size: 4em;
}

.oreo-text {
  word-spacing: 1em;
  font-size: 4em;
}

.coconut-text {
    word-spacing: 5em;
  font-size: 4em;
}

.cherry-text {
    word-spacing: 6em;
  font-size: 4em;
}

.cookies-text {
   word-spacing: 2em;
  font-size: 4em;
}

.tiramisu-text {
  word-spacing: 5em;
  font-size: 4em;
}

.coffee-text {
    word-spacing: 1em;
  font-size: 4em;
}

.mint-text {
  word-spacing: 3em;
  font-size: 4em;
}

.bluemoon-text {
   word-spacing: 8em;
  font-size: 4em;
}

.lemon-text {
  word-spacing: 5em;
  font-size: 4em;
}


.yoghurt-text {
  word-spacing: 6em;
  font-size: 4em;
}

.banana-text {
  word-spacing: 9em;
  font-size: 4em;
}

.peanutbutter-text {
   word-spacing: 8em;
  font-size: 4em;
}

.lavender-text {
  word-spacing: 6em;
  font-size: 4em;
}

.corn-text {
    word-spacing: 4em;
  font-size: 4em;
}

.blueberry-text {
  word-spacing: 6em;
  font-size: 4em;
}

.raspberry-text {
   word-spacing: 2em;
  font-size: 4em;
}

.dubaichocolate-text {
    word-spacing: 6em;
  font-size: 4em;
}

.macadamianut-text {
    word-spacing: 7em;
  font-size: 4em;
}


.pistachio-text {
    word-spacing: 4em;
  font-size: 4em;
}

.hazelnut-text {
 word-spacing: 1em;
  font-size: 4em;
}

.bubblegum-text {
word-spacing: 2em;
  font-size: 4em;
}

.lemon-text {
 word-spacing: 5em;
  font-size: 4em;
}