body{
    margin: 0;
    font-family: Arial, sans-serif;
    color: #e9f3fc;

    /* Background Photo */
    background-image:
        linear-gradient(rgba(68, 81, 151, 0.55),
        rgba(68, 81, 151, 0.55)),
        url("1bg.jpg");

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

nav{
    background-color: rgba(34, 34, 34, 0.90);
    color: white;

    padding: 20px 40px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    position: sticky;
    top: 0;
    z-index: 1000;
}

nav h2{
    color: #00a8e8;
    margin: 0;
}

.menu a{
    color: white;
    text-decoration: none;
    margin-left: 20px;
    font-size: 17px;
    transition: 0.3s;
}

.menu a:hover{
    color: #00a8e8;
}

.home{
    height: 500px;

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

    text-align: center;
    background-color: transparent;
}

.home-content h1{
    font-size: 42px;
    color: #e9f3fc;
}

.home-content p{
    font-size: 20px;
    color: #f7f7f7;
}

.profile-picture{

    width: 140px;
    height: 140px;

    background-image: url("profilepic.png");
    background-size: cover;
    background-position: center;

    border-radius: 50%;
    border: 4px solid #00a8e8;

    margin: auto;
    margin-bottom: 20px;
}

button{

    background-color: #00a8e8;
    color: white;

    border: none;

    padding: 10px 20px;

    border-radius: 5px;

    cursor: pointer;

    font-size: 15px;

    transition: 0.3s;
}

button:hover{

    background-color: #0088c2;

}

section{

    padding: 60px 10%;

}

section h2{

    text-align: center;

    font-size: 40px;

    margin-bottom: 30px;

    color: #e9f3fc;

}

.about-content{

    background-image: url("aboutmepic.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    max-width: 800px;

    margin: auto;

    padding: 30px;

    line-height: 1.8;

    border-radius: 10px;

    color: white;

    background-color: rgba(0,0,0,0.30);

}

.info-box{

    background-image:
        linear-gradient(
            rgba(0,0,0,0.35),
            rgba(0,0,0,0.35)
        ),
        url("PIbackground.jpg");

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

    max-width: 650px;

    margin: auto;

    padding: 30px;

    border-radius: 10px;

    line-height: 1.8;

    color: white;

}

#hobbies{
    background-color: transparent;
}

.hobbies-box{

    background-image:
        linear-gradient(
            rgba(70, 77, 109, 0.75),
            rgba(70, 77, 109, 0.75)
        ),
        url("hbg.jpg");

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

    max-width: 700px;

    margin: 20px auto;

    padding: 25px;

    border-radius: 10px;

    line-height: 1.8;

    color: white;

}

.goals-container{

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

}

.goals{

    background-color: rgba(109, 203, 247, 0.95);

    width: 250px;

    padding: 25px;

    text-align: center;

    color: #f8f9fa;

    border-radius: 8px;

    box-shadow: 0 2px 8px rgba(0,0,0,0.3);

    transition: 0.3s;

}

.goals:hover{

    transform: translateY(-8px);

}

.goals h3{

    color: #00a8e8;

}

footer{

    text-align: center;

    padding: 20px;

    background-color: rgba(34,34,34,0.9);

    color: white;

    margin-top: 50px;

}

footer p{

    margin: 5px;

}
section{

    display: none;

    padding: 60px 10%;

}

/* Show Home first */
#home{

    display: flex;

}

.show{

    animation: fadeIn 0.7s;

}

@keyframes fadeIn{

    from{

        opacity: 0;

        transform: translateY(25px);

    }

    to{

        opacity: 1;

        transform: translateY(0);

    }

}

@media screen and (max-width:700px){

    nav{

        display: block;

        text-align: center;

    }

    .menu{

        margin-top: 15px;

    }

    .menu a{

        display: inline-block;

        margin: 8px;

    }

    .home{

        height: auto;

        padding-top: 60px;

        padding-bottom: 60px;

    }

    .home-content h1{

        font-size: 30px;

    }

    .home-content p{

        font-size: 18px;

    }

    .profile-picture{

        width: 120px;

        height: 120px;

    }

    .goals-container{

        display: block;

    }

    .goals{

        width: auto;

        margin-bottom: 20px;

    }

    .hobbies-box,
    .about-content,
    .info-box{

        width: auto;

    }

    section{

        padding: 50px 7%;

    }

}