*,*::before,*::after {box-sizing: border-box;}

body {margin: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; color: #2e2f8f; background-color: #1c97eb47;}

    h1 {font-size: 74px; line-height: .9; letter-spacing: -4px; margin: 0 0 18px; color: #2e2f8f; text-transform: lowercase;}

    .section-title {margin: 0; padding: 15px 34px; background-color: #2e2f8f; color: #ffffff; border-top: 8px solid #236dcc; border-bottom: 8px solid #236dcc; font-size: 34px; text-transform: lowercase; letter-spacing: -1px;}

    .gallery-copy h2 {font-size: 40px; line-height: .95; letter-spacing: -2px; margin: 0 0 14px;}

    .invite h2 {margin: 0 0 10px; font-size: 48px; letter-spacing: -2px; text-transform: lowercase;}

    .screen-card h3 {margin: 0 0 10px; background-color: #236dcc; color: #ffffff; padding: 8px 10px; font-size: 22px;}

    .gallery-copy p {color: #111; font-size: 18px; line-height: 1.45; margin: 0 0 14px;}

    .invite p {width: 720px; margin: 0 auto 24px; font-size: 20px; line-height: 1.4;}

    a {color: #2e2f8f;}

        .displayname {text-transform: initial; font-weight: 900; text-decoration: none;}

        .online_status {display: flex; align-items: center; gap: 2px; justify-self: center;}
        .online_status::before {content: ""; font-family: "bootstrap-icons"; display: block; color: #ff4500; background-image: url(../../images/icons/online_status.gif); background-repeat: no-repeat; width: 14px; height: 14px; background-repeat: no-repeat; background-position: center; background-size: contain;}
        .online_status::after {content: "Online Now!"; color: #008000; font-weight: 900 !important; font-size: small;}

    img {width: 100%; height: auto; display: block;}

    button {cursor: pointer;}

    #member_login {padding: 4px 16px; background-color: #6be701; color: navy; font-weight: bold; font-size: 14px;}
    #member_login:hover {background-color: #67db02;}

    .button {display: inline-block; text-decoration: none; font-weight: 900; border: 3px solid #2e2f8f; box-shadow: 4px 4px 0 #2e2f8f; padding: 12px 18px; font-size: 17px; background-color: #1c97eb; color: #ffffff;}
    .button:hover {transform: translate(2px, 2px); box-shadow: 2px 2px 0 #2e2f8f;}

    .button.secondary {background-color: #ffffff; color: #2e2f8f;}

.wrapper {width: 1200px; margin: 20px auto; display: block; background-color: #ffffff; border-top-left-radius: 20px; border-top-right-radius: 20px; border-left: 5px solid #236dcc; border-right: 5px solid #236dcc; min-height: 100vh; box-shadow: 0 0 30px rgba(46, 47, 143, .18);}

header {height: 300px; padding: 20px; background-color: #2e2f8f; border-top-left-radius: 20px; border-top-right-radius: 20px; background-image: url(../../images/headers/header_index.png); background-repeat: no-repeat; background-size: 85%; background-position: 95% 55%; position: relative;}

    .h2---slogan {text-align: right; margin-right: 100px; margin-top: 40px; font-size: 1rem; text-transform: lowercase; color: white; text-shadow: 5px 3px 0px midnightblue;}

nav {width: calc(100% - 40px); height: 40px; padding: 0 25px 0 35px; background-color: #236dcc; border-top-left-radius: 10px; border-top-right-radius: 10px; position: absolute; top: 10px; display: flex; align-items: center;}
    .ul---nav_list {margin: 0; padding: 0; list-style-type: none; width: 100%; display: flex;}
    .ul---nav_list li a {text-transform: capitalize; color: #f5f5f5; font-weight: bold; font-size: smaller;}
    .ul---nav_list li:nth-last-child(2) {margin-left: auto;}
    .ul---nav_list li:nth-last-child(2) a::after {content: '|'; display: inline-flex; color: black; margin: 0 7px;}
    .ul---nav_list li:not(:nth-last-child(-n+3)) a::after {content: '|'; display: inline-flex; color: black; margin: 0 7px;}

section {font-family: Arial, Helvetica, sans-serif;}

.subheader {position: relative; padding: 34px 38px 45px; display: grid; grid-template-columns: 400px 1fr; gap: 28px; align-items: center; overflow: hidden; font-family: Arial, Helvetica, sans-serif;}
    .subheader::before {content: ""; position: absolute; inset: 18px; border: 3px dashed rgb(192 226 249); pointer-events: none;}

    .subheader_copy {position: relative; z-index: 1; padding-left: 25px; border-left: 3px dashed rgb(192 226 249);}

        .badge {display: inline-block; background-color: #eaf5ff; color: #236dcc; border: 2px solid #236dcc; /*box-shadow: 4px 4px 0 #236dcc;*/ padding: 6px 12px; font-weight: 900; text-transform: uppercase; font-size: 14px; margin-bottom: 18px;}

        .slogan {font-size: 30px; line-height: 1.15; margin: 0 0 18px; color: #236dcc; font-weight: 900;}

        .intro {font-size: 19px; line-height: 1.45; width: 92%; margin: 0 0 24px; color: #222;}

        .cta-row {display: flex; gap: 14px; align-items: center; margin-top: 18px;}

    .subheader_card {position: relative; z-index: 1; background-color: #ffffff; padding: 14px; display: flex; flex-direction: column; gap: 25px;}

        .subheader_card .label {background-color: #2e2f8f; color: #ffffff; padding: 7px 10px; font-weight: 900; margin-bottom: 12px; display: flex; justify-content: space-between;}

        .desktop-shot {border: 2px solid #236dcc; background-color: #ffffff;}

        .login-panel {margin-top: 16px; border: 3px solid #236dcc; background-color: #eaf5ff; padding: 14px;}
        .login-panel h2 {margin: 0 0 10px; font-size: 24px; color: #ffffff; background-color: #236dcc; padding: 7px 10px;}

        .login-grid {display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end;}

        .header_card_box {border: 3px solid #2e2f8f; background-color: white; padding: 14px;}
            #login {background-color: #eaf5ff; box-shadow: 4px 4px 0 #236dcc;}

            .header_card_box_header {margin: 0 0 12px; font-size: 20px; background: linear-gradient(90deg, #2e2f8f, #236dcc); color: white; text-transform: capitalize; padding: 7px 10px;}

        .login_form label {font-weight: 900; font-size: 13px; color: #2e2f8f; display: block; margin-bottom: 4px; text-transform: capitalize;}
        .login_form input[type="text"],
        .login_form input[type="password"] {width: 100%; height: 36px; border: 2px solid #236dcc; padding: 6px 8px; font-size: 15px; background-color: white;}

        .people_box_grid {display: grid; grid-template-columns: 2fr 2fr; gap: 15px; align-items:self-start;}
        .people_box_grid div {display: flex; flex-direction: column; align-items: center; justify-content: center;}
        .people_box_grid div img {width: 100px;}

.features {position: relative; padding: 32px 52px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; background-color: #ffffff;}
    .features::before {content: ""; position: absolute; inset: 18px; border: 3px dashed rgb(192 226 249); pointer-events: none;}
    .features article {background: #eaf5ff; border: 3px solid #236dcc; box-shadow: 6px 6px 0 #2e2f8f; padding: 16px; min-height: 270px; transform: rotate(-4deg);}
    .features article img.header-word {height: 48px; width: auto; margin-bottom: 12px;}
    .features p {color: #111; font-size: 17px; line-height: 1.38; margin: 0;}

.gallery {padding: 36px 38px; background: linear-gradient(90deg, rgba(28, 151, 235, .15) 1px, transparent 1px), linear-gradient(rgba(28, 151, 235, .15) 1px, transparent 1px), #ffffff; background-size: 22px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center;}

    .gallery-copy {background-color: rgba(255, 255, 255, .92); border: 3px solid #2e2f8f; padding: 22px; box-shadow: 7px 7px 0 #1c97eb;}

    .avatar-grid {display: grid; grid-template-columns: repeat(1, 1fr); gap: 14px;}

.screens {padding: 34px 38px; background-color: #eaf5ff; display: grid; grid-template-columns: 1fr 1fr; gap: 22px;}
    .screen-card {background-color: #ffffff; border: 3px solid #236dcc; box-shadow: 6px 6px 0 #2e2f8f; padding: 12px;}
    .screen-card img {border: 1px solid rgba(46, 47, 143, .35);}

    .screen_img_wrapper_1 {position: relative; padding: 50px;}
        .screen_img_wrapper_1_img {rotate: -5deg; width: 100%; box-shadow: 0px 0px 20px 10px #3e72c43d; border: 12px solid #1c97eb70; margin-left: -40px;}

    .screen_img_wrapper_2 {position: absolute; top: 10px; padding: 20px;}
        .screen_img_wrapper_2_img {width: calc(100% + 10%); box-shadow: 0px 0px 20px 10px #3e72c43d; border: 12px solid #1c97eb; z-index: 2; position: relative;}

    .screen_img_wrapper_3 {position: relative; padding: 0;}
        .screen_img_wrapper_3_img {width: calc(100% + 20%) !important; rotate: 0deg; box-shadow: 0px 0px 20px 10px #3e72c43d; border: 12px solid #1c97eb70; margin-left: -95px;}

    .screen_img_wrapper_4 {position: absolute; top: 80px; right: -25px; padding: 0;}
        .screen_img_wrapper_4_img {width: 80%; box-shadow: 0px 0px 20px 10px #3e72c43d; border: 12px solid #1c97eb; z-index: 2; position: relative; margin-right: 0; rotate: 10deg;}

.invite {padding: 45px 38px; text-align: center; background-color: #2e2f8f; color: #ffffff; border-top: 8px solid #1c97eb;}
    .invite .button {background-color: #ffffff; color: #2e2f8f; box-shadow: 5px 5px 0 #1c97eb;}

footer {background-color: #ffffff; padding: 18px 34px; display: flex; justify-content: space-between; align-items: center; font-weight: 900; border-top: 5px solid #236dcc;}
    .tiny-links {display: flex; gap: 12px; font-size: 14px;}

#username-error{font-size:small;font-weight:normal;color:#900;display:block;}
#password-error{font-size:small;font-weight:normal;color:#900;display:block;}
#errors, .error{color:#900;}
#success{color:#090;}