/******************************************
/* CSS
/*******************************************/

/* Box Model Hack */
*{
  box-sizing: border-box;
}

/******************************************
/* LAYOUT
/*******************************************/
html {
  margin: auto 10%;
  font-family: "Roboto", "Helvetica", sans-serif;
  font-weight: 400;
  background-color: #2a9d8f ;
}

div {
  float: left;
  /*border: solid 5px orange;*/
}

img, span {
  float: left;
  font-size: 3rem;
  width: 14.5%;
  padding: 1%;
  margin: 1%;
}
img, .chooseDate > span {
  cursor: pointer;
}
img:hover, .chooseDate > span:hover {
  transform: scale(1.10);
  background-color: #f4a261;
}
h1 {
  font-size: 3.5rem;
  margin: 0;
  margin-top: 10px;
  /*border: solid 2px pink;*/
}
.enter {
  padding-top: 25px;
}
span {
  text-align: center;
  display: block;
  width: 70%;
  padding: 1%;
  /*border: solid 2px red;*/
}
.selected {
  background-color: #f4a261;
}
.chooseStarSign {
  height: fit-content;
  width: 100%;
}
.chooseDate {
  width: 25%;
  height: fit-content;
  /*border: solid 5px green;*/
}
.chooseDate span {
  margin: 2% 0;
}
.result {
  width: 75%;
  height: fit-content;
  padding: 5px;
  /*border: solid 5px blue;*/
  background: #e9c46a;
  border:solid 20px #e9c46a;
  /*background:hsla(67, 95%, 95%, 1);*/
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}
.result span {
  font-size: 2rem;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  /*border: solid red 2px;*/
  border: none;
  font-weight: bold;
}
#currentDate, #dateRangeStarSign, #mood, #color, #luckyNumber, #luckyTime {
  width: 50%;
}
#description {
  margin: 30px 0;
  font-size: 2.5rem;
  font-family: "Kalam", "Helvetica", sans-serif;
  font-weight: bold;
}
#compatible {
  margin-bottom: 20px;
}

/******************************************
/* ADDITIONAL STYLES
/*******************************************/

@media screen and (max-width: 1200px) {
h1 {
  font-size: 2.5rem;
}
span {
  font-size: 2rem;
}
img {
  width: 19%;
}
.chooseDate {
  width: 100%;
  height: 250px;
}
.chooseDate span {
  width: 26%;
  margin: 0 10px;
  font-weight: bold;
}
.enter {
  padding-top: 50px;
}
.result {
  width: 80%;
  height: fit-content;
}
#currentDate, #dateRangeStarSign {
  width: 100%;
}


}