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

body {
    background-size: 0.9375em 0.9375em;
    background-image:
        linear-gradient(to right, #C8C4BD 0.0625em, transparent 0.0625em),
        linear-gradient(to bottom, #C8C4BD 0.0625em, transparent 0.0625em);
}

i.toggleBtn.fa-dumpster {
    margin-top: 1.25em;
}

.toggleBtn {
    --fa-beat-fade-scale: 1.25;
    --fa-animation-duration: 3.7s;
}

#map {
    width: 101vw;
    height: 50vh;
}

h1 {
    font-size: 7em;
    line-height: 1em;
    margin-top: .65em !important;
    margin-left: .35em;
}

.charColor {
    text-shadow: .05em .05em .05em #1A170F;
}

.description-survey-inner-row {
    padding: 1.25em 0;
    background-color: rgba(255, 255, 255, 0.7);
}

h2 {
    font-size: 2.25em;
}

p {
    width: 43%;
    text-align: justify;
    font-family: sans-serif;
    font-weight: lighter;
}

input#MERGE0 {
    border-bottom: .05em dotted #1A170F;
}

::placeholder {
    color: #545454;
    font-size: x-small;
}

.subscribeText,
.subscribeBtn {
    margin-bottom: 5em;
}

.subscribeBtn {
    width: 11em;
    padding: .25em .75em;
    font-weight: bold;
    border-radius: .75em;
    border-style: solid;
    background-color: #FFF;

    border-width: 0;
    border-top: 0.125em solid #1A170F;
    border-bottom: 0.125em solid #1A170F;
    box-shadow: .05em .05em #1A170F, .1em .1em .1em #50C2C7;
}

.subscribeBtn:after {
    content: '>>';
    opacity: 0;
    top: 0.875em;
    right: -1.25em;
    transition: .5s;
}

.subscribeBtn:hover {
    padding-right: 1.5em;
    padding-left: 0.5em;
}

.subscribeBtn:hover:after {
    opacity: 1;
    right: 0.625;
}

.submitBtnText {
    margin-right: .45em;
}

div.column.survey-column {
    margin-top: -28em;
}

.survey-column {
    float: right;
    width: 33em;
    padding: 1.05em;
}

.description-survey-row:after {
    content: "";
    display: table;
    clear: both;
}

input[type="radio"],
input[type="checkbox"] {
    accent-color: #1A170F;
}

#industry,
#survey-btn {
    padding: .25em .65em;
    border-radius: .45em;
    box-shadow: 0 0 0 0.0625em #50C2C7 inset, 0 0 0 0.125em rgba(255, 255, 255, 0.15) inset, 0 0 0 0 #1A170F, 0 0 0 0.0625em rgba(0, 0, 0, 0.4), 0 0em 0.5em 0.0625em rgba(0, 0, 0, 0.5);
}

textarea {
    width: 47%;
    border-left: .015em solid #1A170F;
}

#thoughts,
#survey-btn {
    margin-top: .45em;
}

#industry:hover,
#survey-btn:hover {
    background-color: #50C2C7;
}

.gateway-row {
    display: flex;
    justify-content: center;
    margin: 2.65em -.7em -1em 0;
    padding: 1.25em 0 2em 0;
}

img {
    width: 87%;
    height: auto;
}

.gateways {
    font-size: 1.65em;
}

.gateways.construction:hover {
    color: #22E4AC;
}

.gateways.pilot:hover {
    color: #4ADEDE;
}

.gateways.solopreneur:hover {
    color: orangered;
}

footer {
    width: 101%;
    padding-right: 2.15em;
    text-align: right;
    margin-top: 3.75em;
    background-color: #FCF0CC;
}

.forwardSlash {
    font-size: xx-large;
}

button#storysim-construction-btn,
button#storysim-pilot-btn,
button#storysim-solopreneur-btn,
button#credit-mentor-btn,
button#credit-mentee-btn {
    width: 5em;
    margin-bottom: 1.45em;
    border-top: none;
    border-bottom: none;
    border-radius: .75em;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2)
    }

    100% {
        transform: scale(1);
    }
}

.pulse {
    animation: pulse 2s infinite;
}

button#credit-mentor-btn.pulse,
button#credit-mentee-btn.pulse,
button#credit-mentor-btn,
button#credit-mentee-btn {
    color: crimson;
    border-right: 1.125em solid crimson;
    border-left: 1.125em solid crimson;
}

#credit-mentor-page {
    margin-top: 2.15em;
}

video,
#credit-mentor-btn,
#credit-mentee-btn {
    width: 67%;
    height: 25%;
    margin-bottom: 2.25em;
}

a {
    font-size: xx-small;
}

/* BACKGROUNDS */
input,
.gateways,
.footer-link,
button#storysim-construction-btn,
button#storysim-pilot-btn,
button#storysim-solopreneur-btn,
#credit-mentor-btn,
#credit-mentee-btn,
button#credit-mentor-btn,
button#credit-mentee-btn {
    background-color: transparent;
}

#industry,
#survey-btn,
.gateway-row {
    background-color: #1A170F;
}

/* BORDERS  */
input#MERGE0,
#name,
#email,
#industry,
#survey-btn,
.gateways,
.footer-link {
    border: none;
}

.subscribeBtn,
button#storysim-construction-btn,
button#storysim-pilot-btn,
button#storysim-solopreneur-btn,
button#credit-mentor-btn,
button#credit-mentee-btn {
    border-right: 0.125em solid #50C2C7;
    border-left: 0.125em solid #50C2C7;
}

/* COLORS  */
.toggleBtn,
h1,
h2,
.subscribeBtn,
#industry:hover,
#survey-btn:hover,
span#thoughts,
.footer-link {
    color: #1A170F;
}

.toggleBtn:hover,
.charColor,
a {
    color: #50C2C7;
}

#industry,
#survey-btn,
.gateways {
    color: #FFF;
}

/* CURSORS  */
.toggleBtn:hover,
.subscribeBtn:hover,
select#industry,
button#survey-btn,
button.gateways.construction,
button.gateways.pilot,
button.gateways.solopreneur,
button#credit-mentor-btn.pulse,
button#credit-mentee.btn.pulse {
    cursor: pointer;
}

/* DISPLAYS  */
#construction:active,
#pilot:active,
#solopreneur:active,
#credit-mentor-page:active,
#credit-mentee-page:active,
footer,
.pulse,
.active {
    display: block;
}

div.maplibregl-ctrl-attrib-inner,
.maplibregl-compact-show,
.subpage {
    display: none;
}

/* FONT FAMILIES */
h1,
h2,
.bodyProjectTitle,
.subscribeText,
.subscribeBtn,
#label-name,
#label-email,
#label-industry,
span#thoughts,
#survey-btn,
.gateways,
.footer-link {
    font-family: Orbitron, sans-serif;
}

/* MARGINS */
body,
.grid-div,
.background-div,
section.title-description-links-credit {
    margin: 0;
}

.toggleBtn,
h2 {
    margin-left: 1.25em;
}

p,
form,
video,
#credit-mentor-btn,
#credit-mentee-btn {
    margin-left: 3em;
}

/* TEXT DECORATIONS */
.footer-link,
a {
    text-decoration: none;
}

/* MEDIA QUERIES */
@media only screen and (max-width: 2850px) {
    h1 {
        margin-top: 3.5em;
    }
}

@media only screen and (max-width: 1064px) {

    video,
    button#credit-mentor-btn,
    button#credit-mentee-btn {
        display: none;
    }
}

@media only screen and (max-width: 1052px) {
    h1 {
        font-size: 6.25em;
    }

    .bodyProjectTitle {
        font-size: .97em;
    }
}

@media only screen and (max-width: 1028px) {
    .bodyProjectTitle {
        font-size: .95em;
    }
}

@media only screen and (max-width: 1012px) {
    h1 {
        font-size: 6.15em;
    }

    p {
        width: 47%;
    }

    div.column.survey-column {
        padding-left: 3.45em;
    }
}


@media only screen and (max-width: 979px) {
    div.column.survey-column {
        margin-top: -31em;
        padding-left: 5.45em;
    }

    #industry {
        margin-top: 1.45em;
    }
}

@media only screen and (max-width: 968px) {
    h1 {
        font-size: 5.75em;
    }
}

@media only screen and (max-width: 907px) {
    div.column.survey-column {
        margin-top: -31em;
        padding-left: 10em;
    }
}

@media only screen and (max-width: 801px) {
    h1 {
        font-size: 4.75em;
    }

    p {
        width: 57%;
    }
}

@media only screen and (max-width: 800px) {
    body {
        font-size: 67%;
    }

    h1 {
        font-size: 4.25em;
    }
}

@media only screen and (max-width: 757px) {

    i.toggleBtn.fa-dumpster {
        margin-top: 1.75em;
    }

    h1 {
        margin-top: 5.25em;
    }

    .survey-column {
        display: none;
    }

    h2,
    p,
    form.subscribeForm {
        margin-right: auto;
        margin-left: auto;
        width: 50%;
    }

    button#subscribeBtn {
        width: 50%;
        margin-top: 1.25em;
    }
}