body::after {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    z-index: -1;
    content: url(../Images/arduino-logo.png) url(../Images/mit-ai-logo.png) url(../Images/blender-logo.png) url(../Images/yt-logo.png) url(../Images/davinci-logo.png) url(../Images/premiere-logo.png) url(../Images/ae-logo.png) url(../Images/audition-logo.png) url(../Images/wmm-logo.png) url(../Images/vscode-logo.png) url(../Images/chatgpt-logo.png) url(../Images/git-logo.png);
}

.info {
    display: flex;
}

.info:nth-child(2) {
    margin-bottom: 10rem;
}

.trailing-bar-container {
    width: 5px;
    margin-right: 50px;
}

@keyframes trail {
    0% {opacity: 0; 
        background-image: linear-gradient(transparent, rgb(196, 94, 170)); 
        top: 0%;}
    3% {opacity: 1; 
        background-image: linear-gradient(transparent, rgb(196, 94, 170));
        top: 3%;}    
    20% {opacity: 1;
        background-image: linear-gradient(transparent, rgb(196, 94, 170)); 
        top:90%;}
    23% {opacity: 0;
        background-image: linear-gradient(transparent, rgb(196, 94, 170)); 
        top:90%;}
    100% {opacity: 0;
        background-image: linear-gradient(transparent, rgb(196, 94, 170)); 
        top:90%;}    
}

.trailing-bar {
    position: relative;
    height: 10%;
    width: 100%;
    background-color: transparent;
    animation: ease-out infinite;
    animation-name: trail;
    animation-duration: 7s;
    animation-delay: 3s;
}

/* PROJECTS SECTION */
.info h4 {
    font-family: Roboto, sans-serif;
    font-size: 2.3rem;
    padding-left: 10px;
    border-left: 2px solid rgba(255, 255, 255, 0.39);
    border-width: fit-content;
}

.info p {
    margin-top: 2%;
    font-family: Raleway, sans-serif;
    font-size: 2rem;
    width: 75%;
}

.info .strong-p {
    margin-bottom: 0.5rem;
    font-weight: bolder;
    text-decoration: underline;
}

.projects-logo {
    width: 3.5rem;
    height: 3.5rem;
}

.projects-logo:hover{
    width: 4.5rem;
    height: 4.5rem;
}

.projects-site {
    display: block;
    left: 4rem; 
    top: 4rem;
    height: 4rem;
    width: 4rem;
}

/* --------------------------------------------
PROJECT 1 LOGO SECTION */
.section-main .project-info {
    display: flex;
    width: 50%;
    z-index: 0;
    margin-bottom: 10rem;
}

.arduino-logo {
    background-image: url(../Images/arduino-logo-bw.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.mit-logo {
    margin-left: 0.3vw;
    background-image: url(../Images/mit-ai-logo-bw.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.blender-logo {
    margin-left: 0.3vw;
    background-image: url(../Images/blender-logo-bw.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.arduino-logo:hover {
    background-image: url(../Images/arduino-logo.png);
    transition: all ease-in-out 200ms;
}

.mit-logo:hover {
    background-image: url(../Images/mit-ai-logo.png);
    transition: all ease-in-out 200ms;
}

.blender-logo:hover {
    background-image: url(../Images/blender-logo.png);
    transition: all ease-in-out 200ms;
}

/* --------------------------------------------
PROJECT 2 LOGO SECTION */
.vscode-logo {
    background-image: url(../Images/vscode-logo-bw.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.chatgpt-logo {
    margin-left: 0.3vw;
    background-image: url(../Images/chatgpt-logo-bw.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.git-logo {
    margin-left: 0.3vw;
    background-image: url(../Images/git-logo-bw.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.vscode-logo:hover {
    background-image: url(../Images/vscode-logo.png);
    transition: all ease-in-out 200ms;
}

.chatgpt-logo:hover {
    background-image: url(../Images/chatgpt-logo.png);
    transition: all ease-in-out 200ms;
}

.git-logo:hover {
    background-image: url(../Images/git-logo.png);
    transition: all ease-in-out 200ms;
}

/* --------------------------------------------
PROJECT 3 LOGO SECTION */
.ae-logo {
    background-image: url(../Images/ae-logo-bw.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.audition-logo {
    margin-left: 0.3vw;
    background-image: url(../Images/audition-logo-bw.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.davinci-logo {
    margin-left: 0.3vw;
    background-image: url(../Images/davinci-logo-bw.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.yt-logo {
    margin-left: 0.3vw;
    background-image: url(../Images/yt-logo-bw.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.ae-logo:hover {
    background-image: url(../Images/ae-logo.png);
    transition: all ease-in-out 200ms;
}

.audition-logo:hover {
    background-image: url(../Images/audition-logo.png);
    transition: all ease-in-out 200ms;
}

.davinci-logo:hover {
    background-image: url(../Images/davinci-logo.png);
    transition: all ease-in-out 200ms;
}

.yt-logo:hover {
    background-image: url(../Images/yt-logo.png);
    transition: all ease-in-out 200ms;
}

/* --------------------------------------------
PROJECT 4 LOGO SECTION */
.premiere-logo {
    background-image: url(../Images/premiere-logo-bw.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.premiere-logo:hover {
    background-image: url(../Images/premiere-logo.png);
    transition: all ease-in-out 200ms;
}

/* --------------------------------------------
PROJECT 5 LOGO SECTION */
.wmm-logo {
    background-image: url(../Images/wmm-logo-bw.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.wmm-logo:hover {
    background-image: url(../Images/wmm-logo.png);
    transition: all ease-in-out 200ms;
}

/* --------------------------------------------
MOBILE PHONE SHIT 
<600px*/
@media only screen and (max-width: 600px) {
    
    .projects-logo {
        width: 2rem;
        height: 2rem;
    }
    
    .projects-logo:hover{
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .projects-site {
        display: block;
        left: 2.5rem; 
        top: 2.5rem;
        height: 2.5rem;
        width: 2.5rem;
    }
}

/* MOBILE PHONE SHIT 
<601px, 768px  */
@media only screen and (min-width: 601px) and (max-width: 768px) {

    .projects-logo {
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .projects-logo:hover{
        width: 3rem;
        height: 3rem;
    }
    
    .projects-site {
        display: block;
        left: 3rem; 
        top: 3rem;
        height: 3rem;
        width: 3rem;
    }
}


/* MOBILE PHONE SHIT 
<769px, 992px  */
@media only screen and (min-width: 769px) and (max-width: 992px) {
    
    .projects-logo {
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .projects-logo:hover{
        width: 3rem;
        height: 3rem;
    }
    
    .projects-site {
        display: block;
        left: 3rem; 
        top: 3rem;
        height: 3rem;
        width: 3rem;
    }
}

/* MOBILE PHONE SHIT 
<993px, 1200px  */
@media only screen and (min-width: 993px) and (max-width: 1400px) {
        
    .projects-logo {
        width: 3rem;
        height: 3rem;
    }
    
    .projects-logo:hover{
        width: 3.5rem;
        height: 3.5rem;
    }
    
    .projects-site {
        display: block;
        left: 3.5rem; 
        top: 3.5rem;
        height: 3.5rem;
        width: 3.5rem;
    }
}