@import url('https://necsup.com/style.css');

:root {
    --primary_color: #144497;
}

body { padding-block: 35px; }

section {
    width: 95vw;
    max-width: 750px;
    margin-inline: auto;
    min-height: calc(100vh - 70px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 35px;

    > * { width: 100%; }

    > div {
        text-align: center;

        img { width: 240px; margin-bottom: 0; }
        h1 { font-size: 60px; margin-bottom: 6px; }
        p { font-size: 22px; }
        .memberSince {
            margin-top: 18px;
            font-size: 16px;
        }
    }

    form {
        position: relative;
        > * { width: 100%; }

        label {
            font-size: 18px;
            cursor: pointer;
            b { color: var(--primary_color); }
        }
        input {
            margin: 6px 0 20px;
            background: #fff3;
            border: none;
            box-shadow: 0 0 0 1px #0006;
            border-radius: 8px;
            padding: 12px 26px;
            width: calc(100% - 26px * 2);
            outline: none !important;
            transition: 200ms;
            font-size: 22px;
            color: #444;
        }
        input:hover {
            background: #fff2;
            box-shadow: 0 0 0 1px #0008;
        }
        input:focus-within { box-shadow: 0 0 0 2px var(--primary_color); }

        .form_row_space {
            display: flex;
            align-items: center;
            gap: 8px;

            a { white-space: nowrap; }
            > div:not(.preview_update_pfp) { width: 100%; }

            input[type="checkbox"] {
                position: relative;
                display: grid;
                margin: 0;
                padding: 3px;
                width: fit-content;

                font: inherit;
                appearance: none;
                width: fit-content;
                border-width: 2px;
                border-radius: 5px;
            }
            input[type="checkbox"]::before {
                content: "";
                height: 12px;
                aspect-ratio: 1;
                transition: 200ms;
                background: var(--primary_color);
                border-radius: 2px;
                opacity: 0;
            }
            input[type="checkbox"]:checked::before { opacity: 1; }
        }

        .eyeShowPassword {
            height: 51px;
            width: 58px;
            position: absolute;
            transform: translate(-100%, 6px);
            object-position: left;
            object-fit: contain;
            cursor: pointer;
            opacity: .6;
            transition: 200ms;
        }
        .eyeShowPassword:hover { opacity: 1; }

        .preview_update_pfp {
            height: 51px;
            aspect-ratio: 1;
            transform: translateY(-7px);

            box-shadow: 0 0 0 1px #0006;
            border-radius: 9em;
            background-size: cover;
            background-position: center;
        }

        .submit {
            gap: 15px;
            .btn1 {
                width: 100%;
                background: var(--primary_color);
                margin-top: 16px;

                color: #fff !important;
                font-weight: 900;
                text-align: center;
                
                cursor: pointer;
                border-color: var(--primary_color);
                transition: 200ms;
            }
    
            .btn2 {
                white-space: nowrap;
                width: max-content;
                background: transparent;
                color: var(--primary_color) !important;
                filter: brightness(.8);
            }
    
            > a:hover {
                background: var(--primary_color);
                filter: brightness(1);
                color: #fff !important;
            }
        }

    }
    .moreAccountOptions {
        text-align: left;
        margin-top: -20px;

        h3 { margin: 16px 0 8px; }
        ul {
            width: calc(100% - 20px);
            padding-left: 20px;
            font-size: 16px;
    
            li { margin-block: 4px; }
            a:hover { filter: brightness(.75); }
        }

        .potentialOTC {
            margin-top: 12px;

            .form_row_space { margin-top: 6px !important; }
            * { margin: 0 !important; }
            button { font-size: 17px; }
        }
    }
}


@media (max-width: 767px) {
    h1 { font-size: 48px !important; }
    p { font-size: 18px !important; }
    .memberSince { font-size: 14px !important; }
    
    .form_row_space.submit { margin-top: 16px !important; } 
    .form_row_space {
        flex-direction: column;
        align-items: baseline !important;
        gap: 6px !important;
        
        .btn1 {
            margin-top: 0 !important;
            width: 100% !important;
            font-size: 20px !important;
        }
        
        .btn1.btn2 { width: calc(100% - 58px) !important; }
    }
}