.text-center {
  text-align: center;
}
/* 
.container {
    max-width: 650px;
} */

header {
  background-image: url(./banner.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 600px) {
  header {
    height: 250px;
  }
}

h1 {
  color: white;
  text-shadow: 2px 2px 5px #000;
}

form#smileys {
  text-align: center;
}
.smileys {
  margin: 0 -15px;
}
.smileys label {
  display: inline-block;
  cursor: pointer;
  position: relative;
}
.smileys label.active {
  transform: scale(1.2);
  filter: brightness(60%);
}
label.sad {
  /* font-size: 4em; */
  color: tomato;
}
label.neutral {
  /* font-size: 4em; */
  color: gold;
}
label.happy {
  /* font-size: 4em; */
  color: springgreen;
}

label.one {
  color: #ff0000;
}
label.two {
  color: #ff2000;
}
label.three {
  color: #ff4100;
}
label.four {
  color: #ff6900;
}
label.five {
  color: #ff8d00;
}
label.six {
  color: #ffb000;
}
label.seven {
  color: #ffcc00;
}
label.eight {
  color: #e1e903;
}
label.nine {
  color: #7ef90d;
}
label.ten {
  color: #03ff18;
}

.fas {
  font-size: 3em;
  /* color: tomato; */
}
@media screen and (max-width: 600px) {
  .fas {
    font-size: 1.8em !important;
    /* color: tomato; */
  }
}
form#smileys input[type="radio"] {
  width: 0;
  height: 0;
  visibility: hidden;
  /* -webkit-appearance: none;
    width: 50px;
    height: 50px;
    border: none;
    cursor: pointer;
    transition: border 0.2s ease;
    filter: grayscale(100%);
    margin: 0 5px;
    transition: all 0.2s ease; */
}
/* form#smileys input[type=radio]:hover, form#smileys input[type=radio]:checked {
    filter: grayscale(0);
  }
  form#smileys input[type=radio]:focus {
    outline: 0;
  }
  form#smileys input[type=radio].happy {
    background: url("https://res.cloudinary.com/turdlife/image/upload/v1492864443/happy_ampvnc.svg") center;
    background-size: cover;
    color: aquamarine;
  }
  form#smileys input[type=radio].neutral {
    background: url("https://res.cloudinary.com/turdlife/image/upload/v1492864443/neutral_t3q8hz.svg") center;
    background-size: cover;
  }
  form#smileys input[type=radio].sad {
    background: url("https://res.cloudinary.com/turdlife/image/upload/v1492864443/sad_bj1tuj.svg") center;
    background-size: cover;
  } */

.num-container {
  max-width: 100px;
  min-width: 20px;
  display: table-cell;
  vertical-align: top;
  width: 10%;
  padding-right: 3px;
  padding-left: 3px;
}

.num {
  text-decoration: none;
  text-align: center;
  display: block;
  color: #ffffff;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  width: auto;
  padding-top: 9px;
  padding-bottom: 9px;
  font-family: Tahoma, Verdana, Segoe, sans-serif;
  text-align: center;
  mso-border-alt: none;
  word-break: keep-all;
  border-width: 2px;
  transition: all cubic-bezier(0.075, 0.82, 0.165, 1) .15s;
}

.num:hover,
.num:active,
.num.active {
  text-decoration: none;
  color: #fff;
  transform: scale(1.2);
  border-color: #000 !important;
}