@font-face {
    font-family: 'Aptos';
    src: url('/assets/Aptos-SemiBold.woff2') format('woff2'),
        url('/assets/Aptos-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aptos';
    src: url('/assets/Aptos.woff2') format('woff2'),
        url('/assets/Aptos.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Aptos', sans-serif;
    margin: 0;
    padding: 0px;

    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;

}

.wrapper {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    height: 100vh;
}

.wrapper .lhs {
    background: url(/assets/bg.webp);
    height: 100%;
    width: 20%;
    background-size: cover;
    align-content: center;
    text-align: center;

}

.wrapper .lhs2 {
    background: none;
    height: 100%;
    width: 20%;
    align-content: center;
    text-align: center;
    position: relative;
}

.wrapper .lhs2 video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: -1;
}

.wrapper .rhs {
    background-color: #f1f1f1;
    height: 100%;
    width: 60%;
    position: relative;
}

.wrapper .rhs #announcement {
    color: #000;
    font-size: 20px;
    font-weight: 600;
    position: absolute;
    left: 100px;
    top: 35%;
}

.wrapper .rhs #contact-info {
    font-size: 20px;
    /* font-weight: 600; */
}

.wrapper .rhs #contact-info a {
    font-weight: 300;
    color: #000;
    text-decoration: none;
}

.wrapper .rhs #contact-info a:hover {
    text-decoration: underline;
}

#construction-note {
    font-size: 20px;
    font-weight: 600;
    color: var(--primary-color);
    margin-top: 20px;
}

.separator {
    font-weight: 300;
    color: #000;
    margin: 0 10px;
}

#blurb {
    position: absolute;
    bottom: 100px;
    left: 100px;
}

#blurb .heading {}

#blurb .content {
    max-width: 408px;
    /* font-size:0px; */
}

#blurb .content strong {
    font-style: italic;
}

.button {
    width: 100%;
    max-width: 342px;
    /* height: 56px; */
    border-radius: 35px;
    background-color: #010101;
    color: white;
    display: block;
    /* margin-top:20px; */
    text-align: center;

    text-decoration: none;
    padding: 14px 20px;
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    border: 2px solid #010101;
    margin: 0 auto;

}

.button:hover {
    background-color: transparent;
    color: #010101;
}

@media(max-width:767px) {
    .wrapper {
        flex-direction: column;

    }

    .wrapper .lhs,
    .wrapper .lhs2 {
        width: 100%;
    }

    .wrapper .lhs2 video {
        position: static;
        top: 50%;
        left: 50%;
        width: 100%;
        height: auto;
        transform: none;
        /* width: auto;
        height: auto;
        transform: translate(-50%, -50%);
        z-index: -1; */
        object-fit:contain;
    }


    .wrapper .rhs {
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
    }

    .wrapper .rhs #announcement {
        position: static;
        text-align: center;

    }

    #blurb {
        position: static;
        text-align: center;
        padding: 20px;
    }
}