@charset "UTF-8";

   @font-face {
    font-family: 'arcade-i';
    src: url(fontes/ARCADE_I.TTF)
    format('truetype');
}
  @font-face {
    font-family: 'arcade-n';
    src: url(fontes/ARCADE_N.TTF)
     format('truetype');
  }
  @font-face {
    font-family: 'arcade-r';
    src: url(fontes/ARCADE_R.TTF)
    format('truetype');
  }
  @font-face {
    font-family: 'pixeled';
    src: url(fontes/Pixeled.ttf);
  }
  @import url('https://fonts.googleapis.com/css2?family=Sixtyfour&display=swap');

*{
    margin: 0px;
    padding: 0px;
}
header{
    background-color: #141414;
    height: 200px;
}
header h1{
    font-family: "arcade-n";
    font-size: 4em;
    font-weight: lighter;
    color: #361780;

    display: block;
    position: absolute;
    top: 8%;
    left: 10%;
}
nav{
    position: relative;
    top: 30%;
    left: 25%;
}

body{
    background-color: #141414;
}
div#div-mestre{
    margin: auto;
    text-align: center;
}
section{
    width: 300px;
    height: 400px;
    padding: 5px;
    margin: 30px;

    display: inline-block;
    
    background-color: #111111;
    /*Border*/
    box-shadow: inset -3px 3px 10px 3px rgba(8, 8, 8, 0.384);
}
div.lateral{
    width: 40px;
    height: 20px;
    background-color: white;
    margin-right: 10px;
    display: inline-block;
    
}
div#desafios{
    background-color: #631519b7;
}
div#exercicios{
    background-color: rgba(12, 65, 126, 0.74);
}
div#treino{
    background-color: rgba(163, 180, 8, 0.705);
}
h2{
    font-family: 'arcade-i';
    font-size: 1.6em;
    font-weight: lighter;

    margin-top: 10px;
    color: rgb(156, 156, 156);
    display: inline-block;
    position: sticky;
}
li {
    
    font-family: 'arcade-r';
    font-weight: lighter;
    font-size: 1em;
    line-height: 2em;
    color: #74787c;
    margin-left: 10px;
    list-style-type: none;
}
li > a{
    text-decoration: none;
    color: #74787c;
    transition: 0.4s;
}
li > a:hover{
    color: #371780b7;
    transition-delay: 0s;
}
.lista-interna{
    
    font-size: 0.8em;
    left: 4%;
    position: relative;
    list-style: circle;
}
div.lista{
    height: 360px;
    overflow-y: auto;
    scrollbar-width: none;
}
.lista > ul{
    margin: 20px;
    padding: 10px;
    text-align: left;
}