body {
background:#202A44
}

#circle {
  /*Make the cicle*/
  background-color: rgba(255, 255, 255, 0.85);
  width: 35vh;
  height: 35vh;
  border-radius: 50%;
  
  position: absolute;
  /*To center button*/
  top: 42%;
  left: 50%;
  /*Margin is half of height and width so that instead of centering the top left of the button, we are actually centering the button itself. Halfing to center image rather than top left margin of image*/
  margin-top: -17.5vh; 
  margin-left: -17.5vh;
}
 /* Animation only occurs when you hover!*/
#circle:hover {
  animation-name: breathing-circle;
  animation-duration: 11s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
  @keyframes breathing-circle {
  0% {
    transform: scale(1);
  }
  41% {
    transform: scale(1.4);
  }
  49% {
    transform: scale(1.4);
  }
  90% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
.popup {
  font-size:10vh;
  color: rgba(0,0,0,0);
  font-family: 'Raleway', sans-serif;
  position:absolute;
  top:33%;
  left: 11%;
}
#exhale-message {
  /*The above left property didn't look very centered to me for exhale, so I am overiding it with the more specific id selector */
  left: 7%;
}

#circle:hover #inhale-message {
  animation-name: inh-direction;
  animation-duration: 11s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
#circle:hover #exhale-message {
  animation-name: exh-direction;
  animation-duration: 11s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes inh-direction {
  0% {
    color: rgba(253, 193, 140, 0);
  }
  10% {
    color: #202A44;
  }
  40% {
    color: #202A44;
  }
  50% {
    color: rgba(253, 193, 140, 0);
  }
}
@keyframes exh-direction {
  0% {
    color: rgba(253, 193, 140,0);
  }
  50% {
    color: rgba(253, 193, 140,0);
  }
  60% {
    color: #202A44;
  }
  90% {
    color: #202A44;
  }
  100% {
    color: rgba(253, 193, 140, 0);
  }
}
#the-question {
  /* background-color: rgba(255,255,255,0.5); */
  color: white;
  /* position: fixed; */
  left: 0;
  bottom: 0;
  width: 100%;
  /* padding: 10px;
  padding-left: 20px; */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

a {color:yellow;}

.article {
  padding: 10% 20% 1%;
}

#link-me {
  cursor:pointer;
  font-family: 'Just Another Hand', sans-serif;
  font-size: 1.3rem;
}
.animate-links:hover{
  animation-name: link-jump;
  animation-duration: 0.1s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes link-jump{
  0% {
    color: rgba(0, 0, 0, 0.70);
  }
  100% {
    color: black;
  }
}

#the-explanation {
  display: none;
  font-size: 0;
  color: rgba(0, 0, 0, 0.70);
  font-size: 2.55vh;
  font-family: 'Raleway', sans-serif;
  padding: 10px;
  text-align: justify;
}

#me {
  font-family: 'Raleway', sans-serif;
  font-size: 2.5vh;
  color: rgba(0, 0, 0, 0.70);
  position: absolute;
  bottom: 35px;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#close-explanation {
  cursor: pointer;
}