section{
    display: flex;
    flex-direction: row;
}
.Intro{
    position: relative;
    width: 100%;
    height: calc(100vh - 80px);
    overflow: hidden;
    display: flex;
    align-items: center;
    
}
.titleName{
    position: absolute;
    top: 40%;
    left: 25%;
    transform: translate(-50%,-50%);
    z-index: 10;
    width: 40vw;
    height: auto;
    text-align: center;
    color: white;
    pointer-events: none;
    font-family: 'Courier New', Courier, monospace;;
    background-color: rgb(26,26,26,0.85);
    border-radius: 2.5rem;
    
}
.titleName p1{
font-size: 4vw;
    word-spacing: -7px;
    font-weight: 300;
    text-wrap: nowrap;

}
.titleName p4{
    font-size: 2vw;
    word-spacing: -7px;
    font-weight: 300;
    text-wrap: nowrap;
    
}

.profilePic{
    width: 50vw;
    position: absolute;
     z-index: 10;
     top: 40%;
    right: 30%;
    transform: translate(50%,-50%);
    clip-path: circle(30%);
    border-color: black;
}
.IntroShutoff{
    position: absolute;
    z-index: 9;
    width: 100%;
    height: 12vh;
    bottom: 0%;
    background-color: rgb(26,26,26);

}

.WelcomeImage{
    height: 100%;
    z-index: -100;
    object-fit: cover;
    object-position: center;
}
.infinite-track{
display: flex;
width: calc(200% + 40px);
animation: scrollHorizontal 20s linear infinite;
}
.infinite-track img{
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    filter: blur(1rem);
}
@keyframes scrollHorizontal {
    0% { transform: translateX(0);}
    100% { transform: translateX(-99%);}
}

.SeeMore{
    z-index: 10;
    position: absolute;
    margin: 0 auto;
    transform: translate(-50%,-50%);
    bottom: 10%;
    left: 50%;
}

.scroll-down {
    position: absolute;
    text-decoration: none;
    color: white;
    text-align: center;
    text-wrap: nowrap;
    animation: bobbing 2s infinite ease-in-out;
    
}

.arrow{    
    display: inline-block;
    padding: 5%;
    width: 55%;
    
    margin-top: 10px;
}
@keyframes bobbing {
    0%, 100% { transform: translate(-50%,0);}
    50% {transform: translate(-50%, -15%);}
}


#ProjectPreview{
    width: auto;
    height: auto;
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    justify-items: center;
    row-gap: 2rem;
    column-gap: 2rem;
}
    .projectView{
        width: auto;
    height: 60vh;
    background-color: rgb(94, 94, 94,0.5);
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-items: center;
    text-align: center;
    border-radius: 1rem;

    }
        .ProjectText{
            display: flex;
            flex-direction: column;
        }
            .projectTitle{
                font-size: 2vw;
            }
            .projectSubject{
                font-size: 1.3vw;
            }

        .ProjectIMGs{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .ProjectIMGs img{
            width: 20vw;
            height: auto;
            border-radius: 1rem;
        }
            .projectSoftware{
                display: flex;
            }
            .projectSoftware img{
                width: 10vw;
            }

















h2{
   
    margin: 0 auto;
    margin-top: 5%;
    right: 50%;
    font-size: xxx-large;
    height: 5%;
}
.articleDesc{
    display: flex;
    flex-direction: column;

}
.articleDesc p2{
    margin-top:35%;
    font-size: xx-large;
    width: 45rem;
    z-index: 11;
}