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

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

html {
	font-size: 62.5%; 
}

body {
    color : #222059;
	background-color:#F2F2F2;
	font-family:  lato, Arial, Verdana, sans-serif;
	font-size: 1.6rem;
	line-height: 1.75;
}

h1 {
    font-size: 4rem;
    line-height: 5rem;
    font-weight: bold;
    margin-bottom: 3rem;
    font-family: archivo-black, sans-serif;
    font-weight: 400;
    font-style: normal;
}
h2 {
    font-size: 2rem;
    line-height: 2rem;
    margin-bottom: 3rem;
    font-family: archivo-black, sans-serif;
    font-style: normal;
}
p {
    font-size: 1.8rem;
}
a,
a:active,
a:visited {
    color: #222059;
}
a:hover {
    background-color: #AD3636;
    color: #ffffff;
}
/* ------------------- */
/* Top Section Content */
/* ------------------- */
section.top {
    width: 100%;
    height: 80rem;
    overflow: hidden;
}
.top article {
    width: 50%;
    float: left;
    height: 90rem;
}
    article.item_right{
        padding: 3rem;
        margin-top: 2rem;
    }
nav {
    text-align: right;
    margin-right: 3rem;
}
    nav a {
        margin-left: 2rem;
        padding: 0.5em 1rem;
        text-decoration: none;
        background-color: #F95A56;
    }
figure {
    text-align: center;
    width: 80%;
    margin: auto;
    margin-top: 8rem;
}

textarea {
    width: 60%;
    display: block;
    border-radius: 10px;
    padding: 1.2rem;
    border: 0;
    margin:auto;
    margin-top: 3rem;
    color: #fff;
    font-family:  lato, Arial, Verdana, sans-serif;
    font-size: 1.5rem;
    background-color: rgba(34, 32, 89, 0.8);
}
    textarea::placeholder {
        color: #E6E6E6;
        font-family:  lato, Arial, Verdana, sans-serif;
        font-size: 1.3em;
      }
button {
    padding: 1rem 2rem;
    border-radius: 20px;
    display: inline-block;
    border: 0;
    margin: 2rem 0;
    color: #222059;
    background-color: #F95A56;
}

button:hover {
    background-color: #AD3636;
    color: #ffffff;

}
/* ------------------- */
/*      Difficulty       */
/* ------------------- */



.levels input[type="radio"] {
    opacity: 0;
    position: fixed;
    width: 0;
  }
  
  .levels label {
      display: inline-block;
      background-color: #ddd;
      padding: 10px 20px;
      font-family: sans-serif, Arial;
      font-size: 16px;
      border: 2px solid #444;
      border-radius: 4px;
  }
  
  .levels label:hover {
    background-color: #D7D7F4;
  }
  
  .levels input[type="radio"]:focus + label {
      border: 2px dashed #444;
  }
  
   .levels input[type="radio"]:checked + label {
      color: #fff;
      background-color: #242259;
      border-color: #F15B58;
  }
  
  .levels .veryeasy {
      background-color: #8AC7A3;
  }
  .levels .easy {
    background-color: #B0DBBF;
  }
  .levels .neutral {
    background-color: #EBE5DC;
  }
  .levels .difficult {
    background-color: #FBCCAA;
  }
  .levels .verydifficult {
    background-color: #EEA19A;
  }






/* ------------------- */
/*      Comments       */
/* ------------------- */
.info {
    background-color: #222059;
    height: 40rem;
    color: #ffffff;
    text-align: center;
}
    .info article {
        width: 55%;
        padding-top: 15rem;
        margin: auto;
    }
    .info a {
        color: #ffffff;
    }
    
/* ------------------- */
/*      Footer         */
/* ------------------- */
footer { 
    background-color: #070733;
    color: #fff;
    height: 12rem;
}
    footer article {
        width: 90%;
        overflow: hidden;
        margin: auto;
        padding-top: 2rem;
    }
    footer img {
        display: block;
        float: left;
    }
    footer div {
        float: right;
        text-align: right;
    }