/* Cores
#eec305 - amarelo escuro
#ffe143 - amarelo claro
#000000 - preto
*/

/* Imports */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400&display=swap');

/* Fonte e texto */
p, h1, h2, h3, h4, h5, h6, span, div{
    font-family: 'Nunito', sans-serif;
}

h1{
    font-size: 35px;
}

h2{
    font-size: 28px;
}
h3{
    font-size: 24px;
}
h4{
    font-size: 20px;
}
h5{
    font-size: 18px;
}

p, a{
    font-size: 17px;
}
img{
    max-width: 100%;
    padding: 10px 0;
}

/* HTML e BODY */

html{
    width: 100%;
}

body{
    width: 100%;
    margin: 0;
}

.container{
    width:  80%;
    margin: auto;
    padding: 10vh 0;
}
.container-artigo{
    width:  55%;
    margin: auto;
    padding: 10vh 0;    
}
@media all and (max-width: 400px){
    .container-artigo{
        width: 80%;
    }
}

/* Butoes */

a.botao2{
    display:inline-block;
    padding:0.5em 1.2em;
    border:0.1em solid #ffffff;
    margin: 5px 0.3em 0.3em 5px;
    border-radius:0.12em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Nunito',sans-serif;
    font-weight:300;
    color: #ffffff;
    text-align:center;
    transition: all 0.2s;
}
a.botao2:hover{
    color:#ffe143;
    border: 0.1em solid #ffe143;
    background-color:#000000;
}

a.botao{
    display:inline-block;
    padding:0.5em 1.2em;
    border:0.1em solid #000000;
    margin: 5px 0.3em 0.3em 5px;
    border-radius:0.12em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Nunito',sans-serif;
    font-weight:300;
    color: #000000;
    text-align:center;
    transition: all 0.2s;
}
a.botao:hover{
    color:#ffe143;
    border: 0.1em solid #000000;
    background-color:#000000;
}
@media all and (max-width:30em){
    a.botao{
        display:block;
        margin:0.4em auto;
    }
}

/* Index */

.head{
    width: 100%;
    text-align: center;
    padding: 20vh 0;
    background-color: #000000;
    color: #ffe143;
    margin: auto;
}
.head div{
    width: 90%;
    margin: auto;
}

.participar{
    text-align: center;
    padding: 10vh 0;
}

.participar-div{
    max-width: 1000px;
    text-align: center;
    margin: auto;
}

.participar-div2{
    width: auto;
    text-align: center;
    border: 2px solid #ffe143;
    border-radius: 5px;
}

.transcricao{
    background-color: #ffe143;
    color: #000000;
}

.importante{
    background: white;
    padding: 20px 30px 20px 30px;
    margin: 50px auto;
    width: calc(100% - 80px);
    font-size: 20px;
    border: solid 2px;
  box-shadow: 15px 15px 0 0 #ffe143;
}