main.scss

@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
body,
html {
    font-family: 'Poppins';
    margin: 0;
    a {
        text-decoration: none;
    }
}

header {
    padding: 2em;
    .logo {
        color: black;
        font-size: 2vw;
        font-weight: bold;
    }
    .menu-btn {
        float: right;
        cursor: pointer;
    }
}

section {
    padding: 4em;
    h1 {
        font-size: 4em;
        margin: 1em auto;
        width: 80%;
    }
    &::before {
        content: ' ';
        border-top: 8px solid rgb(180, 180, 180);
        display: block;
    }
}

nav {
    position: absolute;
    background: black;
    padding: 2em;
    width: calc(100% - 4em);
    height: calc(100vh - 4em);
    display: none;
    transform: scaleX(0);
    transform-origin: right;
    .close-btn {
        float: right;
        cursor: pointer;
        opacity: 0;
    }
    ul {
        list-style-type: none;
        margin: 10% auto 0 auto;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(3, auto);
        width: 80%;
        a {
            color: white;
            font-weight: bold;
            font-size: 2em;
        }
        span {
            color: gray;
            display: block;
            font-size: 1em;
            margin-top: 20px;
        }
        li {
            opacity: 0;
        }
    }
}

.show-menu {
    display: block;
    animation: slide-menu 1s ease-in forwards;
    .close-btn {
        animation: show-x 1s 1s ease-in forwards;
    }
    li:nth-of-type(1) {
        animation: menu-item-anim 0.6s 1s ease-in-out forwards;
    }
    li:nth-of-type(2) {
        animation: menu-item-anim 0.6s 1.2s ease-in-out forwards;
    }
    li:nth-of-type(3) {
        animation: menu-item-anim 0.6s 1.4s ease-in-out forwards;
    }
}

@keyframes slide-menu {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

@keyframes show-x {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes menu-item-anim {
    from {
        transform: translateY(90%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-menu-out {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}