/* =========================================================
   WALLET
   ========================================================= */

.di_home_canvas .di_wallet {
    position: absolute;

    left: 24.93%;
    top: 40.14%;

    width: 53.71%;
    height: 17.29%;

    z-index: 20;

    margin: 0;
    padding: 0;

    background: transparent;

    border: 0;

    word-break: normal;
}


/* =========================================================
   WALLET TITLE
   ========================================================= */

.di_home_canvas .di_wallet_title {
    position: absolute;

    top: 11.5%;

    left: 0;
    right: 0;

    margin: 0;

    color: #fff3c4;

    text-align: center;

    font-size: 1.45vw;
    font-weight: 700;

    line-height: 1;

    white-space: nowrap;
}


/* =========================================================
   WALLET INPUT
   ========================================================= */

.di_home_canvas .di_wallet_input_row {
    position: absolute;

    top: 33.5%;

    left: 4.7%;
    right: 4.7%;

    height: 36%;

    display: flex;
    align-items: stretch;

    margin: 0;
    padding: 0;

    overflow: hidden;

    border: 2px solid #fff0a8;
    border-radius: 12px;

    background: rgba(0, 0, 0, 0.18);
}


.di_home_canvas .di_wallet_input {
    min-width: 0;

    flex: 1 1 auto;

    width: auto;
    height: 100%;

    margin: 0;
    padding: 0 18px;

    border: 0;
    outline: 0;

    background: transparent;

    color: #ffffff;

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

    font-size: 1.45vw;
    line-height: 1;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: clip;

    box-shadow: none;
}


/* =========================================================
   COPY BUTTON
   ========================================================= */

.di_home_canvas .di_wallet_copy {
    flex: 0 0 18%;

    width: 18%;
    height: 100%;

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

    gap: 8px;

    margin: 0;
    padding: 0 12px;

    border: 0;
    border-radius: 0;

    background: linear-gradient(
        180deg,
        #fff2b2 0%,
        #f3c84d 100%
    );

    color: #111111;

    font-size: 1.05vw;
    font-weight: 800;

    line-height: 1;

    cursor: pointer;
}


/* =========================================================
   HOTSPOTS
   ========================================================= */

.di_home_hotspot {
    position: absolute;

    display: block;

    z-index: 40;

    background: transparent;

    border: 0;

    cursor: pointer;
}


/*
 * Header Buy
 */
.di_home_hotspot_header_buy {
    left: 82.49%;
    top: 1.37%;

    width: 16.02%;
    height: 5.37%;
}

.di_home_bottom {
    padding: 0;
    border-top: 1px solid rgba(227, 175, 43, 0.55);
    background: #020202;
}

.di_home_bottom_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.di_home_bottom_item {
    padding: 14px 18px 17px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
}

.di_home_bottom_item:last-child {
    border-right: 0;
}

.di_home_bottom_item h3 {
    margin: 0;
    color: #f3ce5f;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.di_home_bottom_item p {
    margin: 0;
    color: #fff;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
















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

@media (max-width: 991px) {

    .di_home_canvas .di_wallet_title {
        font-size: 1.8vw;
    }

    .di_home_canvas .di_wallet_input {
        font-size: 1.8vw;

        padding-left: 12px;
        padding-right: 12px;
    }

    .di_home_canvas .di_wallet_copy {
        font-size: 1.35vw;

        gap: 5px;

        padding-left: 8px;
        padding-right: 8px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    /*
     * -----------------------------------------------------
     * MOBILE DESIGN CANVAS
     * -----------------------------------------------------
     *
     * Instead of shrinking the entire 1536px artwork down
     * to something like 375px, use a 768 x 512 canvas.
     *
     * 768 / 512 = 1536 / 1024
     *
     * Therefore all coordinates remain proportional.
     */

    body.home .di_home_hero {

        width: 100%;

        /*height: 512px;
        min-height: 512px;*/

        aspect-ratio: 768 / 512;

        overflow: hidden;
    }


    /*
     * -----------------------------------------------------
     * FIXED PROPORTIONAL MOBILE CANVAS
     * -----------------------------------------------------
     */

    body.home .di_home_canvas {

        position: absolute;

        top: 0;
        left: 50%;

        width: 768px;
        height: 512px;

        transform: translateX(-50%);
    }


    /*
     * -----------------------------------------------------
     * ARTWORK
     * -----------------------------------------------------
     */

    .di_home_artwork {

        width: 768px;
        height: 512px;

        background-size: 768px 512px;

        background-position: center center;
    }


    /*
     * -----------------------------------------------------
     * HERO CONTENT
     * -----------------------------------------------------
     */

    .di_home_hero_content {

        left: 3.1%;
        top: 1.5%;

        width: 100%;
    }


    /*
     * -----------------------------------------------------
     * WALLET
     * -----------------------------------------------------
     *
     * SAME COORDINATES AS DESKTOP.
     *
     * This is intentional.
     */

    .di_home_canvas .di_wallet {

        left: 24.93%;
        top: 40.14%;

        width: 53.71%;
        height: 17.29%;
    }


    /*
     * Wallet title
     */

    .di_home_canvas .di_wallet_title {

        font-size: 11.14px;

        letter-spacing: 0.035em;
    }


    /*
     * Input box
     */

    .di_home_canvas .di_wallet_input_row {

        left: 4.7%;
        right: 4.7%;

        top: 33.5%;

        height: 36%;

        border-width: 1px;

        border-radius: 7px;
    }


    /*
     * Wallet address.
     *
     * NEVER allow it to wrap.
     */

    .di_home_canvas .di_wallet_input {

        min-width: 0;

        font-size: 11.14px;

        padding-left: 9px;
        padding-right: 7px;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: clip;
    }


    /*
     * COPY button
     */

    .di_home_canvas .di_wallet_copy {

        flex: 0 0 18%;

        width: 18%;

        gap: 4px;

        padding-left: 5px;
        padding-right: 5px;

        font-size: 8.06px;
    }


    /*
     * Copy icon
     */

    .di_home_canvas .di_wallet_copy_icon {

        width: 15px;
        height: 15px;

        flex: 0 0 15px;

        display: none;
    }


    /*
     * Wallet note
     */

    .di_home_canvas .di_wallet_note {

        font-size: 7.3px;
    }


    /*
     * -----------------------------------------------------
     * HOTSPOTS
     * -----------------------------------------------------
     *
     * SAME ARTWORK COORDINATES.
     */

    .di_home_hotspot_header_buy {

        left: 82.49%;
        top: 1.37%;

        width: 16.02%;
        height: 5.37%;
    }


    .di_home_hotspot_buy {

        left: 30.86%;
        top: 58.40%;

        width: 21.68%;
        height: 6.54%;
    }


    .di_home_hotspot_chart {

        left: 53.19%;
        top: 58.40%;

        width: 16.28%;
        height: 6.54%;
    }

    .di_home_bottom_grid {
        grid-template-columns: 1fr;
    }

    .di_home_bottom_item {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .di_home_bottom_item:last-child {
        border-bottom: 0;
    }

}


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

@media (max-width: 420px) {

    /*
     * DO NOT change the canvas size here.
     *
     * Keeping 768 x 512 means the wallet remains attached
     * to the same artwork position.
     */

    /*body.home .di_home_hero {

        width: 100%;

        height: 512px;
        min-height: 512px;
    }*/

    .di_home_hero_content {
        left: 3.1%;
        top: 1.5%;
        width: 100%;
    }



}