.bg_purple{
  background: #8e7cc3;
}
.centertext {
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 1% 1%;
    font-size: 4vw;
    background: #ffffff;
    border-radius: 1vmin;
    left: 50%;
    padding: 2%;
}
.cream_bg{
  background: #fff2cc;
}
.top_text{
  position: absolute;
  font-size: 2.5vw;
  text-align: center;
  width: 100%;
  top: 0;
  left: 0;
  padding: 1%;
  background: #c3efd6;
  z-index: 10;
}
.calendar {
  position: absolute;
  width: 45%;
  transform: translateX(-50%);
  left: 50%;
  top: 24%;
}
.textblock {

  height: 100%;
  width: 100%;
  top: 0;
  position: absolute;

}
.calendar_selector {

  position: absolute;
  width: 45%;
  height: 10%;
  top: 13%;
  left: 27.5%;

}
.left_slider, .right_slider {

  position: absolute;
  height: 60%;
  top: 20%;
  right: 20%;
  cursor: pointer;
  z-index: 99;

}
.left_slider{
  transform: scaleX(-1);
  left: 20%;
}
.calendar_text {
  position: absolute;
  font-size: 2.2vw;
  background: orange;
  color: white;
  padding: 1%;
  border-radius: 1vmin;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 50%;
}
.left_half {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  background: #d5a6bd;
}
.right_half {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  background: #fff2cc;
}
.calendar_right {
  position: absolute;
  z-index: 10;
  width: 40%;
  left: 55%;
  top: 22%;
}
.question {
    position: absolute;
    z-index: 10;
    background: #f5c9da;
    padding: 1%;
    font-size: 2vw;
    border-radius: 1vmin;
    transform: translateX(-50%);
    left: 25%;
    top: 27%;
    width: 45%;
}
.option_css_1, .option_css_2, .option_css_3, .option_css_4 {
  position: absolute;
  background: #a84b92;
  z-index: 10;
  color: white;
  font-size: 1.8vw;
  padding: 1%;
  border-radius: 1vmin;
  cursor: pointer;
  top: 50%;
  transform: translateX(-50%);
  left: 12.5%;
  width: 20%;
}
.option_css_2 {
  left: 37%;
}
.option_css_3 {
  left: 12.5%;
  top: 70%;
}
.option_css_4 {
  left: 37%;
  top: 70%;
}
.option_css_1:hover, .option_css_2:hover, .option_css_3:hover, .option_css_4:hover {
  transform: translateX(-50%) scale(1.1);
  transition: .15s;
}
@media (min-aspect-ratio: 4/3){
  .centertext{
    font-size: 7vmin;
  }
  .question{
    font-size: 4.2vmin;
  }
  .option_css_1, .option_css_2, .option_css_3, .option_css_4 {
    font-size: 3.8vmin;
  }
  .top_text{
    font-size: 5.5vmin;
  }

}