@font-face {
    font-family: "Zagma";
    font-weight: 400;
    src: url(fonts/Zagma-Regular.woff2) format("woff2"), url(fonts/Zagma-Regular.woff) format("woff");
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: "Zagma";
    font-weight: 300;
    src: url(fonts/Zagma-Light.woff2) format("woff2"), url(fonts/Zagma-Light.woff) format("woff");
    font-display: swap;
}

body {
    margin: 0;
    color: #202624;
    font-family: Zagma;
}
a {
    text-decoration: none;
    color: #202624;
}
.landing__container {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    @media screen and (max-width: 1024px) {
        flex-direction: column;
    }
}
.landing__left, .landing__right {
    width: 50%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    @media screen and (max-width: 1024px) {
        width: 100%;
        height: 50vh;
        max-height: 50vh;
    }
}
.landing__left {
    /* background-color: #ea531e; */
    border-right: 2px solid #eaeaea;
    @media screen and (max-width: 1024px) {
        border-right: 0px;
        border-bottom: 2px solid #eaeaea;
    }
}
.landing__right {
    /* background-color: #fdd756 */
}
.site__link {
    cursor: pointer;
    transition: all;
    transition-duration: 300ms;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.site__logo {
    max-width: 305px;
    height: auto;
    @media screen and (max-width: 1024px) {
        max-width: 200px;
    }
    @media screen and (max-width: 769px) {
        max-width: 150px;
    }
}
.site__title {
    font-size: 26px;
    margin-top: 26px;
    margin-bottom: 0px;
    transition: all;
    transition-duration: 300ms;
}
.site__url {
    font-size: 20px;
    margin-top: 12px;
    transition: all;
    transition-duration: 300ms;
}

@media(hover:hover) {
    .landing__left {
        .site__link:hover {
            /* background-color: #ea531e; */
            .site__title {
                color: #818184;
            }
            .site__url {
                color: #818184;
            }
        }
    }
    .landing__right {
        .site__link:hover {
            /* background-color: #fdd756; */
            .site__title {
                color: #818184;
            }
            .site__url {
                color: #818184;
            }
        }
    }
}

/* Target Safari 15.4+ (and other modern browsers) */
@supports (height: 100svh) {
    .full-height {
        height: 100svh; /* Uses the "small viewport height" unit */
    }
    @media screen and (max-width: 1024px) {
        .landing__left.full-height,
        .landing__right.full-height {
            height: 50svh;
        }
    }
}