html {
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0; }

article, aside, footer, header, nav, section {
  display: block; }

h1 {
  font-size: 2em;
  margin: .67em 0; }

figcaption, figure, main {
  display: block; }

figure {
  margin: 1em 40px; }

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible; }

pre {
  font-family: monospace,monospace;
  font-size: 1em; }

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects; }

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted; }

b, strong {
  font-weight: inherit; }

b, strong {
  font-weight: bolder; }

code, kbd, samp {
  font-family: monospace,monospace;
  font-size: 1em; }

dfn {
  font-style: italic; }

mark {
  background-color: #ff0;
  color: #000; }

small {
  font-size: 80%; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -.25em; }

sup {
  top: -.5em; }

audio, video {
  display: inline-block; }

audio:not([controls]) {
  display: none;
  height: 0; }

img {
  border-style: none; }

svg:not(:root) {
  overflow: hidden; }

button, input, optgroup, select, textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0; }

button, input {
  overflow: visible; }

button, select {
  text-transform: none; }

button, html [type=button], [type=reset], [type=submit] {
  -webkit-appearance: button; }

button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText; }

fieldset {
  padding: .35em .75em .625em; }

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal; }

progress {
  display: inline-block;
  vertical-align: baseline; }

textarea {
  overflow: auto; }

[type=checkbox], [type=radio] {
  box-sizing: border-box;
  padding: 0; }

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto; }

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px; }

[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
  -webkit-appearance: none; }

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit; }

details, menu {
  display: block; }

summary {
  display: list-item; }

canvas {
  display: inline-block; }

template {
  display: none; }

[hidden] {
  display: none; }

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: '';
  clear: both;
  height: 0; }

html {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden; }

h1,
h2,
h3,
p,
a,
ol,
li,
label,
input,
button {
  margin: 0;
  padding: 0; }

a {
  color: inherit;
  text-decoration: none; }

img {
  display: block;
  width: 100%; }

html {
  font-size: 62.5%; }

body {
  font-family: "Cabin", Sans-Serif;
  font-size: 2rem;
  letter-spacing: 1px; }

h1,
h2,
h3 {
  font-family: "Roboto Condensed", Sans-Serif; }

h1 {
  font-size: calc(2rem + 2.2vw); }

h2 {
  font-size: 2.2rem; }

h3 {
  font-size: 1.8rem; }

@media (max-width: 480px) {
  body {
    font-size: 1.6rem; } }

.button {
  font-family: inherit;
  text-transform: uppercase;
  background-color: inherit;
  padding: 1rem 2.5rem;
  border: 3px solid #ce1141;
  border-radius: 25px;
  transition: background-color 0.3s, color 0.3s; }
  .button:hover, .button:active, .button:focus {
    background-color: #061922;
    color: #fdfdfd;
    cursor: pointer; }
  .button--submit {
    display: block;
    margin: 0 auto; }
    .button--submit:hover, .button--submit:active, .button--submit:focus {
      color: #b4975a; }
    .button--submit:disabled, .button--submit:disabled:hover {
      border-color: #a1a1a4;
      background-color: inherit;
      color: #a1a1a4;
      cursor: not-allowed; }
    .button--submit:not(:disabled) {
      border-color: #b4975a; }

.game {
  display: flex;
  flex-direction: column;
  align-items: center; }
  .game .imgContainer {
    max-width: 360px;
    margin: 0 auto; }
  .game__instructions {
    margin: 2rem 0; }
    .game__instructionsHeadline {
      margin: 30px 0 10px;
      text-align: center; }
    .game__instructionsList {
      list-style-position: outside;
      padding-left: 40px;
      margin: 2rem 0; }
    .game__instructionsListItem em {
      color: #ce1141;
      font-style: normal;
      font-weight: 700; }
    .game__instructionsListItem:not(:last-of-type) {
      margin-bottom: 1rem; }
  .game__questionTracker {
    margin: 2rem auto; }
  .game__resultContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
    text-align: center; }
    .game__resultContainer > *:not(:last-child) {
      margin-bottom: 2rem; }
  .game__result--score {
    color: #ce1141; }

@media (max-width: 480px) {
  .game__instructionsHeadline {
    margin: 0; }
  .game .imgContainer {
    max-width: 260px; }
  .game__questionTracker {
    margin: 1rem auto; } }

.game__form .gridContainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem; }

.game__form .game__formControl {
  width: 100%; }

.game__form .game__input:checked + .game__inputLabel {
  border: 4px solid #ce1141;
  background-color: #061922;
  color: #fdfdfd; }

.game__form .game__inputLabel {
  display: inline-block;
  width: 100%;
  padding: 1rem 2rem;
  border: 4px solid #061922;
  border-radius: 25px;
  transition: border-color .3s, background-color .3s, color .3s; }
  .game__form .game__inputLabel:hover, .game__form .game__inputLabel:active {
    cursor: pointer;
    border-color: #b4975a; }
  .game__form .game__inputLabel::before {
    content: url(../assets/rapsIconRed.ico);
    margin-right: 10px; }

@media (max-width: 480px) {
  .game__form .gridContainer {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem; } }

.wrapper {
  max-width: 1200px;
  width: 90%;
  margin: 0 auto; }

body {
  background-color: #fdfdfd;
  color: #061922; }
  body .container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between; }

header {
  padding: 30px 0 50px; }
  header h1 {
    color: #ce1141;
    text-align: center; }

@media (max-width: 480px) {
  header {
    padding: 20px 0; } }

main {
  flex: 1;
  padding: 2rem 0;
  display: flex;
  justify-content: center;
  align-items: center; }

footer {
  padding: 2rem 0;
  text-align: center; }
  footer p:not(:last-of-type) {
    margin-bottom: 1rem; }
  footer a {
    color: #ce1141;
    text-decoration: underline;
    transition: color 0.3s; }
    footer a:hover, footer a:active, footer a:focus {
      color: #b4975a; }

@media (max-width: 480px) {
  footer {
    font-size: 1.4rem; } }