*{
    background-color: rgb(32, 32, 32);
    font-family: "sinete", sans-serif;
    font-weight: 800;
    font-style: normal;
    margin-left: 10px;
}

html{
    background-attachment: fixed;
    background-repeat: no-repeat;
}

a{
    text-decoration: none;
}

a:visited{
    color: rgb(0, 0, 255);
}

#description-container{
    position: absolute;
    top: 6%;
    left: 30%;
    color: yellow;
    font-family: "faustina", sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: large;
}

.imageDiv {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    width: 80%;
    height: 80%;
    border-radius: 15px;
    opacity: 0.95;
    z-index: 1000; /* Ensure the divs appear on top of other elements */
  }

#name{
    font-size: 5rem;
    font-weight: 1000;
    line-height: 0.3;
    z-index: 300;
}

.title{
    position: fixed;
    top: -1%;
}

h1{
    color: rgb(0, 0, 255);
    z-index: 300;
}

h4{
    color: rgb(95, 94, 94);
    background-color: transparent;
}

#email{
    position: absolute;
    top: 35%;
    left: 8%;
    font-weight: 400;
}

.navigation{
    display: flex;
    gap: 100px;
    position: fixed;
    top: 0;
    right: 5%;
}

.project{
    margin-top: 150px;
    display: flex;
}

img{
    filter: contrast(7);
    background-color: transparent;
    box-shadow: 2px 2px 4px yellow;
    z-index: 400;
}

h2{
    font-family: "faustina", sans-serif;
    font-weight: 400;
    font-style: italic;
    color: rgb(95, 94, 94);
}

li{
    font-family: "faustina", sans-serif;
    font-weight: 400;
    font-size: small;
    color: rgb(95, 94, 94);
    line-height: 0.1;
}

li:hover{
    color: yellow;
}

.fixed{
    position: fixed;
    top: 45%;
    right: 5%;
    display: flex;
}



h3{
    font-family: "faustina", sans-serif;
    font-weight: 400;
    font-size: medium;
    color: white;
    margin-top: -100px;
    margin-left: 60px;
    line-height: 1.5;
    width: 35%;
    letter-spacing: 1.1px;
}

#one{
    display: flex;
    margin-top: 150px;
}

#two{
    display: flex;
    margin-top: 600px;
    margin-left: 200px;
}

#three{
    display: flex;
    margin-top: 600px;
    margin-left: 200px;
}

#four{
    display: flex;
    margin-top: 600px;
    margin-left: 150px; 
}

#four img{
    filter: none;
}

#four h3{
    margin-top: -50px;
    left: 70px;
}

#five{
    display: flex;
    margin-top: 600px;
}

#five img{
    filter: none;
}

#six{
    display: flex;
    margin-top: 600px;
}

#seven{
    display: flex;
    margin-top: 600px;
}

#eight{
    display: flex;
    margin-top: 600px;
    margin-left: 300px;
}

#nine{
    display: flex;
    margin-top: 600px;
    margin-left: 200px;
}

#ten{
    display: flex;
    margin-top: 600px;
    margin-left: 300px;
}

#ten img{
    filter: none;
}

.hide{
    margin-top: -300px;
    color: rgb(32, 32, 32);
}

#p3{
    margin-top: -200px;
}

#p4{
    margin-top: -130px;
}




@media (max-width: 950px) {
    *{
        margin-left: 3px;
    }

    #name{
        font-size: 3rem;
        line-height: 0.4;
    }


    h4{
        font-size: 0.7rem;
    }

    #email {
        top: 33%;
        left: 5%;
    }

    h1{
        font-size: large;
    }

    .navigation{
        gap: 10px;
        right: 3%;
        top: 1%;
    }


    li{
        font-size: 0.6rem;
        margin-left: 10px;
    }

    .fixed{
        right: 3%;
        top: 55%;
        position: fixed;
    }

    .list{
        font-size: 0.7rem;
        margin-left: 10px;
    }

    h3{
        margin-top: 50px;
        margin-left: 0px;
        width: 50%;
        font-size: 0.8rem;
    }

    #one{
        display: list-item;
        margin-top: 300px;
        margin-left: 10px;
    }

    #one img{
        width: 60%;
    }

    #two{
        display: list-item;
        margin-top: 600px;
        margin-left: 10px;
    }

    #two img{
        width: 40%;
    }

    #three{
        display: list-item;
        margin-top: 300px;
        margin-left: 10px;
    }

    #three img{
        width: 60%;
    }


    #four{
        display: list-item;
        margin-top: 600px;
        margin-left: 10px;
    }

    #four h3{
        margin-top: 50px;
    }

    #five{
        display: list-item;
        margin-top: 600px;
        margin-left: 10px;
    }

    #five img{
        width: 60%;
    }

    #six{
        display: list-item;
        margin-top: 600px;
        margin-left: 10px;
    }

    #six img{
        width: 60%;
    }

    #seven{
        display: list-item;
        margin-top: 600px;
        margin-left: 10px;
    }

    #seven img{
        width: 50%;
    }

    #eight{
        display: list-item;
        margin-top: 600px;
        margin-left: 10px;
    }

    #eight img{
        width: 40%;
    }

    #nine{
        display: list-item;
        margin-top: 600px;
        margin-left: 10px;
    }

    #nine img{
        width: 30%;
    }

    #ten{
        display: list-item;
        margin-top: 600px;
        margin-left: 10px;
    }

    #ten img{
        width: 40%;
    }

    #eleven{
        display: list-item;
        margin-top: 600px;
        margin-left: 10px;
    }
    
    .image{
        margin-top: 200px;
    }
}


@media (min-width: 1380px) {
    .navigation{
        font-size: x-large;
    }

    .list{
        font-size: 1.5rem;
        margin-left: 10px;
    }

    h3{
        font-size: 1.4rem;
    }

    li{
        font-size: 1rem;
    }

    #three h3{
        margin-top: 50px;
    }

    #four h3{
        margin-top: 80px;
    }

}