/* GERAL */
@font-face{
    font-family: "Stars";
    src:url("../font/shooting-stars.ttf");
}

body{
    background-image: url("../img/fundo.svg");
    background-repeat: repeat;
}
h1,h2,h3,h4,h5,h6{
    font-family:"Stars",sans-serif;
}
section{
    padding: 3%;
    margin: 5% 0;
    border-radius: 5%;
    background-color:rgba(0,0,0,0.5);
    border: 2px dotted #FFF;
}
section p{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 12pt;
}
.cartoes a{
    text-decoration: none;
    color:rgb(206, 50, 122);
}
.cartoes div{
    transition: all 1s;
    display: none;
}
.redes-sociais{
    list-style: none;
}
.redes-sociais li{
    display: inline;
}

/* MOBILE */
@media only screen and (max-width:800px){
    body{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin: 0 5%;
        text-align: center;
        color: #FFF;
    }
    header{
        transition: all 1s;
        position: fixed;
            left: -110%;
            top:10%;
        padding: 2%;
        background-color: #00000085;
        width: 50%;
        height: 100%;
    }
    header nav{
        list-style: none;
        text-align: left;
        color: #FFF;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 600;
    }
    header nav li{
        margin: 6% 0;
    }
    header nav li a{
        text-decoration: none;
        color: white;
    }
    header nav p{
        font-family: 12pt;
        font-weight: 100;
    }
    header nav #logoCapivara{
        width: 90%;
        border-radius: 20%;
    }
    #icone_capivara_mobile_pc {
        width: 80%;
    }
    #icone_capivara_mobile_pc img {
        border-radius: 20%;
        width: 90%;
    }
    #btnMenu{
        position: fixed;
            left: 0;
        font-size: 32pt;
        border: 2px solid #FFF;
        border-radius: 20%;
        background-color: #000;
        color: #FFF;
    }
    #escolhaDePersonagem{
        list-style: none;
        text-align: left;
        color: #FFF;
    }
    #escolhaDePersonagem a{
        text-decoration: none;
        color:#FFF;
        font-family: monospace;
    }
    #Galeria img{
        width: 90%;
    }
    #Galeria ul{
        list-style: none;
    }
    #Galeria ul li{
        margin: 3% 0;
    }
    #Contato p{
        padding: 5%;
        background-color: #f14c5a;
        font-weight: 800;
    }
    #Contato p a{
        text-decoration: none;
        color: white;
    }
    #Contato form textarea{
        width: 80%;
    }
}


/* PARA PC */
@media only screen and (min-width:800px){
    body{
        font-family: sans-serif;
        margin: 0 20%;
        color:#FFF;
    }  
    /*Cabeçalho*/
    #btnMenu{
        display: none;
    }
    header{
        margin-top: 5%;
    }
    header nav li{
        display: inline;
    }

    header #logoCapivara{
        float: left;
        width: 15%;
        height: 15%;
    }
    header nav{
        text-align: right;
    }

    header nav li a {
        padding:1%;
        border: 2px solid #FFF;
        font-family: 'Ubuntu','Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 700;
        text-decoration: none;
        color: #FFF;
    }
    header nav li a:hover{
        transition: all 0.5s;
        background-color: #FFF;
        color: #000;
    }
    header nav p{
        visibility: hidden;
    }
    /*Guia Sobre */
    #Sobre{
        text-align: center;
    }
    /* Guia - Quem somos ? */
    #QuemSomos {
        text-align: center;
    }
    #QuemSomos .redes-sociais li img{
        opacity: 0.75;
    }
    #QuemSomos .redes-sociais li img:hover{
        opacity: 1;
    }
    #escolhaDePersonagem li{
        display: inline-block;
    }
    #escolhaDePersonagem li a {
        text-decoration: none;
        color: white;
        font-family: monospace;
        opacity: 0.6;
    }
    #escolhaDePersonagem li a:hover{
        transition: all 1s;
        opacity: 1;
    }
    .cartoes div p{
        text-align: justify;
        text-indent: 5%;
    }
    /* Guia - Galeria */
    #Galeria{
        text-align: center;
    }
    #Galeria ul{
        list-style: none;
    }
    #Galeria ul li{
        display: inline;
    }
    #Galeria ul li img{
        width: 25%;
        opacity: 0.5;
    }
    #Galeria ul li img:hover{
        transition: all 1.2s;
        opacity: 1;
        zoom: 1.3;
    }
    /*Formulário de Contato*/
    #Contato{
        text-align: left;
    }
    #Contato h1{
        text-align: center;
    }
    #Contato p{
        padding: 5%;
        text-align: center;
        font-family: "Stars";
        font-weight: 500;
        text-transform: uppercase;
    }
    #Contato p:hover{
        transition: all 1.2s;
        background-color: #f14c5a;
        font-weight: 800;
    }
    #Contato p a{
        text-decoration: none;
        color: white;
    }
    #Contato form{
        position: relative;
        left: 30%;
    }
    #Contato form textarea{
        width: 330px;
        height: 140px;
    }
    /*Rodapé*/
    footer{
        background-color: rgba(0,0,0,0.5);
        text-align: center;
    }
}