@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Pattaya&display=swap');

* {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    box-sizing: border-box;
}

body {font-family: Arial, Helvetica, sans-serif;}
a{text-decoration: none; color: black;}
li {list-style: none;}

/*CABECALHO*/
.cabecalho {
    width: 100%;
    height: 90px;
    padding: 20px 5%;
    background-image: linear-gradient(to left, #0868ad70, #1e8c646b);
    border-radius: 2px;
}

.cabecalho h1 {
    color: white; 
    float: left; 
    font-family: 'Pattaya', sans-serif;
    font-size: 2.5em;
}

.cabecalho img {width: 100px; height: 90px; padding: 20px 5%;}

/*MENU*/
.nav-bar {
    width: 100%;
    background-image: linear-gradient(to right, #0868ad70, #1e8c646b);
    border-radius: 2px;
    height: 43px;
}

.nav-bar ul li{
    float: left;
    margin-left: 50px;
    padding: 7px 5%;
    transition: 0.5s;
}

.nav-bar ul li:hover {
    background-color: #0868ad70;
    border-radius: 5px;
}

.nav-bar a {font-weight: bolder; font-family: 'Pattaya', sans-serif; font-size: 1.3em;}

.nav-bar a:hover {color: white;}

/*PRINCIPAL*/
.principal {
    float: left;
    width: 100%;
    min-height: 500px;
    padding: 10px 2%;
    background-color: rgba(128, 128, 128, 0.137);
}

.principal p {font-size: 1.2em; text-indent: 0.5em;}

/*RODAPE*/
.rodape {
    float: left;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to left, #0868ad70, #1e8c646b);
    border-radius: 2px;
}

.rodape img {margin-right: 5px;}

.rodape p {text-align: center; padding: 10px; font-family: 'Pattaya', sans-serif; font-size: 1.3em;}

.rodape a {color: white; padding: 4px; color: black; transition: 0.5s;}
.rodape a:hover {color: white}

.rodape ul li{
    display: inline-block;
    padding: 10px 8%;
}