* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        radial-gradient(
            circle at top,
            #244932 0%,
            #14291e 35%,
            #08130e 100%
        );

    color: #f4ead2;

    min-height: 100vh;

    display: flex;
    justify-content: center;
}


/* MAIN PORTAL */

.portal {
    width: 100%;
    max-width: 540px;

    padding:
        45px
        24px
        35px;

    text-align: center;
}


/* WHITE LOTUS SYMBOL */

.lotus-symbol {

    width: 72px;
    height: 72px;

    margin:
        0 auto
        15px;

    border:
        2px solid
        rgba(232, 207, 142, .8);

    border-radius: 50%;

    display: flex;

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

    font-size: 38px;

    color: #e8cf8e;

    box-shadow:
        0 0 30px
        rgba(232, 207, 142, .12);
}


/* TITLES */

.eyebrow {

    margin-bottom: 8px;

    font-size: 12px;

    letter-spacing: 5px;

    color: #c8af72;
}


h1 {

    margin:
        5px 0
        16px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            36px,
            8vw,
            50px
        );

    font-weight: normal;

    line-height: 1.05;

    color: #fff7e6;
}


.intro {

    margin:
        0 auto;

    max-width: 340px;

    color:
        rgba(
            244,
            234,
            210,
            .75
        );

    line-height: 1.6;
}


/* DIVIDER */

.divider {

    display: flex;

    align-items: center;

    gap: 13px;

    margin:
        28px
        auto;

    max-width:
        280px;

    color:
        #c8af72;
}


.divider span {

    height: 1px;

    flex-grow: 1;

    background:
        rgba(
            200,
            175,
            114,
            .4
        );
}


/* WIFI CARD */

.wifi-card {

    background:
        rgba(
            255,
            255,
            255,
            .06
        );

    border:
        1px solid
        rgba(
            232,
            207,
            142,
            .25
        );

    border-radius:
        20px;

    padding:
        28px;

    backdrop-filter:
        blur(15px);

    box-shadow:
        0 20px 50px
        rgba(
            0,
            0,
            0,
            .35
        );
}


.label {

    margin-top: 0;

    font-size:
        11px;

    letter-spacing:
        3px;

    color:
        #c8af72;
}


.wifi-card h2 {

    margin:
        5px 0
        22px;

    font-family:
        Georgia,
        serif;

    font-size:
        28px;

    font-weight:
        normal;
}


/* QR CODE */

#qrcode {

    width:
        220px;

    min-height:
        220px;

    margin:
        0 auto;

    padding:
        15px;

    background:
        white;

    border-radius:
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.scan-text {

    margin:
        12px 0
        25px;

    font-size:
        13px;

    color:
        rgba(
            244,
            234,
            210,
            .6
        );
}


/* CREDENTIALS */

.credentials {

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .1
        );

    text-align:
        left;
}


.credential {

    padding:
        17px 0;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .1
        );
}


.credential > span {

    display:
        block;

    margin-bottom:
        6px;

    font-size:
        11px;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

    color:
        #c8af72;
}


.password-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;
}


.password-row strong {

    word-break:
        break-all;
}


.password-row button {

    border: none;

    background: none;

    color:
        #e8cf8e;

    cursor:
        pointer;
}


/* COPY BUTTON */

.copy-button {

    width:
        100%;

    margin-top:
        22px;

    padding:
        14px;

    border:
        1px solid
        #c8af72;

    border-radius:
        10px;

    background:
        #c8af72;

    color:
        #102016;

    font-size:
        15px;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        all
        .2s ease;
}


.copy-button:hover {

    background:
        #e8cf8e;

    border-color:
        #e8cf8e;
}


#copyStatus {

    min-height:
        20px;

    margin-bottom:
        0;

    font-size:
        13px;

    color:
        #c8af72;
}


/* INSTRUCTIONS */

.instructions {

    margin-top:
        28px;

    padding:
        5px 15px;

    color:
        rgba(
            244,
            234,
            210,
            .72
        );
}


.instructions h3 {

    font-family:
        Georgia,
        serif;

    color:
        #f4ead2;

    font-weight:
        normal;
}


.instructions p {

    line-height:
        1.6;

    font-size:
        14px;
}


/* FOOTER */

footer {

    margin-top:
        40px;

    font-size:
        12px;

    color:
        rgba(
            244,
            234,
            210,
            .35
        );
}


footer p {

    margin-bottom:
        3px;

    letter-spacing:
        1px;
}


footer span {

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        2px;
}

.iphone-button {
    display: block;
    width: 100%;
    margin-top: 22px;
    padding: 14px;

    border: 1px solid #e8cf8e;
    border-radius: 10px;

    background: transparent;
    color: #e8cf8e;

    font-size: 15px;
    font-weight: 600;
    text-decoration: none;

    cursor: pointer;

    transition: all .2s ease;
}

.iphone-button:hover {
    background: rgba(232, 207, 142, .1);
}

.iphone-note {
    margin: 9px 0 0;

    font-size: 12px;
    line-height: 1.5;

    color: rgba(244, 234, 210, .55);
}