/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* @import "layout"; */

@font-face {
    font-family: "Animatrix";
    font-weight: 400;
    font-style: normal;
    src: url("/assets/animatrix-f0a550c7.ttf")
}

@font-face {
    font-family: "Inter";
    src: url("/assets/Inter-Light-8b5a6bb2.woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("/assets/Inter-Regular-a65a941c.woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "NeueHaasGrotesk";
    src: url("/assets/NeueHaasDisplay-Light-01e7cad6.woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "NeueHaasGrotesk";
    src: url("/assets/NeueHaasDisplay-Roman-1bbae01f.woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
}

.animatrix-title {
    font-family: "Animatrix" !important;
    /* font-size: 6rem; */
}

.animatrix-span {
    font-family: "Animatrix" !important;
    /* font-size: 6rem; */
}


.ui_frame_wrapper {
    z-index: 900;
    pointer-events: none;
    background-color: transparent;
    flex-flow: row;
    align-items: stretch;
    width: 100%;
    height: 100%;
    display: flex;
    position: fixed;
    inset: 0%;
    overflow: visible;
}

.ui_frame {
    pointer-events: none;
    /* -webkit-clip-path: polygon(100% 100%, 25% 100%, 25% 85%, 0 0, 100% 0);
    clip-path: polygon(100% 100%, 25% 100%, 25% 85%, 0 0, 100% 0); */
    background-color: #a0484800;
    border: .125rem solid #ffffff26;
    border-radius: 1rem;
    width: 100%;
    height: auto;
    margin: 2vw 2.5vw;
    display: block;
    position: relative;
}

.frame-scrolled {
    position: relative;
    /* top: auto !important;
    bottom: 0 !important; */
    left: 2.5vw;
    right: 2.5vw;
}

.text-6 {
    font-size: 6rem;
}