about-style.css

body{
    margin: 0;
    padding: 0;
    /*font-family: 'Arvo', 'Josefin Sans', 'Rokkitt', 'Sanchez';
    font-family: 'Fira Mono', 'Noto Sans Mono', 'Sometype Mono', monospace;
    font-family: 'Sometype Mono', monospace;
    font-family: 'Noto Sans Mono', 'Sometype Mono', monospace;*/
}

#about-link {
    color: var(--yellow);
}

#email-link {
    color: var(--magenta);
    font-weight: bold;
}
#email-link:hover {
    color: var(--yellow);
}

#toilet-model {
    display: none;
}

p{
    font-weight: 250;
    line-height: 3rem;
}

h1{
    font-size: 6rem;
    font-family: Montserrat;
}

h2{
    font-size: 5rem;
    font-family: Montserrat;
}

h3{
    font-size: 4rem;
    font-family: Montserrat;
}

h4{
    margin: 2rem 0rem;
    font-weight: 600;
    padding: 0;
    font-size: 2.4rem;
    font-weight: 300;
    position: relative;
    transition: top 1s, opacity 2s;
    font-family: 'Noto Sans Mono', 'Sometype Mono', monospace;
}

h5{
    margin: 1.6rem;
    font-weight: 400;
}

div{
    font-size: 1.6rem;
}

.frag-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.frag{
    font-size: 9rem;
    opacity: 0%;
}

.about{
    display: flex;
    justify-content: center;
    padding: 0% 6%;
    margin-bottom: 240px;
}

.about-container-1{
    color: var(--text-color);
    width: 60%;
    max-width: 680px;
    padding: 10px 40px;
    animation: fadeIn ease 3s;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.about-container-2{
    width: 40%;
    height: calc(600px / 1vw);
    max-width: 600px;
    flex-direction: column;
    align-content: center;
    justify-content: flex-start;
}

#list-container{
    margin: 0 auto;
    width: 80%;
    align-self: center;
    animation: fadeIn ease 3s;
    padding: 25px 7% 3rem 7%;
    border-bottom: 1px solid var(--text-color);
}

#list-cols{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.icon{
    color: var(--text-color);
    font-size: 3rem;
    margin-bottom: 2rem;
    transition: color .5 linear;
    cursor: pointer;
}
.icon:hover{
    color: var(--magenta);
}

#icon-box{
    position: relative;
    top: 0;
    left: 0;
    width: 80%;
    height: 18%;
    margin: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    transition: 1.5s ease;
    z-index: 100;
    border-bottom: 1px solid var(--text-color);
}

#alien{
    position: relative;
    top: 6.2rem;
    left: 15rem;
    animation: frag1 ease 3s 2s 1 normal forwards;
}

#cat{
    position: relative;
    top: 5.2rem;
    left: 8.4rem;
    animation: frag1 ease 3s 1.5s 1 normal forwards;
}

@keyframes frag1{
    100%{
        opacity: 100%;
    }
}

#c1{
    animation: icon ease 2.5s 0s 1;
    transition: .5s ease;
}
@keyframes icon{
    0%{
        transform: translateY(0px);
    }
    55%{
        transform: translateY(-100px);
    }
    65%{
        transform: translateY(0px);
    }
    75%{
        transform: translateY(-40px);
    }
    90%{
        transform: translateY(-40px);
    }
    95%{
        transform: translateY(5px);
    }
    100%{
        transform: translateY(0px);
    }
}

#c2{
    animation: icon ease 2.5s .2s 1;
    transition: .5s ease;
}
#c3{
    animation: icon ease 2.5s .4s 1;
    transition: .5s ease;
}
#c4{
    animation: icon ease 2.5s .6s 1;
    transition: .5s ease;
}