.home {
    display: flex;
    flex-direction: row;
    margin-left: 10%
}

.home-left {
    width: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 200px;
    font-family: proxima_novaextrabold, monospace;
    font-size: 20px;
    color: var(--white-02)
}

.typed-cursor {
    color: var(--primary-color)
}

.home-left>h1 {
    display: flex
}

.home-left .typeit-subtitle,
.home-left .typeit-title {
    display: none
}

.home-left #typeit-quote {
    color: var(--primary-color)
}

.ti-cursor {
    margin: 0 !important
}

.home-right {
    width: 65%;
    display: flex;
    flex-direction: column;
    font-family: proxima_novaextrabold, monospace;
    line-height: 1;
    padding-top: 110px
}

.home-right h1 {
    font-size: 168px;
    line-height: 168px
}

.title1 {
    display: flex;
    flex-direction: row;
    color: var(--primary-color)
}

.title1>h1>span {
    color: var(--white-02);
    margin: 0 0 0 10px;
    position: relative;
    animation-name: bounce;
    animation-duration: 1s;
    animation-iteration-count: infinite
}

@keyframes bounce {
    0% {
        bottom: 0
    }
    12.5% {
        bottom: 1px
    }
    25% {
        bottom: 3px
    }
    37.5% {
        bottom: 10px
    }
    50% {
        bottom: 10px
    }
    62.5% {
        bottom: 8px
    }
    75% {
        bottom: 1px
    }
    87.5% {
        bottom: 0
    }
    to {
        bottom: 0
    }
}

.title2 {
    color: var(--white-02)
}

.title2,
.title3 {
    display: flex;
    flex-direction: row
}

.title3 {
    color: var(--primary-color)
}

@media screen and (max-width:1160px) {
    .home-right h1 {
        font-size: 157px;
        line-height: 162px
    }
    .home-left h1 {
        font-size: 27px
    }
}

@media screen and (max-width:1050px) {
    .home-right h1 {
        font-size: 146px;
        line-height: 158px;
        letter-spacing: 1px
    }
    .home-left h1 {
        font-size: 26px;
        letter-spacing: 1px
    }
}

@media screen and (max-width:1000px) {
    .home {
        margin-left: 5%
    }
}

@media screen and (max-width:980px) {
    .home-right h1 {
        font-size: 138px;
        line-height: 155px;
        letter-spacing: 0
    }
}

@media screen and (max-width:900px) {
    .home {
        flex-direction: column;
        margin: 0;
        padding-bottom: 20px;
    }
    .home-left {
        width: 100%;
        margin: 0
    }
    .home-right {
        display: none
    }
    .home-left .typeit-subtitle,
    .home-left .typeit-title {
        display: block
    }
    .home-left .typeit-subtitle {
        color: var(--primary-color);
        letter-spacing: 5px;
        font-size: 21px;
        margin-bottom: 12px
    }
    .home-left .typeit-title {
        font-size: 40px;
        letter-spacing: 4px;
        margin-bottom: 20px
    }
    .home-left h1 {
        font-size: 31px;
        letter-spacing: 3px
    }
}

@media screen and (max-width:460px) {
    .home-left h1 {
        font-size: 28px
    }
    .home-left .typeit-subtitle {
        font-size: 18px
    }
    .home-left .typeit-title {
        font-size: 34px
    }
}

@media screen and (max-width:380px) {
    .home-left h1 {
        font-size: 23px
    }
    .home-left .typeit-subtitle {
        font-size: 16px;
        margin-bottom: 8px
    }
    .home-left .typeit-title {
        font-size: 30px
    }
}