*{
    box-sizing:border-box;
}


body{

    margin:0;
    background:#05050d;
    color:white;
    font-family:Arial, Helvetica, sans-serif;
    text-align:center;

}


/* TELA DE ABERTURA */

#intro{

    position:fixed;
    width:100%;
    height:100vh;

    background:
    linear-gradient(
    rgba(0,0,0,0.5),
    rgba(0,0,0,0.9)
    ),
    url("images/castle.jpg");

    background-size:cover;
    background-position:center;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    z-index:10;

    animation:fadeIn 2s;

}



.intro-logo{

    width:450px;
    max-width:80%;

    animation:pulse 3s infinite;

}



#intro h2{

    font-size:25px;
    text-shadow:0 0 15px white;

}



#intro button{

    background:#8b0000;
    color:white;

    border:2px solid white;

    padding:15px 40px;

    font-size:20px;

    border-radius:10px;

    cursor:pointer;

}





/* CABEÇALHO */


header{

    background:#11111c;

    padding:20px;

}



.logo{

    width:350px;
    max-width:80%;

}





nav{

    margin-top:20px;

}



nav a{

    color:white;

    text-decoration:none;

    margin:10px;

    font-size:18px;

}



nav a:hover{

    color:#ffcc00;

}





button{

    padding:8px 15px;

    margin:5px;

    cursor:pointer;

}





/* BANNER PRINCIPAL */


.hero{


    background:

    linear-gradient(
    rgba(0,0,0,.5),
    rgba(0,0,0,.8)
    ),

    url("images/castle.jpg");


    background-size:cover;

    background-position:center;

    padding:120px 20px;

}



.hero h1{

    font-size:50px;

    text-shadow:
    0 0 10px black,
    0 0 20px purple;

}



.hero p{

    font-size:24px;

}





/* SEÇÕES */


section{

    max-width:900px;

    margin:50px auto;

    padding:20px;

}



h2{

    color:#ffcc00;

    font-size:32px;

}





ul{

    list-style:none;

    padding:0;

}



li{

    padding:8px;

    font-size:20px;

}





/* IMAGENS */


section img{

    width:400px;

    max-width:90%;

    border:3px solid white;

    margin:10px;

}





/* BOTÕES */


.button{

    display:inline-block;

    background:#990000;

    color:white;

    text-decoration:none;

    padding:15px 45px;

    border-radius:10px;

    font-size:20px;

}



.button:hover{

    background:#cc0000;

}





footer{

    background:#11111c;

    padding:30px;

    margin-top:50px;

}





/* ANIMAÇÕES */


@keyframes pulse{


0%{

transform:scale(1);

}


50%{

transform:scale(1.05);

}


100%{

transform:scale(1);

}


}



@keyframes fadeIn{


from{

opacity:0;

}


to{

opacity:1;

}


}

.enter-arrow {

    font-size: 45px;
    text-align: center;

    position: relative;
    height: 0;

    top: -35px;

    animation: arrowMove 0.8s infinite alternate;

}


@keyframes arrowMove {

    from {
        transform: translateY(0);
    }


    to {
        transform: translateY(10px);
    }

}