@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

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

body {
    min-height: 100vh;
    width: 100vw;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    background-color: #001200;
    background-image: url('../resources/ceiling.jpeg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    box-shadow: inset 400px 400px 400px 400px rgba(0, 0, 0, .5);
}

main {
    height: 100%;
    width: 100%;
}

.me-container {
    height: 100%;
    margin-top: 15%;
    display: flex;
    justify-content: center;
}

.name {
    padding-top: 80px;
    color: #ece4db;
    font-size: 150px;
    font-family: 'Bebas Neue';
    text-shadow: 2px 7px 5px rgba(0, 0, 0, 0.3), 0px -4px 10px rgba(255, 255, 255, 0.3);
    line-height: 0.4;
}

nav {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 10px;
}

nav a {
    text-decoration: none;
    color: #D0CEBA;
    font-size: 20px;
    font-family: 'Bebas Neue', cursive;
}

.active {
    color: white;
}

nav a:hover {
    color: white;
}


#type {
    position: absolute;
    animation: fill 3.5s ease forwards 3.5s;
}

#type path:nth-child(2) {
    stroke-dasharray: 97;
    stroke-dashoffset: 97;
    animation: line-anim 2s ease forwards 0.2s;

}

#type path:nth-child(3) {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: line-anim 2s ease forwards 0.4s;
}

#type path:nth-child(4) {
    stroke-dasharray: 119;
    stroke-dashoffset: 119;
    animation: line-anim 2s ease forwards 0.6s;

}

#type path:nth-child(5) {
    stroke-dasharray: 64;
    stroke-dashoffset: 64;
    animation: line-anim 2s ease forwards 0.8s;

}

#type path:nth-child(6) {
    stroke-dasharray: 58;
    stroke-dashoffset: 58;
    animation: line-anim 2s ease forwards 1s;

}

#type path:nth-child(7) {
    stroke-dasharray: 36;
    stroke-dashoffset: 36;
    animation: line-anim 2s ease forwards 1.2s;

}

#type path:nth-child(8) {
    stroke-dasharray: 54;
    stroke-dashoffset: 54;
    animation: line-anim 2s ease forwards 1.4s;

}

#type path:nth-child(9) {
    stroke-dasharray: 122;
    stroke-dashoffset: 122;
    animation: line-anim 2s ease forwards 1.6s;

}

#type path:nth-child(10) {
    stroke-dasharray: 52;
    stroke-dashoffset: 52;
    animation: line-anim 2s ease forwards 1.8s;

}

#type path:nth-child(11) {
    stroke-dasharray: 41;
    stroke-dashoffset: 41;
    animation: line-anim 2s ease forwards 2s;

}

#type path:nth-child(12) {
    stroke-dasharray: 43;
    stroke-dashoffset: 43;
    animation: line-anim 2s ease forwards 2.2s;

}

#type path:nth-child(13) {
    stroke-dasharray: 57;
    stroke-dashoffset: 57;
    animation: line-anim 2s ease forwards 2.4s;

}

#type path:nth-child(14) {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: line-anim 2s ease forwards 2.6s;

}

#type path:nth-child(15) {
    stroke-dasharray: 63;
    stroke-dashoffset: 63;
    animation: line-anim 2s ease forwards 2.8s;

}

#type path:nth-child(16) {
    stroke-dasharray: 52;
    stroke-dashoffset: 52;
    animation: line-anim 2s ease forwards 3s;

}

#type path:nth-child(17) {
    stroke-dasharray: 41;
    stroke-dashoffset: 41;
    animation: line-anim 2s ease forwards 3.2s;

}

@keyframes line-anim {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fill {
    from {
        fill: transparent;
    }

    to {
        fill: #D0CEBA;
    }
}

@media only screen and (max-width: 480px) {

    body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    nav {
        width: 90%;
    }

    #type {
        width: 150px;
    }

    .me-container {
        margin-top: 30%;
    }

    .name {
        font-size: 95px;
        padding-top: 60px;
    }
}