*,*::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;}

    .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;}

        ul#invite_points {margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 20px; list-style-type: none;}
        ul#invite_points li::before {content: '✦'; display: inline-block; align-self: flex-start;}
        ul#invite_points li dd {margin-top: 15px; font-size: 15px;}
        ul#invite_points li dd::before {content: '-'; display: inline-block; align-self: flex-start;}

    .request form {display: flex; flex-direction: column; gap: 10px;}
    .request_form label {font-weight: 900; font-size: 13px; color: #2e2f8f; display: block; margin-bottom: 4px; text-transform: capitalize;}
    .request_form input[type="text"],
    .request_form input[type="email"],
    .request_form select {width: 100%; height: 36px; border: 2px solid #236dcc; padding: 6px 8px; font-size: 15px; background-color: white;}


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;}

.request_invite_hp {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}