* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*::-webkit-scrollbar {
    display: none;
}

#about_me, #projects, #contact_me {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;

    width: 220px;
    height: 120px;
    position: relative;
    margin-bottom: 55px;
    margin-top: 75px;
    animation: textSectOpen 1.7s 1 cubic-bezier(0,1.34,.74,1.11);
    transition: 1.7s cubic-bezier(0,1.34,.74,1.11);
}

#about_me {
    margin-bottom: 75px;
    margin-top: 96px;
    animation: textSectOpenAboutMe 1.7s 1 cubic-bezier(0,1.34,.74,1.11);
}

@keyframes textSectOpen {
    from {
        margin-bottom: 0px;
        margin-top: 0px;
        opacity: 0;
    }
    to {
        margin-bottom: 55px;
        margin-top: 75px;
        opacity: 1;
    }   
}

@keyframes textSectOpenAboutMe {
    from {
        margin-bottom: 0px;
        margin-top: 0px;
        opacity: 0;
    }
    to {
        margin-bottom: 75px;
        margin-top: 96px;
        opacity: 1;
    }   
}

#about_me span, #projects span, #contact_me span {
    display: block;
    width: 300px;
    height: 220px;
    top: 50%;
    left: -15%;
    transform: translate(0, -50%);
    position: absolute;
    background-color: black;
    animation: dropdown 1.7s 1 cubic-bezier(0,1.34,.74,1.11);
    transition: 1.7s cubic-bezier(0,1.34,.74,1.11);
    color: white;
    padding: 25px;
    text-align: center;
}

#about_me span {
    height: 263px;
}

#curProjects {
    list-style: inside;
    float: left;
}

.social-svg{fill:#fff}
.social{font-size:2rem}

@keyframes dropdown {
    from {
        transform: translateY(0);
        opacity: 0;
    }
    to {
        transform: translateY(1);
        opacity: 1;
    }
}

#about_me:hover span, #projects:hover span, #contact_me:hover span {
    height: 200%;
    transition: .2s cubic-bezier(0,1.34,.74,1.11);
}

#about_me:hover span {
    height: 250%;
}

#canvas1 {
    position: absolute;
    height: 100%;
    width: 100%;
    background: linear-gradient(#4e0185, #a400aa);
}
.container {
    width: 220px;
    position: relative;
    height: auto;
    margin: auto;
    filter: url(#goo);
}
button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;

    width: 220px;
    height: 120px;
    position: relative;
    margin-bottom: 20px;
    margin-top: 40px;
    transition: .5s;
}

button span {
    display: block;
    width: 20px;
    height: 80px;
    top: 50%;
    transform: translate(0, -50%);
    position: absolute;
    background-color: black;
    transition: .7s cubic-bezier(0,1.34,.74,1.11);
}
button:hover span {
    height: 120%;
    transition: .4s cubic-bezier(0,1.34,.74,1.11);
}
button span:nth-child(1){
    transition-delay: .25s;
    left: 0;
}
button span:nth-child(2){
    transition-delay: .2s;
    left: 20px;
}
button span:nth-child(3){
    transition-delay: .15s;
    left: 40px;
}
button span:nth-child(4){
    transition-delay: .1s;
    left: 60px;
}
button span:nth-child(5){
    transition-delay: .05s;
    left: 80px;
}
button span:nth-child(6){
    transition-delay: .0s;
    left: 100px;
}
button span:nth-child(7){
    transition-delay: .0.5s;
    left: 120px;
}
button span:nth-child(8){
    transition-delay: .1s;
    left: 140px;
}
button span:nth-child(9){
    transition-delay: .15s;
    left: 160px;
}
button span:nth-child(10){
    transition-delay: .2s;
    left: 180px;
}
button span:nth-child(11){
    transition-delay: .25s;
    left: 200px;
}
p {
    color: white;
    font-size: 12px;
    z-index: 10;
    position: relative;
    transition: .5;
}
button:hover p {
    color: gray;
}