.home-section {
    height: calc(100vh - 100px - 80px + 8px);
}

.container {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    position: relative;
    width: 100%;
}

.container .name {
    font-family: 'RalewayBold';
    font-size: 6em;
    letter-spacing: -0.1rem;
    margin: 0;
    position: relative;
    text-align: center;
}

.container .subtitle-1 {
    font-family: monospace;
    margin-left: -60px;
    position: relative;
    text-align: left;
}

.container .subtitle-1 span {
    animation: SUBTITLE 1.5s steps(25, end) 1s 1 normal both;
    font-size: 18px;
    left: 0;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
}

@keyframes SUBTITLE {
    from {
        width: 0px;
    }

    to {
        width: 271px;
    }
}

.container .cv-button {
    border: none;
    border-radius: 50px;
    cursor: pointer;
    margin-top: 0px;
    margin-right: 300px;
    padding: 0.25rem 1rem;
    position: relative;
    text-align: center;
    width: 90px;

    color: #fff;
    font-family: "RalewayRegular";
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.25rem;
    text-decoration: none;
    text-transform: uppercase;

    background-color: #686de0;
    transition: all 0.2s linear 0s;

    &::before {
        content: "";
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512' fill='%23ffffff'%3E%3Cpath d='M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9c-.1-2.7-.2-5.4-.2-8.1c0-88.4 71.6-160 160-160c59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96c0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128l-368 0zm79-167l80 80c9.4 9.4 24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-39 39L344 184c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 134.1-39-39c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9z'/%3E%3C/svg%3E") no-repeat center / contain;
        width: 30px;
        height: 24px;
        margin-top: 2px;
        opacity: 0;
        position: absolute;
        right: 0.25rem;
        transition: all 0.5s linear 0s;
    }

    &:hover {
        background-color: #5359dc;
        text-indent: -17px;

        &::before {
            opacity: 1;
        }
    }

}

.container .cv-button p,
.container .cv-button i {
    display: inline-block;
    margin-bottom: 3px;
    margin-top: 3px;
}