:root {
  --btn-red: rgba(255, 104, 104, 0.8);
  --btn-accept: rgba(151, 215, 0, 0.8);
  --btn-yellow: rgb(255, 255, 0);
  --btn-clicked: rgb(233, 233, 237);
  --btn-font-color: black;
}
body {
  background-color: #ffffff;
  font-family: Helvetica !important;
}
header {
  display: inline-block;
  width: 100vw;
  padding: 45px 0;
  background-color: #f7f7f7;
}
header>h1 {
  color: #222222;
  font-size: 20px;
  font-style: normal;
  font-weight: bold;
  line-height: 150%;
  letter-spacing: normal;
}
div#done, div#pending, div#submitted {
  margin: auto;
  background-color: #FFFFFF;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-top: 0;
  border-bottom: 0;
  padding-top: 36px;
  padding-bottom: 45px;
  width: 600px;
  max-width: 600px;
}
.done-1 {
  font-weight: bold;
  color: #757575;
}
button {
  width: 50px;
  height: 50px;
  border: 5px solid transparent;
  border-radius: 5px;
  background-color: var(--btn-clicked);
  font-weight: bold;
}
button.r6-button {
  width: 45px;
  height: 45px;
  border-radius: 100%;
}
button:focus {
  background-color: var(--btn-clicked);
}
button:hover {
  cursor: pointer;
}
button#done-button, button#submitted-button {
  width: fit-content;
  background-color: var(--btn-accept);
  color: var(--btn-font-color);
}
.p1, .p2, .p3, .p4, .p5, .p6, .p7 {
  color: #757575;
  font-size: 15px;
  line-height: 150%;
  text-align: left;
}
.r1, .r2, .r3, .r4, .r5, .r6, .r7 {
  margin: 10px 0 30px 0;
}
.r4>button {
  margin-top: 5px;
  width: 265px;
}
.r1-button.no:hover,
.r2-button.no:hover,
.r5-button.no:hover,
button.no-selected {
  background-color: var(--btn-red);
}
.r1-button.yes:hover,
.r2-button.yes:hover,
.r4>.r4-button:hover,
.r5-button.yes:hover,
.r6-button:hover,
button.star-not-selected,
button.si-selected {
  background-color: var(--btn-accept);
  color: var(--btn-font-color);
}
.r3-button:hover,
.r4>div>.r4-button:hover,
button.star-selected {
  background-color: var(--btn-yellow)
}
textarea {
  resize: none;
  height: 110px;
  padding: 10px;
}
div.submit {
  display: flex;
  flex-direction: column;
  align-items: center;
}
button.submit-button {
  width: fit-content;
  padding: 10px;
  margin-bottom: 30px;
  color: var(--btn-font-color);
  background-color: var(--btn-accept);
}
span.err-submit {
  color: var(--btn-red);
  font-size: large;
}
footer {
  background-color: #333333;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-top: 0;
  border-bottom: 0;
  padding-top: 45px;
  padding-bottom: 63px;
  height: 400px;
  color:#ffffff;
}
.footer-experience {
  margin: auto;
  width: 600px;
  max-width: 600px;
}
.footer-experience>strong {
  line-height: 150%;
  font-size: 14px;
  font-weight: bold;
}
.footer-recommended-strong {
  font-size: 16px !important;
}
.footer-social-links {
  width: 600px;
  margin: auto;
  padding: 30px;
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.span-link {
  vertical-align: super;
}
a {
  text-decoration: none;
  color: #ffffff;
}
hr {
  height: 2px;
  width: 600px;
  max-width: 600px;
  border-width: 0;
  background-color: #505050;
  color: #505050;
}