:root {
    --dark: #101820;
    --light: #FEE715;
    --margin-side: 3vw;
}

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

body {
    height: 100vh;
    font-family: "Outfit", sans-serif;
}

.top,
.bottom {
    height: 50vh;
    display: flex;
}

.top {
    background-color: var(--light);
    color: var(--dark);
    align-items: flex-end;
    justify-content: flex-start;
    padding-left: var(--margin-side);
    padding-bottom: 0.2rem;
}

.bottom {
    background-color: var(--dark);
    color: var(--light);
    align-items: flex-start;
    justify-content: flex-end;
    padding-right: var(--margin-side);
    padding-top: 0.2rem;
}

.top h1,
.bottom h1 {
    font-size: clamp(1rem, 2rem + 6vw, 15rem);
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
 
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.bottom h1 {
    transform: rotate(180deg);
    transform-origin: center;
}