/* =========================================================
   XMIUM
   SUPERHERO / RETRO COMIC LANDING PAGE
========================================================= */


/* =========================================================
   RESET
========================================================= */

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


html,
body {
    width: 100%;
    height: 100%;

    overflow: hidden;
}


body {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: #ffd21f;

    color: #ffffff;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/* =========================================================
   PAGE
========================================================= */

.page {
    width: 100%;
    height: 100dvh;

    min-height: 100dvh;

    position: relative;

    overflow: hidden;

    background-image:
        url("xmium_bgr.jpg");

    background-position:
        center center;

    background-size:
        cover;

    background-repeat:
        no-repeat;
}


/* =========================================================
   TOP BAR
========================================================= */

.topbar {
    position: absolute;

    top: 24px;
    left: 46px;
    right: 46px;

    z-index: 20;

    display: flex;

    align-items: flex-start;
    justify-content: space-between;
}


/* =========================================================
   BRAND
========================================================= */

.brand {
    color: #ffffff;

    font-family:
        Impact,
        "Arial Black",
        Arial,
        sans-serif;

    font-size:
        clamp(32px, 3.2vw, 52px);

    font-weight: 900;

    line-height: 0.9;

    letter-spacing: -2px;

    text-transform: uppercase;

    -webkit-text-stroke:
        2px #050505;

    filter:
        drop-shadow(4px 4px 0 #050505);
}


.brand-x {
    color: #ed1c2e;
}


/* =========================================================
   SOCIAL BUTTONS
========================================================= */

.socials {
    display: flex;

    gap: 10px;
}


.social-btn {
    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #050505;

    border: 4px solid #ffffff;

    color: #ffffff;

    text-decoration: none;

    font-family:
        "Arial Black",
        Impact,
        sans-serif;

    font-size: 20px;
    font-weight: 900;

    line-height: 1;

    box-shadow:
        4px 4px 0 #050505;

    transition:
        transform 0.15s ease,
        background 0.15s ease,
        color 0.15s ease;
}


.social-btn:hover {
    background: #ed1c2e;

    transform:
        translateY(-2px);
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.content {
    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    position: relative;

    z-index: 5;

    padding:
        80px 40px 35px;
}


/* =========================================================
   LORE AREA
========================================================= */

.lore-area {
    width: min(760px, 48vw);

    margin-left: 12vw;

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: stretch;
}


/* =========================================================
   LORE HEADER
   RIGHT ALIGNED ABOVE LORE BOX
========================================================= */

.lore-header {
    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    margin-bottom: 9px;
}


/* =========================================================
   THE NEXT ERA
========================================================= */

.comic-tag {
    display: inline-block;

    background: #ffd21f;

    color: #050505;

    border: 4px solid #050505;

    padding:
        8px 18px 7px;

    margin-right: 44px;

    margin-bottom: 8px;

    font-family:
        "Arial Black",
        Impact,
        sans-serif;

    font-size:
        clamp(11px, 0.95vw, 15px);

    font-weight: 900;

    line-height: 1;

    letter-spacing: 1px;

    white-space: nowrap;

    transform:
        rotate(-1deg);

    box-shadow:
        5px 5px 0 #050505;
}


/* =========================================================
   TAGLINE
========================================================= */

.tagline {
    display: inline-block;

    max-width: 100%;

    background: #050505;

    color: #ffffff;

    padding:
        7px 12px 8px;

    font-family:
        "Arial Black",
        Impact,
        sans-serif;

    font-size:
        clamp(13px, 1.35vw, 20px);

    font-weight: 900;

    line-height: 1.15;

    letter-spacing: 0.35px;

    text-align: right;

    white-space: nowrap;
}


/* =========================================================
   RED X
========================================================= */

.red-x {
    color: #ed1c2e;
}


/* =========================================================
   XMIUM LORE TITLE
========================================================= */

.lore-title {
    margin-top: 9px;

    padding-right: 18px;

    font-family:
        "Arial Black",
        Impact,
        Arial,
        sans-serif;

    font-size:
        clamp(15px, 1.5vw, 20px);

    font-weight: 900;

    line-height: 1;

    letter-spacing: 1px;

    text-align: right;

    white-space: nowrap;
}


/* RED STARS */

.lore-star {
    color: #ed1c2e;
}


/* BLACK TEXT */

.lore-black {
    color: #050505;
}


/* =========================================================
   X
   RED + WHITE INNER OUTLINE + BLACK OUTER OUTLINE
========================================================= */

.lore-x-logo {
    display: inline-block;

    color: #ed1c2e;

    font-weight: 900;

    /*
       Inner outline
       WHITE
    */
    -webkit-text-stroke:
        1.5px #ffffff;

    paint-order:
        stroke fill;

    /*
       Outer outline
       BLACK
    */
    text-shadow:
        2px 2px 0 #050505,
        -2px 2px 0 #050505,
        2px -2px 0 #050505,
        -2px -2px 0 #050505,
        0 2px 0 #050505,
        0 -2px 0 #050505,
        2px 0 0 #050505,
        -2px 0 0 #050505;
}


/* =========================================================
   LORE SECTION
========================================================= */

.lore-section {
    width: 100%;

    min-height: 145px;

    position: relative;

    background:
        rgba(5, 5, 5, 0.94);

    border:
        5px solid #ffffff;

    padding:
        17px 29px 21px;

    overflow: hidden;

    box-shadow:
        7px 7px 0 #050505;
}


/* =========================================================
   LORE TOP
========================================================= */

.lore-top {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 20px;
}


.lore-top > span:first-child {
    color: #ffd21f;

    font-family:
        "Arial Black",
        Impact,
        sans-serif;

    font-size:
        clamp(11px, 0.95vw, 15px);

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: 0.7px;
}


.lore-x {
    color: #ed1c2e;

    font-family:
        "Arial Black",
        Impact,
        sans-serif;

    font-size: 18px;

    font-weight: 900;

    line-height: 1;
}


/* =========================================================
   LORE TEXT
========================================================= */

.lore-text {
    width: 100%;

    min-height: 48px;

    color: #ffffff;

    font-family:
        "Arial Black",
        Impact,
        Arial,
        sans-serif;

    font-size:
        clamp(18px, 1.55vw, 25px);

    font-weight: 900;

    line-height: 1.22;

    letter-spacing: 0.15px;

    white-space: normal;

    overflow-wrap: break-word;

    word-break: normal;
}


/*
   Typing cursor
*/

.lore-text::after {
    content: "";

    display: inline-block;

    width: 3px;

    height: 0.95em;

    margin-left: 5px;

    vertical-align: -0.08em;

    background: #ed1c2e;

    animation:
        loreCursor 0.7s steps(1) infinite;
}


@keyframes loreCursor {

    50% {
        opacity: 0;
    }

}


/* =========================================================
   COMIC CORNER
========================================================= */

.lore-corner {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 0;
    height: 0;
}


.lore-corner::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;

    width: 0;
    height: 0;

    border-left:
        42px solid transparent;

    border-bottom:
        42px solid #ed1c2e;
}


/* =========================================================
   LORE NAVIGATION
========================================================= */

.lore-nav {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    gap: 8px;

    margin-top: 12px;
}


.lore-btn {
    min-width: 0;

    min-height: 32px;

    padding:
        3px 2px;

    background: #050505;

    color: #ffffff;

    border:
        3px solid #ffffff;

    font-family:
        "Arial Black",
        Impact,
        Arial,
        sans-serif;

    font-size: 10px;

    font-weight: 900;

    line-height: 1;

    letter-spacing: 0.25px;

    text-align: center;

    white-space: nowrap;

    cursor: pointer;

    /*
       IMPORTANT:
       No blur.
       No text shadow.
    */

    text-shadow: none;

    box-shadow: none;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}


.lore-btn:hover {
    background: #ffd21f;

    color: #050505;

    transform:
        translateY(-2px);
}


.lore-btn.active {
    background: #ed1c2e;

    color: #ffffff;

    border-color: #ffffff;

    transform: none;
}


/* =========================================================
   CONTRACT
========================================================= */

.contract-box {
    width: 100%;

    min-height: 52px;

    margin-top: 13px;

    display: flex;

    align-items: center;

    gap: 16px;

    padding:
        0 14px;

    background:
        rgba(5, 5, 5, 0.94);

    border:
        4px solid #ffffff;

    box-shadow:
        5px 5px 0 #050505;
}


.contract-label {
    color: #ffd21f;

    font-family:
        "Arial Black",
        Impact,
        sans-serif;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 0.7px;

    white-space: nowrap;
}


.contract-address {
    flex: 1;

    min-width: 0;

    padding: 0;

    border: 0;

    outline: none;

    background: transparent;

    color: #4aff4d;

    font-family:
        monospace;

    font-weight:
        bold;

    font-size:
        clamp(15px, 1.015vw, 19px);

    text-align: left;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    cursor: pointer;
}


.copy-status {
    color: #ed1c2e;

    font-family:
        "Arial Black",
        Impact,
        sans-serif;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.4px;

    white-space: nowrap;
}


/* =========================================================
   BUY BUTTONS
========================================================= */

.buy-row {
    width: 100%;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;

    margin-top: 12px;
}


.buy-btn {
    min-height: 57px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding:
        10px 15px;

    border:
        4px solid #050505;

    box-shadow:
        5px 5px 0 #050505;

    color: #050505;

    text-decoration: none;

    font-family:
        "Arial Black",
        Impact,
        sans-serif;

    font-size:
        clamp(12px, 1.05vw, 17px);

    font-weight: 900;

    line-height: 1;

    letter-spacing: 0.25px;

    transition:
        transform 0.15s ease;
}


.buy-btn:hover {
    transform:
        translateY(-2px);
}


.buy-ponsfam {
    background: #ffd21f;
}


.buy-uniswap {
    background: #ffffff;
}


.arrow {
    font-size: 17px;

    line-height: 1;
}


/* =========================================================
   FOOTER
========================================================= */

.micro-footer {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

    margin-top: 11px;

    color: #ffffff;

    font-family:
        "Arial Black",
        Impact,
        sans-serif;

    font-size:
        clamp(9px, 0.75vw, 12px);

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: 0.7px;

    text-align: center;

    -webkit-text-stroke:
        0.5px #050505;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .topbar {
        top: 18px;

        left: 28px;
        right: 28px;
    }


    .social-btn {
        width: 50px;
        height: 50px;

        font-size: 17px;
    }


    .content {
        padding:
            75px 25px 25px;
    }


    .lore-area {
        width: min(700px, 70vw);

        margin-left: 8vw;
    }


    .lore-section {
        min-height: 135px;

        padding:
            15px 24px 19px;
    }


    .lore-text {
        font-size:
            clamp(16px, 2vw, 22px);

        line-height: 1.22;
    }


    .lore-btn {
        min-height: 38px;

        font-size: 9px;
    }


    .contract-box {
        min-height: 48px;
    }


    .buy-btn {
        min-height: 52px;
    }

}


/* =========================================================
   SMALL TABLET / LARGE PHONE
========================================================= */

@media (max-width: 800px) {

    .content {
        padding:
            75px 20px 20px;
    }


    .lore-area {
        width: min(650px, 88vw);

        margin-left: 3vw;
    }


    .lore-text {
        font-size:
            clamp(15px, 2.5vw, 21px);
    }


    .lore-nav {
        gap: 6px;
    }


    .lore-btn {
        min-height: 35px;

        font-size: 8px;
    }

}


/* =========================================================
   SMARTPHONE / IPHONE
========================================================= */

@media (max-width: 650px) {

    .page {

        background-image:
            url("xmium_bgr_phone.jpg");

        background-position:
            center center;

        background-size:
            cover;
    }


    .topbar {

        top:
            max(13px, env(safe-area-inset-top));

        left:
            16px;

        right:
            16px;
    }


    .brand {

        font-size:
            clamp(27px, 8vw, 38px);

        letter-spacing:
            -1.5px;

        -webkit-text-stroke:
            1.5px #050505;

        filter:
            drop-shadow(3px 3px 0 #050505);
    }


    .socials {
        gap: 6px;
    }


    .social-btn {

        width: 43px;
        height: 43px;

        border-width: 3px;

        font-size: 15px;

        box-shadow:
            3px 3px 0 #050505;
    }


    .content {

        padding:
            65px 14px 16px;

        align-items: center;

        justify-content: center;
    }


    .lore-area {

        width: 92vw;

        max-width: 520px;

        margin-left: 0;
    }


    /* ------------------------------
       HEADER
    ------------------------------- */

    .lore-header {

        margin-bottom: 7px;
    }


    .comic-tag {

        font-size: 9px;

        padding:
            6px 12px;

        border-width: 3px;

        box-shadow:
            4px 4px 0 #050505;

        margin-right: 16px;

        margin-bottom: 6px;
    }


    .tagline {

        max-width: 100%;

        padding:
            6px 8px;

        font-size:
            clamp(9px, 2.8vw, 12px);

        line-height:
            1.18;

        letter-spacing:
            0.15px;

        white-space:
            normal;

        text-align:
            right;
    }


    .lore-title {

        margin-top: 7px;

        padding-right: 7px;

        font-size:
            10px;

        letter-spacing:
            0.7px;
    }


    /* ------------------------------
       LORE BOX
    ------------------------------- */

    .lore-section {

        min-height:
            105px;

        border-width:
            4px;

        padding:
            12px 15px 14px;

        box-shadow:
            5px 5px 0 #050505;
    }


    .lore-top {

        margin-bottom:
            12px;
    }


    .lore-top > span:first-child {

        font-size:
            9px;

        line-height:
            1.15;
    }


    .lore-x {

        font-size:
            13px;
    }


    .lore-text {

        min-height:
            40px;

        font-size:
            clamp(14px, 4.1vw, 18px);

        line-height:
            1.22;

        letter-spacing:
            0;
    }


    .lore-text::after {

        width:
            2px;

        margin-left:
            4px;
    }


    .lore-corner::after {

        border-left-width:
            32px;

        border-bottom-width:
            32px;
    }


    /* ------------------------------
       LORE BUTTONS
    ------------------------------- */

    .lore-nav {

        grid-template-columns:
            repeat(7, minmax(0, 1fr));

        gap:
            5px;

        margin-top:
            9px;
    }


    .lore-btn {

        min-height:
            29px;

        padding:
            3px 1px;

        border-width:
            2px;

        font-size:
            6.5px;

        letter-spacing:
            0;

        box-shadow:
            none;
    }


    .lore-btn:hover {

        transform:
            none;
    }


    /* ------------------------------
       CONTRACT
    ------------------------------- */

    .contract-box {

        min-height:
            43px;

        margin-top:
            10px;

        gap:
            8px;

        padding:
            0 9px;

        border-width:
            3px;

        box-shadow:
            4px 4px 0 #050505;
    }


    .contract-label {

        font-size:
            8px;
    }


    .contract-address {

        font-size:
            8px;
    }


    .copy-status {

        font-size:
            8px;
    }


    /* ------------------------------
       BUY
    ------------------------------- */

    .buy-row {

        gap:
            8px;

        margin-top:
            9px;
    }


    .buy-btn {

        min-height:
            45px;

        padding:
            7px 5px;

        border-width:
            3px;

        box-shadow:
            4px 4px 0 #050505;

        font-size:
            9px;

        gap:
            4px;
    }


    .arrow {

        font-size:
            12px;
    }


    /* ------------------------------
       FOOTER
    ------------------------------- */

    .micro-footer {

        gap:
            12px;

        margin-top:
            9px;

        font-size:
            7px;

        letter-spacing:
            0.35px;

        -webkit-text-stroke:
            0.3px #050505;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .content {

        padding-left:
            10px;

        padding-right:
            10px;
    }


    .lore-area {

        width:
            94vw;
    }


    .lore-section {

        min-height:
            98px;

        padding:
            10px 12px 12px;
    }


    .lore-top {

        margin-bottom:
            9px;
    }


    .lore-text {

        font-size:
            13px;

        line-height:
            1.2;
    }


    .lore-btn {

        min-height:
            27px;

        font-size:
            6px;
    }


    .contract-box {

        min-height:
            40px;
    }


    .contract-label {

        font-size:
            7px;
    }


    .contract-address {

        font-size:
            7px;
    }


    .copy-status {

        font-size:
            7px;
    }


    .buy-btn {

        min-height:
            42px;

        font-size:
            8px;
    }


    .micro-footer {

        font-size:
            6px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}