body {
    overflow: hidden;
}

.all {
    background: linear-gradient(to bottom right, var(--newwhite), var(--beigeyellow));
}

#content {
    width: 95%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
#name {
    font-family: "Climate Crisis";
    font-size: var(--hugeheader);
    color: var(--darknavy);
    text-transform: uppercase;
    margin-top: 40px;
    line-height: 130px;
}
#field {
    font-family: "Alata";
    font-size: var(--smallheader);
    margin-top: -140px;
    color: var(--darkblue);
    font-weight: normal;
}
#project-header {
    text-align: right;
    font-family: "Climate Crisis";
    color: var(--darkblue);
    font-size: var(--smallheader);
    margin: 0;
}
#projectdiv, #project2div {
    display: flex;
    justify-content: end;
    height: 60px;
}
#project1, #project2 {
    text-align: right;
    font-family: "Climate Crisis";
    color: var(--darknavy);
    font-size: var(--bigheader);
    height: 60px;
    margin: 0;
    z-index: 3;
    transition: 0.2s;
}
#project2div {
    width: 100%;
    margin-top: -30px;
}
#project1-arrow, #project2-arrow {
    font-family: "Climate Crisis";
    color: var(--darkblue);
    font-size: var(--bigheader);
    margin: 0;
    margin-left: 0px;
    opacity: 0%;
    width: 0px;
    transition: 0.2s;
    
}
#project1:hover, #project2:hover {
    cursor: pointer;
    color: var(--lightviolet);
}
#project1:hover + #project1-arrow, #project2:hover + #project2-arrow {
    cursor: pointer;
    margin-left: 15px;
    opacity: 100%;
    width: 50px;
    color: var(--lightviolet);
}

#content-last-line {
    display: flex;
    align-items: center;
    height: 80px;
}
#socials {
    width: 150px;
    height: 100px;
    z-index: 2;
}
#email, #linkedin {
    width: 50px; height: auto;
    filter: opacity(85%);
    transition: 0.2s;
}
#linkedin {
    margin-left: 5px;
}
#email:hover, #linkedin:hover {
    cursor: pointer;
    filter: opacity(60%);
}

#pfp {
    position: absolute;
    width: 575px;
    bottom: -30px;
    left: 150px;
    filter: saturate(0%) brightness(30%);
    z-index: 100;
    pointer-events: none;
}
#pfplines {
    position: absolute;
    width: 900px;
    height: 760px;
    transform:rotateY(0deg);
    bottom: -220px;
    left: 420px;
    z-index: -99;
    pointer-events: none;
    animation: pfplines 4s infinite;
}
@keyframes pfplines {
    0% {width: 900px; transform: rotateY(0deg);}
    30% {width: 950px;}
    60% {height: 800px;transform:rotateY(2deg);}
    100% {width: 900px; transform: rotateY(0deg);}
}

#email-copy {
    font-family: "Alata";
    font-size: var(--text);
    margin-top: -50px;
    opacity: 0;
    transition: 0.2s;
}

@media only screen and (max-width: 1024px) {
    #overlay-menu, #menu-links, #menu-burger {
        position: fixed;
    }
    #content {
        margin-top: 700px;
        position: relative;
        z-index: 0;
    }
    #content-last-line {
        flex-direction: column;
    }
    #socials {
        width: 100%;
        margin-top: -450px;
    }
    #email-copy {
        margin-top: -500px;
    }
    #email, #linkedin {
        width: 150px;
    }
    #linkedin {
        margin-left: 15px;
    }
    #field {
        margin-bottom: 400px;
    }
    #projectdiv, #project2div {
        
        z-index: 201;
    }
    #project2div {
        margin-top: 380px;

    }
    #pfp {
        top: 350px;
        width: 400px;
        left: 50px;
    }
    
    #pfplines {
        top: 275px;
        width: 440px;
        height: 400px;
        left: 200px;
        animation: pfplines 4s infinite;
    }
    @keyframes pfplines {
        0% {width: 440px;  transform: rotateY(0deg);}
        30% {width: 450px;}
        60% {height: 452px;transform:rotateY(1deg);}
        100% {width: 440px; transform: rotateY(0deg);}
    }
}