@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');



:root {
    --text: #fff;
    --col1: #eff;
    --col2: #8cc;
    --col3: #088;
    --col4: #044;
    --col5: #eee;
    --col6: #ddd;
    --col7: #000;
    --font: 'Roboto', 'sans-serif';
    --pgbg: radial-gradient(var(--col1), var(--col2), var(--col3));
    --cardwhite: radial-gradient(var(--col5), var(--col6));
    --freeMem: #0004;
    --starter1: #888;
    --starter2: #555;
    --starter: linear-gradient(var(--starter1), var(--starter2));
    --vipBronze1: #fa6;
    --vipBronze2: #C73;
    --vipBronze3: #840;
    --vipBronze: linear-gradient(var(--vipBronze1), var(--vipBronze2), var(--vipBronze3));
    --vipSilver1: #eee;
    --vipSilver2: #bbb;
    --vipSilver3: #888;
    --vipSilver: linear-gradient(var(--vipSilver1), var(--vipSilver2), var(--vipSilver3));
    --vipGold1: #ed9;
    --vipGold2: #db5;
    --vipGold3: #b92;
    --vipGold: linear-gradient(var(--vipGold1), var(--vipGold2), var(--vipGold3));
    --vipDiamond1: #9de;
    --vipDiamond2: #5bd;
    --vipDiamond3: #29b;
    --vipDiamond: linear-gradient(var(--vipDiamond1), var(--vipDiamond2), var(--vipDiamond3));
    --shadow: 0px 5px 10px -2px #000c;
    --inShadow: 5px 5px 5px -2px #0008;
    --cardShadowLo: inset 3px 3px 6px -2px #fff4,
        inset -3px -3px 6px -2px #000,
        0px 5px 10px -2px #000c;
    --cardShadowMed: inset 3px 3px 6px -2px #fff8,
        inset -3px -3px 6px -2px #0008,
        0px 5px 10px -2px #000c;
    --cardShadowHi: inset 3px 3px 6px -2px #fff,
        inset -3px -3px 6px -2px #0004,
        0px 5px 10px -2px #000c;
    --btnShadow: inset 2px 2px 4px -2px #fff8,
        inset -2px -2px 4px -2px #0008,
        5px 5px 5px -2px #0008;
    --in3d: inset 2px 2px 4px 0px #000;
}

/* GENERIC SETTINGS */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

img {
    vertical-align: top;
}

ul,
li {
    list-style-type: none
}

a {
    text-decoration: none;
    border-radius: 10px;
    cursor: pointer;
}

a,
a:visited,
a:hover,
a:active {
    color: inherit;
}

i {
    cursor: pointer;
}

/* Hide scrollbar for Chrome, Safari and Opera */
*::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
* {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

body {
    position: relative;
    width: 100%;
    height: 100%;
    font-family: var(--font);
    background: var(--pgbg);

    #page-bg {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        margin: 50px 0;
        background: var(--pgbg);
        z-index: -1;
    }
}


/* HEADER */
header {
    position: fixed;
    top: 0;
    width: 100%;
    min-width: 360px;
    display: flex;
    justify-content: center;
    z-index: 5;

    #header-bg {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 50px;
        box-shadow: 0 3px 5px 0 #0008;
        background: var(--col2);
        z-index: -1;
    }

    #header-content {
        width: 100%;
        max-width: 1000px;
        height: 50px;
        font: inherit;
        color: #fff;
        display: grid;
        grid-template-columns: 1fr 50px 50px;
        align-items: center;

        #branding {
            width: 100%;
            display: grid;
            grid-template-columns: 50px 1fr;
            align-items: center;
            z-index: 1;

            #logo {
                margin: 0px 10px;
                height: 30px;
                aspect-ratio: 1;
                background: url('https://www.morefishinthesea.net/public/gfx/mfs.logo.200.png') center center / contain no-repeat;
                align-self: center;
            }

            #brand {
                width: 100%;
                font-family: "Anton", sans-serif;
                font-size: 24px;
                text-align: center;
                background: url("https://phoneky.co.uk/thumbs/screensavers/down/nature/sun_8o1p99re.gif");
                background-position: center bottom;
                font-weight: bolder;
                letter-spacing: 1px;
                -webkit-text-fill-color: transparent;
                -webkit-background-clip: text;

            }
        }

        .menu {
            position: absolute;
            left: 100%;
            top: 50px;
            width: 200px;
            padding: 20px;
            background: #0008;
            backdrop-filter: blur(3px);
            display: grid;
            font-size: 20px;
            transform: translateX(0%);
            transition: transform 500ms;

            #govip {
                margin-bottom: 10px;
                padding: 5px 10px;
                border-radius: 5px;
                background: var(--vipGold);
                font-weight: bold;
                color: #000;
                text-align: center;
                cursor: pointer;

                &:hover {
                    background: var(--vipGold1);
                }
            }

            .menu-item {
                width: 100%;
                height: 50px;
                padding: 10px;
                border-radius: 5px;
                color: #000;
                display: grid;
                align-items: center;
                text-align: center;
                cursor: pointer;

                &:hover {
                    background: #fff4;
                }

                .icon[tip]::before {
                    position: absolute;
                    content: attr(tip);
                    left: 50%;
                    bottom: -40px;
                    width: max-content;
                    padding: 5px 10px;
                    border-radius: 20px;
                    background: linear-gradient(var(--col2), var(--col3));
                    opacity: .8;
                    font-size: 14px;
                    color: #fff;
                    scale: 0;
                    transform-origin: left top;
                    transform: translateX(-50%);
                    transition: all 300ms ease-in-out;
                }

                &:hover .icon[tip]::before {
                    scale: 1;
                }

                .icon {
                    position: relative;
                    display: none;
                }

                .text {
                    display: block;
                }

                &:has(.cposn) {
                    display: none;
                }

                .radio {
                    z-index: 1;
                }

                .cposn {
                    width: 22px;
                    height: 22px;
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 2px;
                    cursor: pointer;
                    z-index: -1;

                    .codes {
                        display: grid;
                        grid-template-rows: repeat(3, 1fr);
                        gap: 2px;

                        .cbox {
                            background: #eef;
                        }
                    }

                    .out {
                        background-color: #ccf;
                    }

                    &.top {
                        rotate: 90deg;
                    }

                    &.right {
                        rotate: 180deg;
                    }

                    &.none {
                        grid-template-columns: unset;
                        rotate: 180deg;
                    }
                }
            }
        }

        #ham {
            margin: auto 0;
            margin-right: 20px;
            height: 50px;
            display: grid;
            align-content: center;
            row-gap: 4px;
            cursor: pointer;

            .ham {
                cursor: pointer;
                transition: 500ms ease-in-out;
            }

            .bar {
                height: 4px;
                width: 28px;
                border-radius: 5px;
                background-color: #000;
                transition: all 500ms ease-in-out;
            }
        }

        &:has(.ham:hover),
        &:has(.menu:hover),
        &:has(.menu.open) {
            #ham {
                .bar:nth-child(1) {
                    transform: translateY(8px) rotate(45deg);
                }

                .bar:nth-child(2) {
                    opacity: 0;
                }

                .bar:nth-child(3) {
                    transform: translateY(-8px) rotate(-45deg);
                }
            }

            .menu {
                transform: translateX(-100%);
            }
        }

        #account {
            position: relative;
            cursor: pointer;

            img {
                border-radius: 50%;
                width: 40px;
                background: #0004;
                padding: 5px;
                outline: solid 1px #fff;
                outline-offset: -3px;
            }

            #account-menu {
                position: absolute;
                right: 10px;
                padding: 10px;
                border-radius: 10px;
                background: #0008;
                backdrop-filter: blur(5px);
                display: none;

                .menu-item {
                    padding: 10px 20px;
                    border-radius: 5px;
                    font-size: 20px;
                    color: #fff;
                    white-space: nowrap;
                    text-align: center;

                    &:hover {
                        background: #fff2;
                    }
                }
            }

            &:hover {
                #account-menu {
                    display: flex;
                    flex-direction: column;
                }
            }
        }
    }
}

@media (min-width: 769px) {
    header {
        #header-content {
            grid-template-columns: 280px 1fr 50px;

            .menu {
                position: unset;
                width: 100%;
                height: 30px;
                padding: 0 10px 0 0;
                background: transparent;
                display: flex;
                justify-content: right;
                align-items: center;
                font-size: 16px;
                transform: translateX(0%);

                &.open {
                    transform: unset;
                }

                #govip {
                    margin-right: 10px;
                    margin-bottom: unset;
                }

                .menu-item {
                    width: unset;
                    height: unset;
                    padding: 5px;
                    text-align: left;

                    .icon {
                        font-size: 22px;
                        display: block;
                    }

                    .text {
                        display: none;
                    }

                    &:has(.cposn) {
                        display: flex;
                        padding: 5px;
                    }
                }
            }

            #ham {
                display: none;
            }

            &:has(.menu:hover),
            &:has(.menu.open) {
                .menu {
                    transform: none;
                }
            }

            #account {
                #account-menu {
                    .menu-item {
                        padding: 5px 10px;
                        font-size: 16px;
                    }
                }
            }
        }
    }
}

/* HEADER END*/


/* MAIN PAGE */
main {
    width: 100%;
    min-width: 360px;
    height: fit-content;
    min-height: 100vh;
    padding: 80px 20px 110px;
    color: #000;
    display: grid;
    justify-content: center;
    text-align: center;

    .page {
        max-width: 1500px;
    }

    &:has(#code-editor) {
        padding: 50px 0;
        max-width: 100%;
    }
}

/* MAIN PAGE END*/


/* FOOTER */
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    min-width: 360px;
    display: flex;
    justify-content: center;
    z-index: 5;

    #footer-bg {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 80px;
        box-shadow: 0 -3px 5px 0 #0008;
        background: var(--col3);
        z-index: -1;
    }

    #footer-content {
        width: 100%;
        max-width: 1000px;
        height: 80px;
        font: inherit;
        color: #fff;
        display: grid;
        justify-items: center;
        align-items: center;
        text-align: center;
        column-gap: 30px;

        #info a {
            font-weight: bold;
            color: #000;

            text-shadow:
                0 0 2px #fff,
                0 0 2px var(--col1),
                0 0 4px var(--col1);

            &:hover {
                color: var(--col1);
                text-shadow: none;
            }
        }

        #twitface {
            grid-row: 1;
            right: 100px;
            font-size: 30px;
            display: flex;
            column-gap: 30px;
        }
    }
}

@media (min-width: 769px) {
    footer {
        padding: 0 20px;

        #footer-bg {
            height: 50px;
        }

        #footer-content {
            height: 50px;
            justify-content: space-between;

        }

        #twitface {
            grid-column: 2;
            font-size: 24px;
            column-gap: 20px;
        }
    }
}

/* FOOTER END */


/* GLOBAL COMPONENTS */
button,
.btn {
    position: relative;
    padding: 5px 10px;
    border: none;
    border-radius: 50px;
    box-shadow: var(--btnShadow);
    background: linear-gradient(var(--col2), var(--col3));
    font: inherit;
    color: #fff;
    white-space: nowrap;
    transition: 200ms ease-in-out;
    cursor: pointer;

    .btn-text {
        position: relative;
        z-index: 2;
    }

    &:has(a) a {
        font: inherit !important;
        color: inherit !important;
    }

    &:before {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border-radius: 50px;
        background: linear-gradient(var(--col3), var(--col4));
        opacity: 0;
        transition: 200ms ease-in-out;
    }

    &:hover::before {
        opacity: 1;
    }

    &:active {
        scale: 0.98;
    }
}

form {
    display: grid;
    gap: 10px;
    justify-content: left;
}

input[type='text'],
input[type='email'],
input[type='password'],
textarea {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 8px;
    outline: none;
    padding: 10px;
    background: transparent;
    font: inherit;
    font-size: 20px;
    color: #000;

    &::placeholder {
        color: var(--col4);
    }

    &:focus {
        background: #fff;
        color: #000;
    }
}

input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    width: 30px;
    height: 30px;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    &:checked::after {
        content: '\2714';
        padding: 4px;
        width: 30px;
        height: 30px;
        font-size: 20px;
        font-weight: bold;
        background-color: transparent;
        color: var(--col3);
    }
}

input[type=radio] {
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background-color: #0002;
    border-radius: 50%;
    box-shadow: var(--in3d);
    display: inline-block;
    overflow: hidden;

    &:checked {
        background-color: transparent;

        &::after {
            position: absolute;
            content: '';
            top: 50%;
            left: 50%;
            width: 14px;
            height: 14px;
            border-radius: 50px;
            background: var(--col3);
            box-shadow: var(--cardShadowMed);
            font-size: 32px;
            transform: translate(-50%, -50%);
        }
    }
}

.slider-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    --value: 2;

    .track-container {
        width: 100%;
    }

    .track {
        position: relative;
        height: 8px;
        border-radius: 20px;
        background: #0002;
        box-shadow:
            inset 2px 2px 4px 0px #000c,
            inset -1px -1px 1px 0px #ffa;
    }

    .progress {
        position: absolute;
        top: 0;
        width: calc(var(--value) * 4% - (0.020px * var(--value)));
        height: 8px;
        border-radius: 20px;
        background: linear-gradient(var(--col2), var(--col3));
        box-shadow:
            inset 2px 2px 4px -2px #fff6,
            inset -2px -2px 4px -2px #000;
    }

    .slider {
        position: relative;
        -webkit-appearance: none;
        -moz-appearance: none;
        position: absolute;
        left: 0;
        top: -11px;
        width: 100%;
        height: 30px;
        background: none;
        outline: none;
        pointer-events: none;

    }

    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        box-shadow:
            inset 2px 2px 4px -2px #fff6,
            inset -2px -2px 4px -2px #000;
        background: linear-gradient(var(--col2), var(--col3));
        pointer-events: auto;
    }

    input[type="range"]::-moz-range-thumb {
        -moz-appearance: none;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        box-shadow:
            inset 2px 2px 4px -2px #fff6,
            inset -2px -2px 4px -2px #000;
        background: linear-gradient(var(--col2), var(--col3));
        pointer-events: auto;
    }
}

@media (min-width: 769px) {

    input[type='text'],
    input[type='email'],
    input[type='password'],
    textarea {
        height: 36px;
        font-size: 16px;
    }
}

/* GLOBAL COMPONENTS END*/

/* GLOBAL CLASSES */

.btn1 {
    background: linear-gradient(var(--col2), var(--col3));

    &:hover {
        background: var(--col2);
    }
}

.btn2 {
    background: linear-gradient(#ddd, #aaa);
    color: #039;

    &:hover {
        background: #fff;
    }
}

.card {
    width: 340px;
    height: fit-content;
    padding: 20px;
    border-radius: 20px;
    box-shadow: var(--cardShadowLo);
    background: #0004;
    display: grid;
    justify-items: center;
    gap: 10px;

    &.white {
        box-shadow: var(--cardShadowHi);
        background: #ddd;
        color: #000;
    }
}

.category {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 2px;

    div {
        text-align: left;
    }

    &.checkboxes {
        grid-template-columns: 30px 1fr;
    }
}

#error-messages {
    width: 100%;
    max-width: 300px;
    height: fit-content;
    padding: 10px;
    border: solid 2px #c00;
    border-radius: 10px;
    background: #f44;
    color: #fff;
    display: none;

    &.error {
        display: block;
    }
}

.hide {
    display: none !important;
}

.inset {
    height: fit-content;
    padding: 4px;
    border-radius: 50px;
    box-shadow: var(--in3d);
    background: #0002;
    display: flex;
    align-items: center;
    cursor: pointer;
    overflow: hidden;

    &:has(input),
    &:has(textarea),
    &:has(p) {
        border-radius: 10px;
    }

    &:not(:has(.infobox)):has(input[type=checkbox]) {
        width: 30px;
        height: 30px;
        border-radius: 5px;
    }

    &:has(button),
    &:has(.btn) {
        width: fit-content;
        border-radius: 50px;
    }
}

.infobox {
    position: relative;
    width: 100%;
    padding: 10px 20px;
    border-radius: 8px;
    background: #ddd;
    box-shadow: var(--cardShadowHi);

    .heading {
        font-size: 20px;
        font-weight: bold;
    }

    .radio {
        height: 20px;
        display: flex;
        align-items: center;
        gap: 10px;

        input {
            left: 0px;
            top: 0px;
        }
    }

    .info {
        max-height: 0;
        scale: 0;
        overflow: hidden;
        transform-origin: left top;
        transition: 300ms ease-in-out;

        .subheading {
            font-weight: bold;
        }
    }

    .info.show {
        margin-top: 10px;
        max-height: 2000px;
        scale: 1;
    }
}

.link {
    color: var(--col3);
    text-decoration: underline;
    cursor: pointer;
}

.moreless {
    position: absolute;
    width: 21px;
    height: 21px;
    right: 10px;
    top: 10px;
    border: solid 2px var(--col3);
    border-radius: 50%;
    background: var(--col2);
    /* box-shadow: var(--cardShadowMed); */
    text-align: center;
    cursor: pointer;

    &::before,
    &::after {
        position: absolute;
        content: '';
        width: 13px;
        height: 3px;
        left: 2px;
        top: 7px;
        border-radius: 4px;
        background: #000;
        cursor: pointer;
    }

    &::before {
        rotate: 180deg;
        transition: 300ms ease-in-out;
    }

    &.show::before {
        rotate: 0deg;
    }

    &::after {
        rotate: 90deg;
        transition: 300ms ease-in-out;
    }

    &.show::after {
        rotate: 0deg;
    }
}

.page {
    height: fit-content;
}

.unused {
    color: transparent !important;
}

/* GLOBAL CLASSES END */

/* LANDING PAGE */
#landing {

    display: grid;
    justify-items: center;
    row-gap: 20px;

    #landing-intro,
    #landing-join {
        width: 100%;
        display: grid;
        justify-content: center;
        justify-items: center;
        row-gap: 10px;
    }

    h1 {
        font-size: 36px;
    }

    h2 {
        font-size: 30px;

        &.wip {
            padding: 20px;
            border-radius: 10px;
            box-shadow: var(--cardShadowMed);
            background: red;
            color: #fff;
        }
    }

    p {
        font-size: 20px;
        margin-top: 5px;
    }

    #landing-intro {
        max-width: 600px;
    }

    #landing-start button {
        width: 170px;
        height: 65px;
        padding: 15px 20px;
        border: none;
        border-radius: 10px;
        background: linear-gradient(var(--col2), var(--col3));
        /* box-shadow:
            0 0 2px #fff,
            0 0 4px #fff,
            0 0 6px #fff,
            0 0 8px var(--col1),
            0 0 10px var(--col1),
            0 0 12px var(--col1),
            0 0 14px var(--col1); */
        box-shadow: 0px 5px 10px -2px #000c;
        font-size: 18px;
        color: #fff;
        overflow: hidden;
        animation: glow 10s infinite;

        &::before {
            border-radius: 10px;
        }

        &::after {
            position: absolute;
            content: '';
            width: 50px;
            height: 100%;
            left: -40%;
            top: 0;
            background: linear-gradient(to right, transparent, #fff6 33%, #fff6 66%, transparent);
            transform: skewX(-20deg);
            animation: shine 10s infinite;
        }

    }
}

@keyframes glow {

    0%,
    50%,
    100% {
        box-shadow: 0px 5px 10px -2px #000c;
    }

    14% {
        box-shadow:
            0px 5px 10px -2px #000c,
            0 0 3px #fff,
            0 0 6px #fff,
            0 0 9px #fff,
            0 0 12px #fff,
            0 0 15px #fff,
            0 0 18px var(--col4),
            0 0 21px var(--col4),
            0 0 25px var(--col4);
    }

    15%,
    35% {
        box-shadow:
            0px 5px 10px -2px #000c,
            0 0 3px #fff,
            0 0 6px #fff,
            0 0 9px var(--col4),
            0 0 12px var(--col4),
            0 0 15px var(--col4);
    }
}

@keyframes shine {

    0%,
    15% {
        left: -40%;
    }

    30%,
    100% {
        left: 130%;
    }
}

@media (min-width: 769px) {
    #landing {
        max-width: 900px;
    }
}

/* LANDING PAGE END */


/* MYTOWN END */
#mytown-page {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* MYTOWN PAGE END */

/* SIGN IN / UP PAGES */
#signinup-form.card {

    #title {
        width: 100%;
        font-size: 24px;
        font-weight: bold;
    }

    .inset {
        position: relative;
    }

    input {
        width: 292px;
        height: 40px;
    }

    .user-input {
        position: relative;
    }

    #eye-btn {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        min-width: 32px;
        border: none;
        background-color: transparent;
        font-size: 24px;
        cursor: pointer;
    }

    #eye-btn::after {
        content: '\f06e';
        font-family: "Font Awesome 6 Free";
    }

    #eye-btn.slash::after {
        content: '\f070';
        font-family: "Font Awesome 6 Free";
    }

    #user-refcode {
        width: 300px;
        height: 38px;
        padding: 14px;
        border-radius: 10px;
        box-shadow: var(--in3d);
        background: #0002;
        display: flex;
        align-items: center;
    }

    .checkbox {
        display: flex;
        align-items: center;
        gap: 20px;

        input {
            width: 30px;
            height: 30px;
        }
    }

    button {
        width: 292px;
        height: 40px;
    }

    #or {
        display: flex;
        align-items: center;
        gap: 10px;

        .line {
            width: 55px;
            height: 50%;
            border-bottom: solid 2px #000;
        }
    }

    #social-signups {
        width: 100%;
        display: flex;
        gap: 10px;

        button {
            position: relative;
            width: 55px;
            height: 55px;
            padding: 0;
            box-shadow:
                inset 2px 2px 4px -2px #fff8,
                inset -2px -2px 4px -2px #0008,
                5px 5px 5px -2px #0008;
            background: #eee;
        }

        img {
            width: 45px;
            height: 45px;
        }
    }

    a {
        color: var(--col3);
        font-weight: bold;
        transition: 200ms ease-in-out;

        &:hover {
            color: var(--col2);
        }
    }

    .signupin {
        display: grid;
        gap: 5px;
    }
}

@media (min-width: 769px) {
    #signinup-form.card {

        input,
        button {
            height: 30px;
        }
    }
}

/* SIGN IN / UP PAGES END */


/* PROFILE PAGE */
#profile-page {
    width: 100%;
    max-width: 1000px;
    height: fit-content;
    display: grid;
    justify-items: center;
    gap: 20px;

    #save {
        position: fixed;
        top: 60px;
        left: 5px;
        width: fit-content;
        z-index: 10;
    }

    input[type=checkbox] {
        width: 20px;
        height: 20px;
        border-radius: 5px;
        background-color: #0002;
        box-shadow: var(--in3d);
        overflow: hidden;
    }

    input[type=checkbox]:checked::after {
        content: '';
        width: 16px;
        height: 16px;
        padding: 0;
        border-radius: 4px;
        background-color: var(--col3);
        box-shadow: var(--cardShadowMed);
    }

    #membership {
        height: fit-content;
        box-shadow: var(--cardShadowMed);
        display: grid;
        gap: 10px;
        text-align: left;
        /* overflow: hidden; */

        &.vip {
            /* box-shadow: var(--cardShadowLo); */

            #vip {
                width: fit-content;
                display: block;
            }

            &.diamond {
                background: var(--vipDiamond);
                color: #000;
            }

            &.gold {
                background: var(--vipGold);
                color: #000;
            }

            &.silver {
                background: var(--vipSilver);
                color: #000;
            }

            &.bronze {
                background: var(--vipBronze);
                color: #000;
            }

            .inset:has(#avatar) {
                border-radius: 50%;
            }
        }

        #top {
            #user {
                width: 100%;
                font-size: 24px;
                font-weight: bold;
            }
        }

        #middle {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 10px;

            #left {
                position: relative;
                width: 128px;
                height: 100%;

                #avatar {
                    position: relative;
                    width: 120px;
                    height: 120px;
                    border: none;
                    border-radius: 50%;
                    overflow: hidden;

                    &::after {
                        position: absolute;
                        content: '';
                        width: 120px;
                        height: 120px;
                        left: 0;
                        border-radius: 50%;
                        background-color: transparent;
                        z-index: 1;
                        cursor: unset;
                    }

                    img {
                        width: 100%;
                    }
                }

                #edit-photos {
                    position: absolute;
                    top: 5px;
                    left: 5px;
                }
            }

            #right {
                height: fit-content;
                align-self: center;
                display: grid;
                text-align: left;
                gap: 5px;

                #vipmember {
                    font-size: 16px;
                    font-weight: bold;
                    color: #000;
                }

                #upgrade {
                    width: fit-content;
                    font-size: 14px;
                    font-weight: bold;
                    color: #000;
                    background: var(--vipGold);
                }
            }
        }

        #vip {
            display: none;
        }

        &.free {
            background: var(--freeMem);
            /* box-shadow: var(--cardShadowMed); */
            color: #000;
        }

        &.starter {
            background: var(--starter);
            color: #000;
        }

        &:not(.vip) .inset:has(#avatar) {
            box-shadow: unset;
            background: transparent;
        }


    }

    #discount-countdown {
        /* margin: 0 20px; */
        padding: 10px;
        border-radius: 10px;
        background: #f44;
        box-shadow: var(--cardShadowLo);

        #timeleft {
            width: 100%;
            text-align: center;
        }
    }

    #bottom {
        width: 100%;
        padding: 20px;
        display: grid;
        gap: 10px;

        #stats {
            display: grid;
            gap: 10px;
            font-size: 20px;

            #likes {
                grid-column: 1;
                width: 100%;
                display: flex;
                gap: 10px;
                white-space: nowrap;

                #total-likes i {
                    color: var(--col1);
                }

                #hearts-gold i {
                    color: var(--vipGold2);
                }

                #hearts-silver i {
                    color: var(--vipSilver2);
                }

                #hearts-bronze i {
                    color: var(--vipBronze2);
                }
            }
        }

        a {
            width: fit-content;
            border-bottom: solid 2px var(--col4);
            border-radius: 0px;
            color: var(--col4);

            &:hover {
                border-bottom: solid 2px #ddd;
                color: #ddd;
            }
        }
    }

    div:has(.heading3) {
        width: 100%;
        display: flex;
        gap: 5px;

        .heading3 {
            width: fit-content;
            font-weight: bold;
        }
    }

    .profile-item {
        position: relative;
        width: 300px;
        display: block;
        text-align: left;

        .heading,
        .heading2 {
            width: 100%;
            position: relative;
            /* text-align: center; */
            font-weight: bold;
            white-space: nowrap;

            &::after {
                position: absolute;
                content: '\f093';
                right: -25px;
                top: 0;
                font-family: "Font Awesome 6 Free";
                color: var(--col3);
                display: none
            }
        }

        .heading2 {
            text-align: center;

            &::after {
                left: 0;
                top: 0;
            }
        }

        .show {
            font-weight: 400;
        }

        &.changed {

            .heading::after,
            .heading2::after {
                display: block;
            }
        }
    }

    #account {
        .refcode {
            display: flex;
            flex-direction: column;
        }

        i {
            /* position: relative; */
        }
    }

    #personal {
        textarea {
            height: 260px;
            padding: 10px;
            resize: none;
            outline: none;
        }
    }

    .tip {
        position: relative;

        &::before {
            position: absolute;
            content: attr(tip);
            left: 20px;
            top: 0px;
            width: max-content;
            padding: 5px 10px;
            border-radius: 20px;
            background: linear-gradient(var(--col2), var(--col3));
            font: var(--font);
            font-size: 12px;
            text-transform: unset;
            color: #fff;
            scale: 0;
            transform-origin: left center;
            transition: all 300ms ease-in-out;

        }

        &:has(i:hover)::before {
            scale: 1;
        }
    }

    #value2 {
        position: absolute;
        width: 100%;
        left: 60px;
    }


    #save-btn.changed {
        button {
            background: var(--vipGold);
        }
    }


    @media (min-width: 769px) {

        #signedin-page,
        #profile-page {
            font-size: 16px;
            justify-content: center;

            .card {
                max-width: 400px;
            }
        }
    }
}

/* PROFILE PAGE END */


/* ESSENTIALS PAGE */
#essentials-page {
    position: relative;
    width: 360px;

    form {
        height: fit-content;
    }

    button {
        width: 120px;
    }

    .card {
        display: grid;
        justify-items: center;
        scale: 1;
        transform-origin: left top;
        transition: all 600ms ease-in-out;

        &.hide {
            scale: 0;
        }
    }

    #card-container {
        margin: 20px 0;
        display: grid;
        gap: 5px;

        label {
            display: flex;
            gap: 10px;
        }

        .choices {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .choices2 {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 5px;
        }

        .slider-container {
            width: 300px;

            .slider {
                top: -6px;
            }
        }

        textarea {
            height: 200px;
            resize: none;
        }
    }
}

/* ESSENTIALS PAGE END */


/* MY PHOTOS PAGE */
#myphotos-page {
    width: 100%;
    min-width: 360px;
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;

    #gallery {
        position: relative;
        width: 340px;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 5px;

        &>.inset,
        #avatar>.inset {
            height: 100%;
            border-radius: 10px;
        }
    }

    .frame {
        position: relative;
        width: calc(20% - 24px);
        aspect-ratio: 1 / 1.5;
        min-width: 145px;

        &::before {
            position: absolute;
            content: '';
            left: 0;
            top: 0;
            width: calc(100% - 4px);
            height: calc(100% - 28px);
            border-radius: 10px;
            background: #0002;
            border: solid 2px var(--col3);
        }

        &.avatar::before,
        &.avatar.add::before {
            padding: 2px;
            border: none;
            box-shadow: inset 2px 2px 4px 0px #000;
        }

        &.add::before {
            border: dashed 2px var(--col3);
        }
    }

    .photo {
        position: absolute;
        left: 4px;
        top: 4px;
        width: var(--photoW);
        height: var(--photoH);
        cursor: pointer;

        &.selected {
            cursor: grabbing;
            z-index: 5;
        }
    }

    .image {
        width: 100%;
        height: 100%;
        background-position: center center;
        background-size: cover;
        border-radius: 8px;

        img.fullpic {
            object-fit: contain;
        }

        #icon {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            border-radius: 10px;
            background: var(--col2);
            display: flex;
            align-items: center;
            justify-content: center;

            i {
                font-size: 120px;
            }
        }

        .add {
            position: relative;
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            cursor: pointer;
        }

        &.avatar img {
            padding: 0;
            border: none;
        }

        .tip {
            position: absolute;
            right: 5px;
            top: 5px;
            width: 30px;
            height: 30px;
            padding: 4px;
            border-radius: 50%;
            background-color: #fff4;
            display: flex;
            justify-content: center;
            align-items: center;

            &::before {
                left: unset;
                right: 25px;
                transform-origin: right center;
            }
        }

        i {
            font-family: "Font Awesome 6 Free";
            font-size: 20px;
            color: #fff;
        }
    }

    .photo-info {
        width: 100%;
        height: 24px;
        margin-top: 4px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;

        div {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        p {
            font-size: 12px;
        }
    }

    #newphoto {
        position: relative;
        display: grid;
        justify-items: center;
    }

    form {
        height: fit-content;
    }

    button {
        width: 100px;
    }

    #droparea {
        width: 100%;
        height: 100%;
        padding: 10px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;

        &.active {
            background: #0002;
        }
    }

    #error-card,
    #photorules {
        position: absolute;
        top: 100px;
        width: 300px;
        padding: 20px;
        border-radius: 20px;
        box-shadow:
            inset 3px 3px 6px -2px #fff8,
            inset -3px -3px 6px -2px #000c,
            0 10px 20px -2px #0008;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        z-index: 5;

        #btn-ok {
            margin-top: 10px;
        }
    }

    input[type=checkbox] {
        width: 20px;
        height: 20px;
        border-radius: 5px;
        background-color: #0002;
        box-shadow: var(--in3d);
        overflow: hidden;
    }

    input[type=checkbox]:checked::after {
        content: '';
        width: 16px;
        height: 16px;
        padding: 0;
        border-radius: 4px;
        background-color: var(--col3);
        box-shadow: var(--cardShadowMed);
    }

    #link-fullpics {
        position: absolute;
        bottom: 12px;
        right: 12px;
        font-size: 12px;
    }
}

@media (min-width: 769px) {
    #editphotos-page {
        width: fit-content;

        #gallery {
            width: 100%;
        }
    }
}

/* MY PHOTOS PAGE END */

/* SEARCH PAGE */
#search-page {
    height: fit-content;
    display: grid;
    justify-items: center;
    gap: 20px;

    #gallery {
        position: relative;
        width: 340px;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 5px;

        &>.inset,
        #avatar>.inset {
            height: 100%;
            border-radius: 10px;
        }
    }

    .result {
        position: relative;
        padding: 10px;
        border-radius: 20px;
        background: #fff4;
        box-shadow: 2px 2px 5px 0px #0008;
        display: grid;
        justify-items: center;
        gap: 5px;

        .fa-triangle-exclamation {
            position: absolute;
            right: 10px;
            bottom: 10px;
            color: darkgreen;
        }
    }

    .avatar {
        width: 120px;
        aspect-ratio: 1;
        border-radius: 10px;
        overflow: hidden;

        img {
            width: 100%;
        }
    }

    .table {
        .result {
            width: 160px;

            .username {
                grid-row: 1;
            }

            .avatar {
                grid-row: 2;

            }
        }

        .tag,
        .minibio,
        .lastonline {
            display: none;
        }
    }

    .minimise {

        .result {
            width: 100%;
            max-width: 400px;
            grid-template-columns: 120px 1fr;

            .avatar {
                grid-column: 1;
                grid-row: 1/6;
            }

            .profile-icons {
                grid-column: 1;
            }

            .username {
                grid-row: 1;
            }

            .username,
            .age,
            .town,
            .lastonline,
            .tag {
                grid-column: 2;
            }

            .lastonline {
                grid-row: 4;
            }

            .minibio {
                width: 100%;
                grid-column: 1 / 2;
                grid-row: 7;
                display: flex;
            }
        }

    }

    .maximise {

        .result {
            width: 100%;
            max-width: 800px;
            padding: 20px;
        }

        .avatar {
            width: 300px;
        }
    }
}

@media (min-width: 769px) {
    #search-page {
        width: fit-content;

        #gallery {
            width: 100%;
        }
    }
}

/* SEARCH PAGE END */


/* VIP PLANS */
#vipplan-page {
    height: fit-content;
    display: grid;
    justify-items: center;
    gap: 20px;

    h1 {
        line-height: 1.5;
    }

    #badge {
        padding: 5px 15px;
        border-radius: 10px;
        background: linear-gradient(var(--vipGold1), var(--vipGold2), var(--vipGold3));
        color: #000;
    }

    #vipplans {
        width: fit-content;
        display: grid;
        gap: 20px;

        .card {
            width: 340px;
            box-shadow: var(--cardShadowLo);
            gap: 30px;

            &:hover {
                animation: hover 800ms forwards;
            }

            .pricing {
                position: relative;
                width: 100%;
                padding: 30px 10px;
                border-radius: 10px;
                background: linear-gradient(var(--col5), var(--col6), var(--col7));
                color: #000;
                display: grid;
                justify-items: center;
                gap: 5px;

                dt {
                    font-size: 24px;
                    font-weight: bold;
                    text-align: center;
                }

                .price {
                    font-family: 'Anton', sans-serif;
                    font-size: 40px;
                    line-height: 1;
                }

                .discount {
                    width: fit-content;
                    padding: 5px 10px;
                    border-radius: 20px;
                    box-shadow: var(--shadow);
                    background: linear-gradient(var(--col2), var(--col3));
                    font-size: 14px;
                    color: #fff;
                }

                dd {
                    font-size: 14px;
                }

                .detailsbutton {
                    width: fit-content;
                    padding: 5px 10px;
                    border-radius: 20px;
                    box-shadow: var(--shadow);
                    background: linear-gradient(var(--col2), var(--col3));
                    font-size: 14px;
                    color: #fff;

                    &:hover {
                        background: linear-gradient(var(--col1), var(--col3));
                    }
                }
            }

            .vipbutton {
                position: absolute;
                top: 100%;
                left: 50%;
                transform: translate(-50%, -50%);

                button {
                    background: linear-gradient(var(--col5), var(--col6), var(--col7));
                    color: #000;
                    white-space: nowrap;

                    &::before {
                        box-shadow: var(--btnShadow);
                        background: linear-gradient(var(--col6), var(--col7));
                    }
                }
            }
        }

        .items {
            width: 100%;
            display: grid;
            gap: 10px;

            .item {
                display: flex;
                gap: 10px;
            }
        }
    }

    #card1 {
        --col5: var(--vipBronze1);
        --col6: var(--vipBronze2);
        --col7: var(--vipBronze3);
    }

    #card2 {
        --col5: var(--vipSilver1);
        --col6: var(--vipSilver2);
        --col7: var(--vipSilver3);
    }

    #card3 {
        --col5: var(--vipGold1);
        --col6: var(--vipGold2);
        --col7: var(--vipGold3);
    }

    #card4 {
        --col5: var(--vipDiamond1);
        --col6: var(--vipDiamond2);
        --col7: var(--vipDiamond3);
    }
}

@keyframes hover {
    0% {
        box-shadow:
            inset 3px 3px 6px -2px #fff4,
            inset -3px -3px 6px -2px #0008,
            0px 5px 10px -2px #000c;
    }

    80% {
        box-shadow:
            inset 3px 3px 6px -2px #fff4,
            inset -3px -3px 6px -2px #0008,
            0px 5px 10px -2px #000c,
            0 0 3px #fff,
            0 0 6px #fff,
            0 0 9px #fff,
            0 0 12px var(--col6),
            0 0 15px var(--col6),
            0 0 20px var(--col6);
    }

    100% {
        box-shadow:
            inset 3px 3px 6px -2px #fff4,
            inset -3px -3px 6px -2px #0008,
            0px 5px 10px -2px #000c,
            0 0 3px var(--col6),
            0 0 6px var(--col6),
            0 0 9px var(--col6);
    }
}

@media (min-width: 769px) {
    #vipplan-page {
        #vipplans {
            grid-template-columns: repeat(4, minmax(250px, 400px));

            .card {
                width: 100%;
            }

            .items {
                font-size: 14px;
            }
        }
    }
}

@media (min-width: 920px) {
    #vipplans {
        .items {
            font-size: 16px;
        }
    }
}

/* VIP PLANS END */


/* PAYMENT PAGE */
#payment-page {
    width: 100%;
    max-width: 800px;

    h1 {
        margin-bottom: 40px;

        span {
            width: 100px;
            height: 60px;
            padding: 10px;
            border-radius: 10px;
            background: var(--vipGold);
            color: #000;
        }
    }

    #cart {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;

        &:has(#pay1:checked) #card-details {
            display: grid;
        }

        #product,
        #payment {
            width: 50%;
            height: fit-content;
            padding: 20px;
            box-shadow: var(--cardShadowLo);
            display: grid;
            justify-items: center;
            gap: 10px;

            button {
                padding: 10px 20px;
            }

            /* Product */
            #image {
                width: 150px;
                height: 90px;
                border-radius: 15px;
                box-shadow: var(--btnShadow);
                display: grid;
                align-items: center;
                color: #000;
                font-size: 48px;
                font-weight: bold;

                &.diamondbg {
                    background: var(--vipDiamond);
                }

                &.goldbg {
                    background: var(--vipGold);
                }

                &.silverbg {
                    background: var(--vipSilver);
                }

                &.bronzebg {
                    background: var(--vipBronze);
                }
            }

            #subplans {
                width: 160px;
                text-align: left;
            }

            #subtotal,
            #total {
                font-weight: bold;
            }

            #discount-code-container {
                width: 100%;
            }

            [data-type="referral"] {
                width: 100%;
                height: 36px;
                padding: 10px;
            }

            /* Payment */
            #pay-with {
                display: flex;
                justify-content: center;
                gap: 20px;
            }

            #card-details {
                width: 100%;
                display: none;
                gap: 10px;
            }


        }
    }
}

@media (min-width: 769px) {
    #payment-page {
        #cart {
            flex-direction: row;
            align-items: flex-start;
        }
    }
}

/* PAYMENT PAGE END */


/* TERMS & CONDITIONS PAGE */
#tnc-page,
#about-page {
    #infos {
        max-width: 800px;
        padding: 10px;
        display: grid;
        gap: 5px;
    }
}

/* TERMS & CONDITIONS PAGE END */


/* MESSAGE BOX */
#message-box {
    width: 340px;
    height: fit-content;
    padding: 30px 20px;
    display: grid;
    justify-items: center;
    gap: 20px;

    #title {
        font-size: 24px;
        font-weight: bold;
    }

    button {
        padding: 10px 30px;
    }

}

@media (min-width: 769px) {
    #message-box {
        gap: 10px;

        button {
            padding: 5px 20px;
        }
    }
}

/* MESSAGE BOX END */