section.hero {
    position: relative;
    z-index: 1;

    width: 100%;
    height: 100dvh;

    display: flex;
    flex-direction: column;

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

    text-align: center;
    overflow: hidden;

}   section.hero .container {
    width: 100%;
    height: auto;

}   section.hero .container h1 {
    font-size: 35px;
    font-weight: bold;

    text-transform: uppercase;

}   section.hero .container p {
    font-size: 12px;

}

section.about {
    position: relative;
    z-index: 1;

    width: 100%;
    height: auto;

    display: flex;
    flex-direction: column;

    justify-content: flex-start;
    align-items: flex-start;

    background-image: url(../assets/about-bg.jpg);
    background-repeat: no-repeat;

    background-position: center center;

    background-size: 100% auto;
    background-attachment: fixed;
    
    gap: 15px;

}   section.about::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #000000;
    opacity: .5;
    z-index: -1;

}   section.about p {
    font-size: 15px;

}   section.about p img {
    pointer-events: none;
    width: 200px;
    aspect-ratio: 1/1;
    
    object-fit: cover;
    float: right;

    border-radius: 50%;
    shape-outside: circle();

    margin: 5px;
    
}

section.skills {
    display: flex;
    flex-direction: column;

    justify-content: flex-start;
    align-items: flex-start;

    gap: 0;
    
}   section.skills h2 {
    margin-bottom: 20px;

}   section.skills h3 {
    font-size: 18px;
    margin-bottom: 5px;

}   section.skills ul {
    margin-bottom: 15px;
    font-size: 15px;
}