.rectangle {
  display: flex;
  position: absolute;
  left: 350px;
  top: 200px;
  width: 1000px;
  height: 150px;
  background: black;
  border-radius: 50%;
  font-size: 50px;
  color: white;


}



.rectangle2 {
  display: flex;
  position: absolute;
  left: 350px;
  top: 455px;
  width: 1000px;
  height: 150px;
  background: black;
  border-radius: 50%

}


.rectangle:hover {
    background-color: rgb(252, 2, 252);
}


.rectangle2:hover {
  background-color: rgb(252, 2, 252);
}



.calm {
  display: flex;
  position: absolute;
  left: 300px;
  top: 45px;
  font-size: 50px;
  color: white;
}


.nervous {
  display: flex;
  position: absolute;
  left: 300px;
  top: 45px;
  font-size: 50px;
  color: white;
}

a{
text-decoration: none;
color: white;
list-style-type: none;  
text-align: center;
} 

body { 	font-family: 'euclid';
}

.position {
  position: relative;
  justify-content: center;
  text-align: center;
  display: flex;
}

@font-face {
  font-family: 'euclid';
  src: url(../font/EuclidFlexEDU-Medium-WebXL.woff);
  format:('woff')
}