@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');
* {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  font-family: 'Open Sans';
}

#back {
  position: absolute;
  bottom: 15px;
  right: 15px;
  height: 50px;
  width: auto;
  cursor: pointer;
  z-index: 1;
}

h1 {
  position: absolute;
  top: 100px;
  text-align: center;
  width: 100vw;
  color: #fff;
  z-index: 1;
}

h3 {
  text-align: center;
  color: #fff;
}

p {
  text-align: center;
  padding: 15px;
  color: #fff;
  font-size: 1.1em;
}

.content-container {
  max-height: 100vh;
  overflow: hidden;
}

form#wheel-form {
  height: 1500vh;
  display: flex;
  flex-direction: column;
}

#wheel-form > div {
  border: none;
  min-height: 100vh;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 15px;
  transition: m 300ms;
}

.phys-health {
  background: linear-gradient(149deg, #32cd68, #15582d);
}

.emo-health {
  background: linear-gradient(149deg, #31a1fc, #025293);
}

.cog-health {
  background: linear-gradient(149deg, #ff8849, #ad3d00);
}

.soc-health {
  background: linear-gradient(149deg, #ced54a, #8b9122);
}

.sp-health {
  background: linear-gradient(149deg, #e5576f, #96172d);
}

#hasSvg {
  display: flex;
  flex-direction: column;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  align-items: center;
  overflow: hidden;
  justify-content: center;
  background-color: white;
}

svg {
  display: block;
  height: 75%;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}

.evergreen {
  color: #15582d;
}

.radio-options {
  display: flex;
  justify-content: space-evenly;
  width: 300px;
  margin: 0 auto;
}

.radio-options div {
  display: flex;
  flex-direction: column;
}

.radio-options div label {
  order: 2;
  font-weight: 300;
  font-size: 0.75rem;
  color: #fff;
  padding-bottom: 25px;
}

.radio-options div input {
  margin: 0 auto;
}

button {
  background: radial-gradient(#ced54a, #15582d);
  background: #15582d;
  color: #fff;
  padding: 26px 15px;
  cursor: pointer;
  border-radius: 50%;
  border: none;
  text-transform: uppercase;
  font-size: 0.65em;
}

input[type='submit'] {
  margin-top: 60px;
  background: radial-gradient(#ced54a, #15582d);
  background: #96172d;
  color: #fff;
  padding: 40px 25px;
  cursor: pointer;
  border: none;
  border-radius: 50%;
  margin-bottom: -30px;
  color: #fff;
  text-transform: uppercase;
}

@media (max-height: 700px) {
  h1 {
    top: 50px;
  }
}

@media (max-height: 500px) {
  h1 {
    top: 15px;
  }
}

#phys-1-50,
#phys-1-100,
#phys-2-50,
#phys-2-100,
#phys-3-50,
#phys-3-100,
#emo-1-50,
#emo-2-50,
#emo-3-50,
#emo-1-100,
#emo-2-100,
#emo-3-100,
#cog-1-50,
#cog-2-50,
#cog-3-50,
#cog-1-100,
#cog-2-100,
#cog-3-100,
#social-1-50,
#social-2-50,
#social-3-50,
#social-1-100,
#social-2-100,
#social-3-100,
#sp-1-50,
#sp-2-50,
#sp-3-50,
#sp-1-100,
#sp-2-100,
#sp-3-100 {
  display: none;
}