* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;

    body {
        background-image: url('https://raw.githubusercontent.com/arthurafoliver-cyber/mywebsite/main/images/kanagawa.png?raw=true');  
        background-size: cover;
        background-position: center;
        display:flex;
        margin: 0;
        background-color:aliceblue
        background-attachment: fixed;
        font-family:Arial, sans-serif;
    
    }
    .title {
        color:#2e3257;
        font-size: 48px;
        font-family:'Times New Roman', Times, serif;
        font-weight:bolder;
    }
    .titulo {
        color: #2e3257;
       font-size: 78px;
       padding:50px;
       font-family:'Times New Roman', Times, serif;
       font-weight:bolder;

    }
    .ports {
        padding:20px;
        color:#627d9a;
        font-family:'Times New Roman', Times, serif;
        font-size:48px;

    }
    h1 {
  color: #2e3257
    }
    .musica {
    padding:20px;
        color:#A63A2B;
        font-size:48px;
        font-family:'Times New Roman', Times, serif;
        font-weight:bolder;
    }
    .likes {
        padding:20px;
        color:#627d9a;
        font-family:Georgia, 'Times New Roman', Times, serif;
        font-weight:bold;
        font-size:32px;
    }
    .music {
        padding:20px;
        color:#2e3257;
        font-family:Georgia, 'Times New Roman', Times, serif;
        font-size:32px;
        font-weight:bold;
    }
    .about-me {
        font-family:Georgia, 'Times New Roman', Times, serif;
        font-size:32px;
        font-weight:bold;
        padding:20px;
        text-align:center;
        color:#627d9a
    }
    .hobbies {
        font-size: 48px;
        font-family:'Times New Roman', Times, serif;
        padding:20px;
        color:#2e3257
    }
    nav {
        min-height: calc(100vh - 20px);
        margin:10px;
        border-radius: 20px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);

        width: 120px;
        overflow: hidden;
        transition: width 0.3s;
  min-height: 100vh;
  background-color: #16324F;
  backdrop-filter: blur(5px);
  padding: 20px 10px;
}
nav:hover {
    width:200px;
}
nav a {
    display:block;
    color:white;
    text-decoration:#F5EAD3;
    padding:10px;
    margin:5px 0;
    border-radius:8px;
    white-space:nowrap;

}
nav a:hover {
    background-color: #FDF9EF;
    color: #16324F;
}
section {
    background-color:rgba(253, 249, 239, 0.9);
    backdrop-filter: blur(1px);
    color: #1B2A3A;
    padding: 25px;
    margin: 20px;
    border:3px solid #274B6D;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba (0, 0, 0, 0.3);
}
.content {
    flex: 1;
    padding: 20px;
}
    .projects {
        margin-top: 50px;
        color:#274B6D;
        font-size: 48px;
        font-family:'Times New Roman', Times, serif;
        font-weight:bolder;
        padding:40px;

    }
    .experience {
        font-size:32px;
        padding:20px;
        font-family:Georgia, 'Times New Roman', Times, serif;
        color:#A63A2B;
        font-weight:bold;
    }
    .languages {
        font-size:32px;
        padding:20px;
        font-family:Georgia, 'Times New Roman', Times, serif;
        color:#1B2A3A;
        font-weight:bold;
    }

    }
    .about-me {
        margin-top: 20px;
        color:#A63A2B;
        font-size: 56px;
        font-family:'Times New Roman', Times, serif;
        font-weight:bolder;

    }
    .about-me-paragraph {
        margin-top:20px;
        color:#1B2A3A;
        font-size: 34px;
        font-family:'Times New Roman', Times, serif;
        font-weight:bolder;
     }
     img {
        width: 300px;
        border: 3px solid #274B6D;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba (0, 0, 0, 0.3);
        background-color: #FDF9EF;
        padding:10px;
     }
     .contact {
        margin-top: 20px;
        color:#274B6D;
        font-size: 48px;
        font-family:'Times New Roman', Times, serif;
        font-weight:bolder;
     }