.section-title{
    padding: 0 10%;
    font-size: 2.8rem;
    font-weight: 300;
    position: relative;
    transition: top 1s, opacity 2s;
}

#contactBtn2{
    font-size: 2.8rem;
    font-weight: 300;
    cursor: pointer;
    color: var(--yellow);
}
#contactBtn2:hover{
    color: var(--magenta);
}

#footer-container{
    position: relative;
    z-index: 10;
}

#footer{
    padding: 5rem 0rem 3rem 0;
    padding-left: 10%;
}

.contact-bottom{
    font-size: 2rem;
    margin: 0 1.5rem 0 0;
    position: relative;
    cursor: pointer;
}

#bottom-text{
    margin: 3rem 0;
    font-size: 1.4rem;
    color: rgb(183, 183, 183);
    transition: 3s ease;
}
.appear{
    animation: appear 1s ease 3s 1 forwards;
}
@keyframes appear {
    0%{
        opacity: 0%;
    }
    100% {
        opacity: 100%;
    }
}
.disappear{
    animation: disappear 1s ease 0s 1 forwards;
}
@keyframes disappear {
    0%{
        opacity: 100%;
    }
    100% {
        opacity: 0%;
    }
}

#svg-container{
    position: absolute;
    top: 3200px;
    left: 0vw;
    z-index: 0;
    transition: opacity 1s, top 1s;
}

.scribbles{
    position: absolute; 
    top: -15px;
    left: 35vw;
    stroke-dasharray: 2735;
    min-width: 850px;
    min-height: 450px;
    transition: top 2s, transform 4s;
    animation: dash 60s linear 0s infinite alternate;
}
@keyframes dash {
    0%{
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 50470;
    }
}
@media (max-width: 1300px) {
    .scribbles{
        top: -50px;
        left: 35vw;
    }
}
@media (max-width: 1100px) {
    .scribbles{
        top: -200px;
        left: 30vw;
    }
}
@media (max-width: 900px) {
    .scribbles{
        top: -50px;
        left: 20vw;
    }
}