/* GLOBAL */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6em;
  background-color: #ddeeff;
}

h2 {
  margin-bottom: 1em;
}

ul {
  margin: 1em 0;
}

li {
  list-style: none;
  margin-bottom: 0.5em;
  padding-left: 2em;
}

a {
  text-decoration: none;
}

header {
  border-bottom: 3px #3794eb solid;
}

footer {
  border-top: 3px #3794eb solid;
  text-align: center;
}

main {
  padding: 1.5em 0;
  background-color: #b5dbff;
  
}

.container {
  width: 60vw;
  margin: 0 auto;
  overflow: auto;
  padding: 1.5em;
}

.bold-text {
  font-weight: 600;
}


/* BUTTONS */

a.start-button,
input.submit-button  {
  display: inline-block;
  color: #f4f4f4;
  font-weight: 600;
  letter-spacing: 0.6px;
  border-radius: 10px;
  text-transform: uppercase;
  background-color: #044d92;
  border: 1px solid #3a3a3a;
  padding: 0.6em 1.5em;
}

input.submit-button {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  letter-spacing: 0.6px;
  font-size: 16px;
}

/* QUESTIONS */

.current-question-number {
  display: inline-block;
  color: #222222;
  background-color: #f4f4f4;
  border: 2px solid #b8b8b8;
  padding: 0.5em 1em;
}

input[type="radio"] {  
  margin-right: 0.5em;
}


/* RESULT */

.final-page p {
  margin-bottom: 0.5em;
}

.final-page > a {
  margin-top: 1em;
}


/* ADD */

.add-form p {
  margin-bottom: 0.5em;
}

.add-form p:last-of-type {
  margin-bottom: 0;
  margin-top: 1em;
}

.add-form p > label {
  display: inline-block;
  width: 200px;
  font-weight: 600;
}

.add-form input[type="text"] {
  width: 100%;
  padding: 0.5em 0.8em;
  border-radius: 5px;
  border: 1px #5f5f5f solid;
}

.add-form input[type="number"] {
  width: 15%;
  padding: 0.5em 0.8em;
  border-radius: 5px;
  border: 1px #5f5f5f solid;
}


@media only screen and (max-width: 900px) {
  .container {
    width: 80vw;
  }

  .add-form input[type="number"] {
    width: 20%;
  }
}

@media only screen and (max-width: 500px) {
  .container {
    width: 95vw;
  }

  .add-form input[type="number"] {
    width: 25%;
  }
}


/* ALERTS */

.message__error {
  display: inline-block;
  color: #222222;
  background-color: #ec9898;
  border: 2px solid #b84b4b;
  padding: 0.5em 1em;
  margin-bottom: 1.5em;
}

.message__success {
  display: inline-block;
  color: #222222;
  background-color: #adecad;
  border: 2px solid #46af46;
  padding: 0.5em 1em;
  margin-bottom: 1.5em;
}