/* 
            font-family: "Figtree", sans-serif;
            font-family: "Space Mono", monospace;
            font-family: "Space Grotesk", sans-serif;
         */
body {
    margin: 0;
    font-family: "Space Mono", monospace;
    background-color: rgb(34, 34, 34);
    color: white;
    scroll-behavior: smooth;
}

.midpage{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a,
a:visited {
    color: cyan;
}

.focus{
    color: cyan !important;
}

.headergap{
    background-color: rgb(24, 24, 24);
    height: 70px;
}

h1,
h2,
h3 {
    margin: 0;
}

.logo{
    color: white !important;
    text-decoration: none;
}

.banner {
    height: 700px;
    background-image: linear-gradient(180deg, rgb(60, 9, 119), rgb(119, 28, 155));
    pointer-events: none;
    text-align: center;
}

.banner .align {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.banner .align .middle {
    color: white;
    position: absolute;
    z-index: 5;
}

.banner h1 {
    font-size: 10em;
    letter-spacing: -18px;
    margin: 0;
    position: relative;
    z-index: 5;
    color: white;
    letter-spacing: -18px;
    text-shadow:
        1px 1px 0px black,
        2px 2px 0px black,
        3px 3px 0px black,
        4px 4px 0px black,
        5px 5px 0px black,
        6px 6px 0px black;
    white-space: nowrap;
    margin-left: -16px;
    animation: fadein 1s forwards ease;
}

@keyframes fadein {
    0% {
        transform: translateY(-10px);
        letter-spacing: 10px;
        opacity: 0;
    }
}

#wave span {
    display: inline-block;
    animation: moveY 3s ease-in-out infinite;
}

.banner .subtitle {
    width: max-content;
    padding: 0px 10px;
    margin-top: -35px;
    font-size: 1.6em;
    text-shadow:
        1px 1px 0px black,
        2px 2px 0px black,
        0px 0px 100px blueviolet,
        0px 0px 30px blueviolet,
        0px 0px 10px blueviolet,
        0px 0px 50px pink,
        0px 0px 20px pink;
    letter-spacing: 0px;
    font-family: "Figtree", sans-serif;
    animation: fadein2 1s forwards ease;
    animation-delay: .5s;
    opacity: 0;
}

@keyframes fadein2 {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

.artcred {
    text-shadow:
        0px 0px 100px blueviolet,
        0px 0px 30px blueviolet,
        0px 0px 10px blueviolet,
        0px 0px 80px pink;
    position: absolute;
    z-index: 50;
    bottom: 0;
}

.artcred a {
    color: cyan;
    pointer-events: all;
}

.banner .midf {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes moveY {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}


.banner .imgholder {
    position: absolute;
    z-index: 2;
    width: 1100px;
    height: 700px;
}

.banner .eyeholder {
    position: absolute;
    width: 1100px;
    height: 700px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner .imgholder .placing {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner .imgholder .dergx4 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: 10;
}

.banner .imgholder .dergx4b {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: 20;
    animation: eyeglow 6s infinite forwards ease-in-out;
}

.banner .dergx4c {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: 40;
    animation: eyeglow 6s infinite forwards ease-in-out;
    mix-blend-mode: multiply;
    filter: blur(1px);
}

@keyframes eyeglow {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
    }
}

.banner .filter {
    position: absolute;
    z-index: 4;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg, rgb(60, 9, 119, 0.3), rgb(72, 14, 95));
}

.banner .bgcross {
    width: 100%;
    height: 100%;
    background-image: url('assets/x.webp');
    background-repeat: repeat;
    position: absolute;
    z-index: 1;
    background-size: 20px;
    opacity: 0.4;
}

header {
    position: absolute;
    z-index: 1000;
    width: 100%;
    background-color: rgba(128, 0, 128, 0);
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(180deg, rgb(60, 9, 119, 1), rgba(86, 17, 165, 0.5), transparent);
}

@media (max-width: 768px) {
    header {
        position: fixed;
        backdrop-filter: blur(8px);
    }
}

header .align {
    width: 100%;
    height: 100%;
    max-width: 1200px;
    padding: 0px 20px;
    display: flex;
}

header .a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: left;
}

header .a p {
    margin: 0;
    font-weight: bold;
    font-size: 1.5em;
    text-shadow:
        1px 1px 0px black,
        2px 2px 0px black,
        3px 3px 0px black;
}

header .b {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: right;
}

header nav a,
header nav a:visited {
    color: white;
    margin: 0px 7px;
}

header nav a:last-child {
    margin-right: 0;
}

header nav a:first-child {
    margin-left: 0;
}

header .b nav {
    display: flex;
}

.mobileicon {
    display: none;
}

@media (max-width: 768px) {
    .mobileicon {
        display: block;
    }

    header nav a:not(.mobileicon) {
        display: none;
    }

    .banner h1 {
        font-size: 20vw;
        letter-spacing: -10px;
    }

    .banner .subtitle {
        font-size: 5vw;
        margin-top: -20px;
    }
}

@media (min-width: 769px) {
    .mobileopts {
        display: none !important;
    }
}

.mobileopts {
    display: none;
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 500;
    background-image: linear-gradient(180deg, rgb(30, 5, 59), rgb(0, 0, 0));
    animation: navbarbg .5s forwards;
}

@keyframes navbarbg {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


.mobileopts .mobileholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mobileopts .mobilesection {
    padding: 10px 22px;
    margin-top: 70px;
    text-align: right;
    flex: 1;
    animation: navbarthing .5s forwards;
}

.mobileopts .mobilesection nav {
    display: flex;
    flex-direction: column;
}

@keyframes navbarthing {
    0% {
        opacity: 0;
        transform: translateX(0px) translateY(-50px);
    }

    100% {
        opacity: 1;
    }
}

.mobileopts .mobilesection p {
    margin: 0;
}

.mobileopts .mobilesection a,
.mobileopts .mobilesection a:visited {
    font-size: 10vw;
    color: white;
}

.copy {
    font-size: 120px;
    font-family: "Figtree", sans-serif;
    position: absolute;
    opacity: 0.2;
}

/* page */

.linkbutton {
    color: white;
    text-decoration: none;
}

.buttonlink {
    color: white;
    padding: 3px 20px;
    border: 2px solid white;
    text-decoration: none;
    width: max-content;
    margin: 15px 0px;
}

.page.flexbox {
    display: flex;
    max-width: 1100px;
    position: relative;
}

.page.flexbox .half:first-child {
    flex: 1;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 10px 20px;
}

.page.flexbox .half:last-child {
    flex: none;
    width: 400px;
    margin-left: 15px;
    padding: 40px 40px;
    background-color: rgb(27, 27, 27, 1);
}

.page.flexbox .textbit {
    position: relative;
    z-index: 20;
    background-color: rgb(27, 27, 27);
    padding: 10px 15px;
    box-shadow: 3px 3px black;
    max-width: 400px;
}

.pagealign .bgeffect {
    background-image: url('assets/x.webp');
    background-repeat: repeat;
    background-size: 20px;
    width: 100%;
    height: 300px;
    position: absolute;
    opacity: 0.2;
}

.page.flexbox .meholder {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.page.flexbox .meholder .me {
    height: 300px;
    object-fit: cover;
    background-color: rgba(45, 12, 53, 0.5);
}

.pagealign,
footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer .page .flexalign {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 100%;
}

footer .page .flexalign div:first-child{
    flex: 1;
}

.socialholder{
    margin-left: 15px;
}

.socialholder a .sociallink{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    height: 30px;
}

.socialholder a:last-child .sociallink{
    margin-right: 0px;
}

.sociallink img{
    width: 30px;
    filter: invert();
    object-fit: contain;
}

footer .page .flexalign .socialholder{
    display: flex;
}

footer .page .flexalign:first-child {
    justify-content: left;
    width: 110px;
}


@media (max-width: 769px) {
    .page.flexbox {
        display: block;
    }

    .page.flexbox .half {
        width: 100%;
        margin: 0;
        padding: 0px;
    }

    .page.flexbox .half:first-child {
        width: 100%;
        margin: 30px 0px;
        padding: 0px;
    }

    .page.flexbox .textbit {
        width: 100%;
        margin: 0px 30px;
        max-width: none;
    }

    .page.flexbox .half:last-child {
        width: 100%;
        margin: 0px 0px 40px 0px;
        padding: 0px;
        background-color: transparent;
    }

    .page.flexbox .half:last-child .meborder {
        margin: 0px 30px;
        padding: 20px 20px;
        background-color: rgb(27, 27, 27);
        box-shadow: 3px 3px black;
    }

    footer .page .flexalign {
        height: 100%;
    }

    footer .page .flexalign:first-child {
        width: 0;
    }

    .copy {
        font-size: 200px;
        opacity: 0.1;
    }
}

.mealign {
    background-image: linear-gradient(90deg, rgb(31, 6, 59), rgb(0, 0, 0));
}

.page {
    width: 100%;
}

.page h1,
.page p {
    margin: 0;
}

footer {
    background-color: rgb(14, 14, 14);
    overflow: hidden;
    position: relative;
}

footer .page {
    padding: 20px 20px;
    max-width: 1100px;
    display: flex;
}

.content {
    width: 100%;
    max-width: 1060px;
    padding: 20px 20px;
}

.maine {
    /* and kentucky! */
    background-color: rgb(24, 24, 24);
    text-align: center;
}

.kentucky {
    background-color: rgb(11, 5, 12);
    text-align: center;
}

.maine:not(.socials):not(.step) .content,
.kentucky .content {
    padding: 30px 20px 40px 20px;
}

.socials .content {
    padding: 30px 20px 20px 20px;
}

.step .content {
    padding: 30px 20px 30px 20px;
}

.maine .content p,
.kentucky .content p {
    margin: 0;
}

.arizona {
    background-color: rgb(18, 6, 27);
}

.flexsites {
    margin: 20px 0px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.flexsites .sitesopt {
    position: relative;
    overflow: hidden;
    width: 350px;
    min-height: 100px;
    display: flex;
    background-color: rgba(0, 0, 0, 1);
}

.flexsites a:last-child .sitesopt {
    padding-right: 0px;
}

.flexsites .sitesopt .extrainfo {
    flex: 1;
    text-align: left;
}

.flexsites .sitesico {
    width: 100px;
    height: 100%;
    min-width: 100px;
}

.flexsites .sitesopt .extraborder {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
}

.flexsites .sitesopt .extraborder .extrabox {
    padding: 15px 10px;
}

.flexsites a {
    margin: 0;
    color: white;
    text-decoration: none;
}

.flexsites .sitesopt .extraborder h2,
.flexsites .sitesopt .extraborder p {
    margin: 0;
}

.flexsites .sitesopt .extraborder h2 {
    line-height: 23px;
}

.flexsites .sitesopt .extraborder p {
    margin-top: 2px;
    font-size: 14px;
    line-height: 17px;
}


.flexsites.awards .sitesopt .sitetext {
    position: absolute;
    z-index: 5;
    width: 100px;
    height: 100%;
    background-color: rgba(219, 103, 9, 0.5);
}

.flexsites.awards .sitesopt .sitetext span {
    font-size: 50px;
}

.flexsites .sitesopt .sitetext {
    position: absolute;
    z-index: 5;
    width: 100px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(45, 12, 53, 0.5);
}

.step .flexsites {
    margin: 20px 0px 0px 0px;
    width: 100%;
    max-width: 720px;
}

.step .flexsites .sitesopt {
    width: 100%;
}

.step .flexsites .sitesopt .sitetext {
    background-color: rgba(32, 8, 28, 1);
}

.flexsites .sitesopt .sitetext img {
    width: 50%;
    height: 50%;
    object-fit: contain;
}

.sitescontain {
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
    gap: 10px;
}

.item {
    background-color: #131313;
    color: #fff;
    font-size: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.itemdescription {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: end;
    justify-content: start;
    width: 100%;
    height: 100%;
}

.itemdescription p {
    background-color: black;
    font-size: 15px;
    padding: 0px 7px;
}

.photo-grid:not(.equal) .item:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
}

.photo-grid:not(.equal) .item:nth-child(5) {
    grid-column: span 2;
    grid-row: span 2;
}

.photo-grid:not(.equal) .item:nth-child(4) {
    grid-row: span 2;
}

@media (max-width: 769px) {
    .flexsites {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .flexsites .sitesopt {
        padding-right: 0px;
    }

    .flexsites .sitesopt:last-child {
        margin-bottom: 0px;
    }

    .flexsites {
        width: 100%;
    }

    .flexsites .sitesopt {
        width: 100%;
    }

    .flexsites .sitesopt .extrainfo {
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: left;
    }

    .item .itemdescription p {
        background-color: black;
        font-size: 11px;
        padding: 0px 7px;
    }
}

.aligntomiddle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrowsbox {
    display: grid;
    margin-bottom: 5px;
    grid-template-columns: max-content max-content max-content max-content;
}

.arrow {
    width: 40px;
    margin-right: 10px;
}

.arrow:nth-child(1) {
    transform: rotate(-90deg);
}

.arrow:nth-child(2) {
    transform: rotate(-180deg);
}

.arrow:nth-child(4) {
    transform: rotate(90deg);
}

.arrow:last-child {
    margin-right: 0px;
}

.thread {
    padding: 15px 0px;
    width: 100%;
    background-color: rgba(32, 8, 28, 0.5);
    grid-column: span 2;
}

.stepphoto {
    background-color: rgba(32, 8, 28, 0.5);
    grid-column: span 2;
    height: 200px;
}

.stepphoto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stepcomment {
    background-color: #131313;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
}

.thread .buttonlink {
    margin-bottom: 0px;
}

.thread .threadpad {
    padding: 0px 15px;
}

.taketherest{
    flex: 1;
}