/*-------------------------STYLE GUIDE-------------------------*/

/*colors
seafoam 50E3C2
neon pink EC29E0
green 2EBC0B
yellow EEF509
purple 9717FF
orange FF8523
blue 2EFEFF
salmon EB6367
lime 33F164
*/

/* logo colors
teal: #50bbab
pink: #a827a6
*/

/* fonts

all body text = 'Special Elite', serif
sticky note = 'Permanent Marker', cursive;
dream = 'Caveat', cursive;
diary = 'Homemade Apple', cursive;
phone = 'Rokkitt', serif;
text-message = 'VT323', monospace;
first-person poetry = 'Pacifico', cursive;
? = 'Petrona'
? = 'Libre-Baskerville'
ad = 'Share Tech Mono', monospace;

*/

/*-------------------------UNIVERSAL-------------------------*/

.row {
    display: flex;
}

.column {
    flex: 40%;
    padding: 5px;
}

.arrow {
  width: 30px;
  cursor: pointer;
}

/*-------------------------HEADER-------------------------*/

.titleBox {
    background: #33F164;
    margin-top: -10px;
}

.titleBox h1 {
    font-family: 'Pacifico', cursive;
    font-size: 15px;
    color: black;
    text-align: center;
    padding: 0px;
}


/*-------------------------INDEX-------------------------*/

/* ============ MOBILE ============ */
@media only screen and (max-width: 600px) {
  .introText {
      padding: 5px;
  }

  .introText h1 {
      font-family: 'Special Elite';
      color: #50E3C2;
      text-align: center;
      font-size: 30px;
      margin-bottom: -10px;
  }

  .introText h2 {
      font-family: 'Special Elite';
      color: white;
      text-align: center;
      font-size: 20px;
      line-height: 1.5;
      margin-bottom: -5px;
  }

  .enterBox1 {
      padding: 0% 20%;
      margin-top: -20px;
  }

  .enterBox2 {
      background: #33F164;
      border: 3px solid #FF8523;
      margin-bottom: 20px;
  }

  .enterBox2 h3 {
      font-family: 'Special Elite';
      color: #EC29E0;
      text-align: center;
      font-size: 30px;
      padding: 10px;
      margin-top: 10px;
      margin-bottom: 10px;
  }
}

/* ============ DESKTOP ============ */
@media only screen and (min-width: 600px) {
  .introText {
      padding: 10px 150px;
  }

  .introText h1 {
      font-family: 'Special Elite';
      color: #50E3C2;
      text-align: center;
      font-size: 30px;
  }

  .introText h2 {
      font-family: 'Special Elite';
      color: white;
      text-align: center;
      font-size: 20px;
      line-height: 1.5;
      margin-bottom: -5px;
  }

  .enterBox1 {
      padding: 0% 40%;
      margin-top: -20px;
  }

  .enterBox2 {
      background: #33F164;
      border: 3px solid #FF8523;
      margin-bottom: 20px;
  }

  .enterBox2 h3 {
      font-family: 'Special Elite';
      color: #EC29E0;
      text-align: center;
      font-size: 30px;
      padding: 10px;
      margin-top: 10px;
      margin-bottom: 10px;
  }
}


/*-------------------------STATS-------------------------*/

.statsBox {
    padding: 0px 20px;
    margin-top: -25px;
    margin-bottom: -10px;
}

/*day*/
.stats h1 {
    font-family: 'Special Elite', cursive;
    font-size: 45px;
    color: #33F164;
    text-align: left;
}

/*values*/
.stats h2 {
    font-family: 'Special Elite', cursive;
    font-size: 30px;
    color: white;
    text-align: right;
}

/*flashing time*/
.stats h3 {
    font-family: 'Special Elite', cursive;
    font-size: 45px;
    color: #33F164;
    text-align: left;
    margin-top: 50px;
    margin-left: 15px;
    margin-bottom: 0px;
}

.timeColumn {
  padding: 5px;
}

.mood {
    color: #EC29E0;
}

.energy {
    color: #2EFEFF;
}

.intoxication {
    color: #FF8523;
}

.entropy {
    color: #33F164;
}

/*-------------------------CHOICES-------------------------*/

.sceneBox {
    background: black;
    border: 3px solid #EEF509;
}

/* marquee scroll text*/
.note_body {
    color: lawngreen;
    font-family: 'Courier New';
    padding: 10px;
    background-color: black;
    height: 200px;
    overflow-x: hidden;
    overflow-x: auto;
    border: 5px solid #2EFEFF;
    margin-bottom: 10px;
}


/*choice header*/
.sceneBox h1 {
    font-family: 'Special Elite';
    font-size: 40px;
    color: #33F164;
    text-align: center;
    margin-top: 15px;
    margin-bottom: -10px;
}

/*body text*/
.sceneBox h2 {
    font-family: 'Special Elite';
    font-size: 25px;
    color: #50E3C2;
    text-align: center;
    margin-bottom: 20px;
    padding: 0px 50px;
    line-height: 1.2;
}

/*links in choices*/
.sceneBox h3 {
    font-family: 'Special Elite';
    font-size: 25px;
    color: #EEF509;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

/*note about scrolling*/
.sceneBox h4 {
    font-family: 'Special Elite';
    font-size: 15px;
    color: #EEF509;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

/*pic credit*/
.sceneBox h5 {
    font-family: 'Special Elite';
    font-size: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
    color: dimgray;
}

.row_double {
    display: flex;
    margin-top: -10px;
}

.column_double {
    flex: 40%;
    padding: 5px;
}


/*two options*/
.doublePic {
    width: 100%;
    height: 400px;

}

/*single option*/
.singlePic {
    width: 50%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

/*break*/
.breakBox {
    padding: 250px 300px;
    min-height: 150px;
}


/*-------------------------LINKS-------------------------*/
a:link {
    text-decoration: none;
}

a:visted {
    text-decoration: none;
    color: black;
}

a:hover {
    color: #9717FF;
    text-decoration: underline;
}

a:active {
    color: #9717FF;
    text-decoration: underline;
}

/*-------------------------DREAM-------------------------*/

.dreamBox1 {
    padding: 1% 18% 1% 18%;
}

.dreamBox2 {
    padding: 4%;
    background-image: url(../photos/dreambkg2.jpeg);
}

.dreamBox3{
    background: Aliceblue;
    padding: 1%;
}

.dream {
    font-family: 'Caveat', cursive;
    font-size: 1.5vw;
    color: black;
}


/*-------------------------PHONE TRANSCRIPT-------------------------*/

.phoneBox1 {
    padding: 3% 25%;
}

.phoneBox2 {
    background-image: url(../photos/caution.jpeg);
    padding: 5%;
}

.phoneBox3 {
    background: white;
    padding: 1%
}

.phone {
    font-family: 'Rokkitt', serif;
    font-size: 1.2vw;
}



/*-------------------------FOOTER-------------------------*/

.footer {
    background: #50E3C2;
}

.footer h3 {
    font-family: 'Special Elite';
    font-size: 10px;
    color: black;
    text-align: center;
    padding: 5px;
    margin-bottom: 0px
}