@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css");


.flex-container {
    display: flex;
    align-items: center;
    justify-content: center;
    /* max-width: calc(50vw); */
    /* max-width: 100%; */
}



.flex-child {
    flex: 1;
    /* max-width: 50%; */
    border: 1px solid #ccc;
    border-radius: 10px;
}

.flex-child:first-child {
    margin-right: 20px;
}

.square {
  display: block;
  width: calc(20vw);
  height: calc(20vw);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  /* align-items: center; */
}

@media (max-width:1200px) {
  .flex-container {
      display: flex;
      max-width: calc(80vw);
  }
  .square {
    width: calc(40vw);
    height: calc(40vw);
    /* align-items: center; */
  }

}


@media (max-width:900px) {
  .flex-container {
      display: flex;
      max-width: calc(100vw);
  }
  .square {
    width: calc(45vw);
    height: calc(45vw);
    /* align-items: center; */
  }

}


.square img {
  /* position: absolute; */
  /* display: block; */
  /* max-width: 80%;
  width: auto;
  height: auto; */
  object-fit: contain;
  max-width: 90%;
  max-height: 90%;
  margin-top: 15%;
  margin-bottom: 15%;
  /* max-width: 80%;
  /* width: 100%; */
  /* height: 250px;  */
  /* top: 50%; */
  /* object-fit: contain; */
  /* position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */


}


.flex-child button {
  margin-bottom: 1em;
}

.center {
  margin: 0 auto;
  display: block;
}


.valueup {
  width: 100%;
  /* clear: both; */
  font-weight: bolder;
  text-align: center;
  margin-bottom: -8%;
  margin-top: 8%;
}

.valuebelow {
  width: 100%;
  /* clear: both; */
  font-weight: bolder;
  text-align: center;
  margin-top: -8%;
  margin-bottom: 8%;
}

.pie {
  /* (A1) CIRCLE */
  object-fit: contain;
  width: 70%;
  height: 70%;
  margin-top: 15%;
  border-radius: 50%;
  border: 1px solid #555;

  /* (A2) SEGMENTS */
  background: conic-gradient(
    black 0deg 45deg,
    white 45deg 315deg,
    black 315deg 360deg
  );
}

.boxed {
  width: 100%;
  margin-top: 3rem;
}

.boxed label {
  width: 200px;
  max-width: 90%;
  padding: 10px;
  border: solid 2px #ccc;
  transition: all 0.3s;
}


.question {
  width: 100%;
  margin-top: 3rem;
}

.question label {
  width: 25%;
  max-width: 90%;
  height: 6rem;
  padding: 10px;
  border: solid 2px #ccc;
  transition: all 0.3s;
}

.question.small label {
  width: 11.1%;
  max-width: 90%;
  padding: 10px;
  border: solid 2px #ccc;
  transition: all 0.3s;
}


.boxed input[type="radio"] {
  display: none;
}

.boxed input[type="radio"]:checked + label {
  background: #111;
  color: #fff;
}

.flex-child label {
  margin-bottom: 1em;
}

#opinionStrength label{
  max-width: 16.6%;
  min-height: 6em;
  vertical-align: middle;
  margin: 0;
}

#opinionStrength p {
  margin-top: 5em;
  margin-bottom: 2em;
}

.no-font {
  font-size:0;
}

@media (max-width:900px) {
  .flex-container {
      display: flex;
      max-width: calc(100vw);
  }
  .square {
    width: calc(45vw);
    height: calc(45vw);
    /* align-items: center; */
  }

  #opinionStrength label{
    max-width: 50%;
    min-height: 6em;
    vertical-align: middle;
    margin: 0;
  }
}