html {
  background-color: antiquewhite;
  background: rgb(232,85,85);
  background: radial-gradient(circle, rgba(232,85,85,1) 0%, rgba(61,46,150,1) 100%);
}

body {
  box-sizing: border-box;
  margin: 50px;
  padding: 10px;
  background: rgb(201,201,201);
  background: radial-gradient(circle, rgba(201,201,201,0.7567401960784313) 50%, rgba(153,163,164,0.7063200280112045) 100%);
  border-radius: 10px;
  min-height: 800px;
}

.flex {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

h1 {
  padding: 20px;
  margin-bottom: 30px;
  opacity: 1;
  color: whitesmoke;
  text-shadow: 3px 0px 2px rgba(106, 106, 106, 0.635);
  font-size: 2em;
}

div.form-check.text-center {
  padding: 0;
}

.btn {
  margin: 20px 0px 20px 0px !important;
}

@media only screen and (max-width: 575px) {
  #zodiacSelect {
    margin-left: 0px !important;
  }
} 

/* Branches */

.hidden {
  display: none;
} 

img {
  display: block;
  box-sizing: border-box;
  max-width: 600px;
  margin: auto;
  padding: 10px 10px 30px 10px;
}

.card {
  margin: 10px 0px;
  padding: 20px;
  background: rgb(255,255,255);
  background: radial-gradient(circle, rgba(255,255,255,0.7035189075630253) 65%, rgba(192, 191, 199, 0.211) 100%);
}

p {
  padding: 0 6em;
  text-align: center;
}

h2{
  text-align: center;
}

h3 {
  padding: 20px;
}

div.form-group {
  margin: 0px;
}

#reset {
  position: absolute;
  right: 15px;
  top: 10px;
  border-radius: 10px;
}

@media only screen and (max-width: 768px) {
  img {
    max-width: 300px;
    padding: 0%; 
  }
  p {
    margin: 10px;
    padding: 10px;
  }
}