html {
  font-size: 10px;
}

body {
  font-size: 1.6rem;
  font-family: 'Space Mono', monospace;
  margin: 0;
  padding: 0;
  background: url(../img/notebook-dark.png);
  background-size: 154px;
  color: #666;
}

.intro {
  padding-top: 5rem;
  background: url(../img/bgh3.jpeg) center center no-repeat;
  background-size: cover;
  font-size: 3.5vw;
  font-family: 'Space Mono', monospace;
  font-weight: 100;
  text-align: center;
  /*min-height: 60rem;*/
  min-height: 100vh;
  text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
}

.intro span { color: #fec153; }

.intro p {
  display: inline-block;
  color: #fff; 
  margin: 0; 
  font-size: 5.5rem;
  text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);
  /*transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);*/
  animation: bounceAnimation 2s infinite;
  cursor: pointer;
}

.intro p:hover {animation: bounceAnimation 2s;}

.intro h1 {color: #fff; margin: 0;}

.active { color: #fec153; }

.inactive {
  color: #666;
  text-decoration: none;
  cursor: default;
}

.challenge-results {
    border-radius: 0.2rem;
    padding: 1.5rem 0.5rem;
    max-width: 1024px;
    margin: -3rem auto 0 auto;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.18);
}

.progress {
  border: 0.2rem solid #dadada;
  background: #f9f9f9;
  height: 2rem;
  width: 40rem;
  padding: 0.2rem;
  margin: 0 0.5rem;
}

.progress-bar {
  height: 2rem;
  background: #fec153;
}

.progress-text { 
  font-size: 2.3rem;
  margin: 0 0.5rem;
}

.progress-text span { 
  color: #fec153;
  font-size: 3rem;
  letter-spacing: 0.3rem;
  /*text-shadow: 1px 1px 2px rgba(150, 150, 150, 0.8);*/
}

.list-title {
  font-size: 2.5em;
  color: #fec153;
  text-align: center;
  text-shadow: 2px 2px 2px rgba(150, 150, 150, 0.8);
  margin-bottom: 1rem;
}

.list-wrapper {
  max-width: 1024px;
  margin: 0 auto 2.5rem auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  /*background: #fff;
  border-radius: 0.2rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.18);*/
}

.es-box {
  min-height: 6.5rem;
  background: #fff;
  box-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.4);
  border-radius: 0.2rem;
  padding: 0.5rem;
  display: flex;
  margin: 1.1rem 1.5rem;
  flex-basis: 47rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.18);
  transition: all 0.2s ease;
}

.es-box:hover {transform: scale(1.06)}

.box-left {
  border-right: 0.1rem solid #efefef;
  padding-right: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.giorno {
  text-align: center;
  font-size: 1.3rem;
}

.numero {
  text-align: center;
  font-size: 2.7rem;
  line-height: 2.2rem;
}

.box-center {
  display: flex;
  padding: 0 0.5rem; 
  flex: 3;
  justify-content: center;
  align-items: center;
}

.titolo {
  font-size: 1.8rem;
  text-align: center;
}

.box-right {
  display: flex;
  border-left: 0.1rem solid #efefef;
  padding: 0 0.3rem 0 0.8rem;
  justify-content: center;
  align-items: center;
}

.flag-circle {
  display: flex;
  border: 0.2rem solid #dadada; 
  width: 3rem; 
  height: 3rem;
  border-radius: 50%;
  text-align: center;
  color: #fec153;
  font-size: 2.5rem;
  background: #f2f2f2;
  justify-content: center;
  align-items: center;
}

@keyframes bounceAnimation{
  0% {
    transform:  translate(0rem,0rem)  ;
  }
  15% {
    transform:  translate(0rem,-1.2rem)  ;
  }
  30% {
    transform:  translate(0rem,0rem)  ;
  }
  45% {
    transform:  translate(0rem,-1.2rem)  ;
  }
  60% {
    transform:  translate(0rem,0rem)  ;
  }
  75% {
    transform:  translate(0rem,-0.5rem)  ;
  }
  100% {
    transform:  translate(0rem,0rem)  ;
  }
}