* {
  box-sizing: border-box;
}

:root {
  font-size: 62.5%;
}

.correlationfootnote h3{
  text-decoration: none;
  color: white;
}

.correlationfootnote h3:hover{
  color: blue;
}

.button {
  position: absolute;
  width: 5em;
  height: 2em;
  border: none;
  border-radius: 3em;
  box-shadow: .4em .2em .7em white inset;
  cursor: pointer;
}

#timebutton{
  background-color: blue;
  margin-left: 5em;
}

#timebuttonclose {
  background-color: blue;
  //margin-left: 6em;
  margin-left: 5em;
}

#formbutton {
  background-color: red;
  margin-left:20em;
}

#formbuttonclose {
  background-color: red;
  //margin-left:4em;
  margin-left: 3em;
}

#feelingbutton {
  background-color: yellow;
  margin-left: 35em;
}

#feelingbuttonclose {
  background-color: yellow;
  //margin-left: 4em;
  margin-left: 3em;
}

.button2 {
  position: absolute;
  width: 5em;
  height: 3em;
  border: none;
  border-radius: .5em;
  box-shadow: .3em .1em .5em white inset;
  cursor: pointer;
  margin-top: 90vh;
  color: white;
}

#showbutton{
  background-color: rgb(173 222 154);
  right: 8em;
}

#resetAll{
  background-color: orange;
  right: 2em;
}

#interviewquestions{
  background-color: rgba(122, 80, 33, 1);
  right: 5em;
}

h2 {
  text-align: center;
  color: white;
}
.timeh2{
  //margin-left: 1em;
  margin-left: 2em;
}


.buttonlabelz div{
  width: 10em;
  height: 1.2em;
  border-radius: 3em;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  margin-bottom: .3em;
  font-size: 1.45rem;
}

.buttonlabelz div:active,
  .invert {
    filter: invert(1);
}

.label {
  float: right;
}

.categorycontainer {
  position: relative;
  width: 18rem;
}


.list {
  padding: .4em;
  position: absolute;
  //width: 20rem;
  display:none;
}

#timecategory {
  top: 0;
  left: 0;
}

#formcategory {
  top: 0;
  left: 20rem;
}

#feelingcategory {
  top: 0;
  left: 38rem;
}

#contentcontainer {
  position: absolute;
  right: 0%;
  width: 70em;
  z-index: 1;
  color: white;
}

.correlationcontent{
  display: inline-block;
  height: 10em;
  width: 10em;
  margin-bottom: .1em;
  //border: 1px solid green;
  vertical-align: top;
  position: relative;
  display: none;
}

h3{
  text-align: center;
  letter-spacing: .02em;
}

.contentlabel {
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  position:absolute;
}

.contentlabeltime1{
  bottom:3.5em;
  margin-left: 1.375em;
}

.contentlabelform1{
  bottom:3.5em;
  margin-left: 4.25em;
}

.contentlabelfeeling1{
  bottom:3.5em;
  margin-left: 7.125em;
}

.contentlabeltime2{
  bottom:1em;
  margin-left: 1.375em;
}

.contentlabelform2{
  bottom:1em;
  margin-left: 4.25em;
}

.contentlabelfeeling2{
  bottom:1em;
  margin-left: 7.125em;
}


/* TIME: */
#blanktimelabel {background-color: #e4e5ed; color:orange;}
#prebirthlabel {background-color: #d1d4e2; color:orange;}
#toddlerlabel {background-color: #bfc3d6;color:orange;}
#glenheadlabel {background-color: #adb2ca; color:orange;}
#montessorischoollabel {background-color: #9aa0be;color:orange;}
#secondgradelabel {background-color: #888fb3;color:orange;}
#seacliffschoollabel {background-color: #767ea7;color:orange;}
#youthlabel {background-color: #646d9b;color:orange;}
#middleschoollabel {background-color: #586089;color:orange;}
#highschoollabel{background-color: #4c5377;color:orange;}
#teenslabel {background-color: #414664;color:orange;}
#yearofflabel {background-color: #353a52;color:orange;}
#baltimorelabel {background-color: #292d40;color:orange;}
#freshsophmicalabel {background-color: #1d202e;color:orange;}
#lefthandperiodlabel {background-color: #12131b;color:orange;}
#junsenmicalabel {background-color: #0d1620;color:orange;}
#withinaninstitutionlabel {background-color: #162435;color:orange;}
#postgradlabel{background-color: #1f334a;color:orange;}
#pandemiclabel{background-color: #28415f;color:orange;}
#thegoodoldayslabel {background-color: #314f74;color:orange;}
#scorpioseasonlabel {background-color: #395e8a;color:orange;}
#falllabel {background-color: #426c9f;color:orange;}
#winterlabel {background-color: #4b7bb4;color:orange;}
#springlabel {background-color: #608abd;color:orange;}
#summerlabel {background-color: #759ac6;color:orange;}
#notinamericalabel {background-color: #8ba9ce;color:orange;}
#currentlylabel {background-color: #a0b9d7;color:orange;}
#bloomingyearlabel {background-color: #b5c9e0;color:orange;}
#onmydeathbedlabel{background-color: #cad8e9;color:orange;}
#postdeathlabel {background-color: #dfe8f2;color:orange;}

/* FORM: */

#blankformlabel{background-color: #f6dbdf; color:green;}
#clothingoutfitlabel{background-color: #f0c3c9;color:green;}
#fromsomeoneelselabel {background-color: #eaabb4;color:green;}
#assignmentlabel {background-color: #e4939f;color:green;}
#verybadthinglabel {background-color: #de7a89;color:green;}
#imagelabel {background-color: #d96274;color:green;}
#drawinglabel {background-color: #d34a5e;color:green;}
#rituallabel {background-color: #cd3249;color:green;}
#selfportraitlabel {background-color: #b52c40;color:green;}
#anecdotelabel{background-color: #9d2638;color:green;}
#handwrittenlabel {background-color: #84212f;color:green;}
#responselabel {background-color: #6c1b27;color:green;}
#characterlabel {background-color: #54151e;color:green;}
#gamelabel {background-color: #3c0f15;color:green;}
#soundlabel {background-color: #24090d;color:green;}
#credentiallabel {background-color: #240915;color:green;}
#diagramlabel {background-color: #3c0f23;color:green;}
#toollabel {background-color: #541531;color:green;}
#performancelabel {background-color: #6c1b3f;color:green;}
#thoughtlabel{background-color: #85204e;color:green;}
#observationlabel {background-color: #9d265c;color:green;}
#experiencelabel {background-color: #b52c6a;color:green;}
#objectlabel {background-color: #cd3278;color:green;}
#foodlabel {background-color: #d34a88 ;color:green;}
#goallabel {background-color: #d96298 ;color:green;}
#onlinelabel {background-color: #df7aa8 ;color:green;}
#physicallabel {background-color: #e492b7 ;color:green;}
#reviewlabel {background-color: #eaabc7 ;color:green;}
#valuelabel {background-color: #f0c3d7 ;color:green;}
#practicelabel { background-color: #f6dbe7 ;color:green;}

/* FEELING: */

#blankfeelinglabel {background-color: #fcebb7; color:purple;}
#tenderlabel {background-color: #fbe6a3; color:purple;}
#darklabel {background-color: #fbe08f; color:purple;}
#pensivelabel {background-color: #fada7a; color:purple;}
#potentlabel {background-color: #f9d566; color:purple;}
#curiouslabel {background-color: #f8cf51; color:purple;}
#gratefullabel {background-color: #f7ca3d; color:purple;}
#suspiciouslabel {background-color: #f7c428; color:purple;}
#bitterlabel {background-color: #f6be14; color:purple;}
#recalcitrantlabel {background-color: #d7a408; color:purple;}
#mundanelabel {background-color: #df8000; color:purple;}
#significantlabel {background-color: #f48c00; color:purple;}
#precariouslabel {background-color: #ff960b; color:purple;}
#divisivelabel {background-color: #ff9f20; color:purple;}
#expressivelabel {background-color: #ffa835; color:purple;}
#funnylabel {background-color: #ffb24a; color:purple;}
#mysteriouslabel {background-color: #ffbb60; color:purple;}
#scrumptiouslabel {background-color: #ffc475; color:purple;}
#criticallabel {background-color: #ffcd8a; color:purple;}
#crypticlabel {background-color: #ffcd8a; color:purple;}
#foundationallabel {background-color: #fbf3b9; color:purple;}
#genuinelabel {background-color: #faefa5; color:purple;}
#comfortinglabel {background-color: #f9ec91; color:purple;}
#shylabel {background-color: #f7e87d; color:purple;}
#livelylabel {background-color: #f6e468; color:purple;}
#desperatelabel {background-color: #f5e154; color:purple;}
#flamboyantlabel {background-color: #f4dd40; color:purple;}
#angstlabel {background-color: #f3da2c; color:purple;}
#problematiclabel {background-color: #f3da2c; color:purple;}
#sensitivelabel {background-color: #e7cc0e; color:purple;}

@media screen and (max-width: 81.5em) {
  #contentcontainer {
    margin-top: 110vh;
    color: white;
    right:0;
  }
  body #contentcontainer {
    background-color: rgba(34,23,9,1);
    width: 100vw;
    margin-left: 0;
    margin-right:0;
    padding: 1em;
    text-align: center;
  }
}
}

@media screen and (max-width: 60em) {

  .button2{
    margin-top: 82vh;
  }
}
@media screen and (max-width: 700px) {
  .button{
    width: 2em;
    height: 2em;
    box-shadow: .4em .2em -1.3em white inset;
    cursor: default;
  }
  #timebutton{
    margin-left: 3em;
  }

  #formbutton {
    background-color: red;
    margin-left:7em;
  }

  #feelingbutton {
    background-color: yellow;
    margin-left: 11em;
  }
  .button2{
    display:none;
  }
  #contentcontainer{
        display:none;
    }
}