body {
    height: 100vh;
    overflow: hidden;
}
:where(h2) {
    font-size: 2em;
    margin-block-end: 0;
    margin-block-start: 0;
}

.main__first-name {
    font-size: 50vh;
    line-height: 0.8;
    margin-bottom: -140px;
}
.main__last-name {
    position: relative;
    display: flex;
    font-size: 100vh;
    line-height: 0.8;
    z-index: -1;
}
.main__last-name--o {
    display: inline-block;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    line-height: 0.65;
}
.main__last-name--green {
    background: linear-gradient(0deg, #000000 70%, #fdc04e 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.main__last-name--red {
    background: linear-gradient(0deg, #000000 70%, #c94235 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.main__last-name--blue {
    background: linear-gradient(0deg, #000000 70%, #265d7e 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.main__last-name--l {
    background-color: #52acff;
    background-image: linear-gradient(180deg, #52acff 25%, #ffe32c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}