/*Responsividade para aparelhos diversos*/
@media (max-width: 550px) {
body {
    font-size: 12px
}
nav ul {
    flex-direction:column;
    gap: 10px;
}
nav ul li{
    display: inline-block;
}
}
header{
    font-size: 20px;
    font-weight: bold;
}
body{
    font-size: 16px;
    font-family:'Helvetica', 'Arial', sans-serif;
    width:100%;
    margin: 0 auto;
    padding: 5px;
}
header {
    text-align:center;
    font-weight: bold;
    margin: 0 auto;
    border: 2px double rgb(56, 99, 139);
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 5px;
    background: linear-gradient(90deg, rgba(23, 172, 23, 0.253), rgb(46, 208, 236));
    border-radius: 15px;
}

#geral{
    background: linear-gradient(90deg, rgb(22, 194, 194), rgba(40, 163, 35, 0.336));
    border-radius: 15px;
    padding: 10px;
    border: 2px solid rgb(56, 99, 139);
}
label {
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
    font-weight: bold;
}
input{
    border-radius: 25px;
    padding: 5px;
    border: 2px solid gray;
    width: 100%;
    /*para não ultrapassar o width setado em @media*/
    max-width: 750px;

}
textarea{
    border-radius: 25px;
    padding: 10px;
    border: 2px solid gray;
    width: 100%;
}
form{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    border-radius: 15px;
}
button{
    display: block;
    color: white;
    font-weight: bold;
    margin: 0 auto;
    margin-top: 5px;
    padding: 5px;
    background:linear-gradient(30deg, rgb(56, 99, 139), rgb(46, 208, 236));
    border-radius: 5px;
}
button:hover{
    background:linear-gradient(30deg, rgba(14, 6, 6, 0.274), rgb(28, 88, 16));
    transform: scale(1.1);
    cursor: pointer;
}
li {
    padding:5px 0px 5px 0px;
}
h1, h2, h3, p{
    text-align: center;
}
nav{
    background: linear-gradient(30deg, rgb(56, 99, 139), rgb(46, 208, 236));
    padding: 20px;
    border: 2px groove rgb(56, 99, 139);
    border-radius: 15px;
    text-align: center;
}
nav li{
    display: inline;
    background-color: rgba(255, 246, 241, 0.466);
    padding: 4px;
    border-radius: 5px;
}
nav a{
    text-decoration: none;
    color:rgb(255, 255, 255);
    background:linear-gradient(30deg, rgb(16, 50, 82), rgba(10, 64, 73, 0.651));
    padding: 4px;
    border-radius: 25px;
    font-weight: bold;
}
nav a:hover{
    padding: 6px;
    /*gostei de usar esse gradient*/
    background: linear-gradient(30deg, rgb(54, 10, 10), rgb(197, 34, 34));
    text-transform: uppercase;
    font-style: bold;
    border-radius: 30px;
    /*efeito de transição suave*/
    transition: all 0.3s ease-in-out;
}
main a{
    display: block;
    text-align: center;
    text-decoration: none;
}
/*seção article e efeitos de transição, sombra e espaçamento*/
article {
    border: 2px solid rgb(56, 99, 139);
    background: linear-gradient(30deg, rgb(252, 252, 252), rgb(46, 208, 236));
    padding-bottom: 15px;
    border-radius: 15px;
    margin: 10px;
}
#negrito{
    font-weight: bold;
    font-size: 20px;
}
#negrito a{
    text-decoration: none;
    font-weight: normal;
    font-size: 16px;
} 
article:hover{
    transform: translate(0, 5px);
    box-shadow: 0 10px 10px gray;
    transition: all 0.2s ease-in;
}
article a:hover{
    text-decoration: underline;
    color: rgb(156, 45, 51);
}
/*mudando a cor das bolinhas de li*/
#hobbies li{
    list-style-type: none;
    padding-left: 0;
}
#hobbies li::before {
    content: '•';
    color: red;
    margin: 0 8px 0 0;
}
footer{
    font-size: 15px;
    background: linear-gradient(90deg, rgba(23, 172, 23, 0.253), rgb(46, 208, 236));
    border-radius: 15px;
}