/*
    fonts
    Main title and story Titles: #ffca58, 
    Subtitles and story subtitles: #ffe161,
    socials and story text: #F5E8D8


*/


body {
    margin: 0px;
    padding: 0px;
    font-family: "Space Grotesk", sans-serif;
}
#topBanner {
    background: url("../images/banner3.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
    border-bottom: solid 1px #F5E8D8;
}
#bannerTitles {
    margin: 0px;
    padding: 0px;

}
#mainTitle {
    text-align: center;
    color: white;
    margin: 0px;
    padding: 0px;
    text-shadow: 0px 0px 3px black;
    font-size: 45px;
    font-family: "Playwrite NO", cursive;
    color: #ffca58;
}
@media (max-width: 768px) {
    #mainTitle {
        font-size: 30px;
    }
}
#mainSubTitle {
    text-align: center;
    color: white;
    margin: 0px;
    padding: 0px;
    color: #ffe161;
    text-shadow: 0px 0px 3px black;
    font-family: "Playwrite NO", cursive;
}
@media (max-width: 768px) {
    #mainSubTitle {
        font-size: 24px;
    }
}

/* nav bar*/
#navBarHorizontal {
    height: 50px;
    margin: 0px;
    padding: 0px;
    display: flex;
    background: linear-gradient(#364860,black);
    justify-content: center;
    align-items: center;
    gap: 3px;
    position: relative;
}
.navButton {
    padding: 1px 10px;
    border: solid 2px #ffca58;
    text-decoration: none;
    background-color: #364860;
    color: #F5E8D8;
}

/* hide hamburger on desktop */
#mobileMenuButton {
    display: none;
}

/* hidden dropdown */
#mobileDropdown {
    display: none;
}


/* MOBILE */
@media (max-width: 768px) {


    /* hide desktop buttons */
    .navButton {
        display: none;
    }

    /* show hamburger */
    #mobileMenuButton {
        display: block;
        background: none;
        border: 2px solid #ffca58;
        color: #ffca58;
        font-size: 24px;
        padding: 6px 14px;
        cursor: pointer;
    }

    /* dropdown styling */
    #mobileDropdown {
        background: radial-gradient(2px 2px at 20% 30%, #ffe161, transparent), radial-gradient(1px 1px at 70% 60%, #ffe161, transparent), linear-gradient(#111, #364860);
        border-bottom: 1px solid #ffca58;
    }

        #mobileDropdown a {
            display: block;
            text-align: center;
            padding: 15px;
            color: #F5E8D8;
            text-decoration: none;
            border-top: 1px solid rgba(255,202,88,.2);
        }

            #mobileDropdown a:hover {
                background: rgba(255,255,255,.05);
            }

        /* shown when JS adds class */
        #mobileDropdown.show {
            display: block;
        }
}


/* main page stuff*/
.pageContent {
    min-height: calc(100vh - 180px); /* 150 banner + 30 navbar */
    background: linear-gradient(#000000,#364860);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    background: radial-gradient(2px 2px at 20% 30%, #ffe161, transparent), radial-gradient(1.5px 1.5px at 80% 20%, #ffe161, transparent), radial-gradient(2px 2px at 60% 70%, #ffe161, transparent), radial-gradient(1px 1px at 30% 80%, #ffe161, transparent), radial-gradient(2px 2px at 90% 60%, #ffe161, transparent), radial-gradient(1px 1px at 10% 10%, #ffe161, transparent), radial-gradient(1px 1px at 15% 55%, #ffe161, transparent), radial-gradient(2px 2px at 25% 90%, #ffe161, transparent), radial-gradient(1px 1px at 35% 15%, #ffe161, transparent), radial-gradient(1.5px 1.5px at 45% 40%, #ffe161, transparent), radial-gradient(1px 1px at 55% 10%, #ffe161, transparent), radial-gradient(2px 2px at 70% 85%, #ffe161, transparent), radial-gradient(1px 1px at 85% 45%, #ffe161, transparent), radial-gradient(1.5px 1.5px at 95% 25%, #ffe161, transparent), radial-gradient(1px 1px at 5% 25%, #ffe161, transparent), radial-gradient(2px 2px at 12% 75%, #ffe161, transparent), radial-gradient(1px 1px at 18% 48%, #ffe161, transparent), radial-gradient(1.5px 1.5px at 22% 12%, #ffe161, transparent), radial-gradient(1px 1px at 28% 65%, #ffe161, transparent), radial-gradient(2px 2px at 33% 35%, #ffe161, transparent), radial-gradient(1px 1px at 38% 95%, #ffe161, transparent), radial-gradient(1.5px 1.5px at 42% 58%, #ffe161, transparent), radial-gradient(1px 1px at 48% 22%, #ffe161, transparent), radial-gradient(2px 2px at 52% 78%, #ffe161, transparent), radial-gradient(1px 1px at 58% 52%, #ffe161, transparent), radial-gradient(1.5px 1.5px at 63% 18%, #ffe161, transparent), radial-gradient(1px 1px at 68% 62%, #ffe161, transparent), radial-gradient(2px 2px at 73% 42%, #ffe161, transparent), radial-gradient(1px 1px at 77% 8%, #ffe161, transparent), radial-gradient(1.5px 1.5px at 82% 72%, #ffe161, transparent), radial-gradient(1px 1px at 87% 32%, #ffe161, transparent), radial-gradient(2px 2px at 92% 88%, #ffe161, transparent), radial-gradient(1px 1px at 97% 55%, #ffe161, transparent), radial-gradient(1px 1px at 7% 88%, #ffe161, transparent), radial-gradient(1.5px 1.5px at 14% 28%, #ffe161, transparent), radial-gradient(1px 1px at 19% 67%, #ffe161, transparent), radial-gradient(2px 2px at 27% 50%, #ffe161, transparent), radial-gradient(1px 1px at 31% 5%, #ffe161, transparent), radial-gradient(1.5px 1.5px at 41% 82%, #ffe161, transparent), radial-gradient(1px 1px at 50% 60%, #ffe161, transparent), radial-gradient(2px 2px at 57% 33%, #ffe161, transparent), radial-gradient(1px 1px at 66% 93%, #ffe161, transparent), radial-gradient(1.5px 1.5px at 74% 14%, #ffe161, transparent), radial-gradient(1px 1px at 83% 57%, #ffe161, transparent), radial-gradient(2px 2px at 89% 6%, #ffe161, transparent), linear-gradient(#000000, #364860);
}

.storyLink {
    display: block;
    width: 95%;
    max-width: 1000px;
    text-decoration: none;
    color: #F5E8D8;
    display: block; /* ensures full block is clickable */

}
.storyBlock {
    display: flex;
    height: 300px;
    width: 100%;
    max-width: 1000px;
    border: solid 1px #ffe161;
    margin: 20px 0px 5px 0px;
    background-color: black;
    min-width: 0; /* CRITICAL for proper shrinking */

}
.storyCover {
    width: 30%;
    min-width: 80px; /* prevents it from becoming tiny */
    max-width: 100%;
    height: auto; /* keeps aspect ratio */
    object-fit: cover;
    flex-shrink: 1; /* IMPORTANT: allow shrinking */
}
.storyAuthor {
    padding: 10px;
    font-size: 25px;
    border-bottom: solid 1px #ffe161;
    color: #ffca58;
}
@media (max-width: 768px) {
    .storyAuthor {
        font-size: 19px;

    }
}
.storyHooks {
    display: flex;
    flex-direction: column;
    flex: 1; /* take remaining space next to image */
    min-width: 0; /* IMPORTANT: allows shrinking in flex */
    overflow: hidden; /* prevent spill outside block */
}
@media (max-width: 768px) {
    .storyHooks {
        font-size: 18px;
    }
}
.storyBlurb {
    padding: 10px;
    font-size: 20px;
    overflow-y: auto;
    flex: 1; /* take remaining vertical space */
    min-height: 0; /* REQUIRED for scrolling in flex */
    color: #ffe161;
}
@media (max-width: 768px) {
    .storyBlurb {
        font-size: 18px;
    }
}
.aboutAuthor {
    padding: 10px;
    font-size: 20px;
    overflow-y: auto;
    flex: 1; /* take remaining vertical space */
    min-height: 0; /* REQUIRED for scrolling in flex */
}
@media (max-width: 768px) {
    .aboutAuthor {
        font-size: 18px;
    }
}

/*
    .leftSidePanel {
    position: fixed;
    left: 0;
    top: 180px; 

    width: 20%;
    max-width: 400px;
    height: 400px;
    background: white;
    margin: 20px;
}
    .rightSidePanel {
    position: fixed;
    right: 0;
    top: 180px;
    width: 20%;
    max-width: 400px;
    height: 400px;
    background: white;
    margin: 20px;
    }

*/

/* bottom banner code*/
#bottomBanner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    padding: 0;
    margin: 0;
    border-top: solid 1px #F5E8D8;
    color: #ffca58;
    background: radial-gradient(2px 2px at 5% 20%, #ffe161, transparent), radial-gradient(1px 1px at 12% 70%, #ffe161, transparent), radial-gradient(1.5px 1.5px at 18% 35%, #ffe161, transparent), radial-gradient(1px 1px at 24% 80%, #ffe161, transparent), radial-gradient(2px 2px at 30% 15%, #ffe161, transparent), radial-gradient(1px 1px at 37% 55%, #ffe161, transparent), radial-gradient(1.5px 1.5px at 43% 28%, #ffe161, transparent), radial-gradient(1px 1px at 49% 88%, #ffe161, transparent), radial-gradient(2px 2px at 55% 42%, #ffe161, transparent), radial-gradient(1px 1px at 61% 10%, #ffe161, transparent), radial-gradient(1.5px 1.5px at 67% 72%, #ffe161, transparent), radial-gradient(1px 1px at 73% 38%, #ffe161, transparent), radial-gradient(2px 2px at 79% 82%, #ffe161, transparent), radial-gradient(1px 1px at 84% 22%, #ffe161, transparent), radial-gradient(1.5px 1.5px at 90% 58%, #ffe161, transparent), radial-gradient(2px 2px at 96% 12%, #ffe161, transparent), radial-gradient(1px 1px at 8% 90%, rgba(255,225,97,.6), transparent), radial-gradient(1px 1px at 21% 8%, rgba(255,225,97,.5), transparent), radial-gradient(1px 1px at 33% 63%, rgba(255,225,97,.7), transparent), radial-gradient(1px 1px at 46% 18%, rgba(255,225,97,.5), transparent), radial-gradient(1px 1px at 58% 92%, rgba(255,225,97,.6), transparent), radial-gradient(1px 1px at 71% 6%, rgba(255,225,97,.5), transparent), radial-gradient(1px 1px at 86% 76%, rgba(255,225,97,.7), transparent), linear-gradient(#364860, #2b394d);
}

#callToAction {
    margin: 2px;
    padding: 0px 5px;
   
}
.storyHeader {
    color: white;
    display: flex;
    width: 100%;
    max-width: 800px;
    border: solid 1px #F5E8D8;
    margin: 20px 0px 5px 0px;
    min-width: 0; /* CRITICAL for proper shrinking */
    height: 220px;
    padding: 15px;
}
#storyCoverFull {
    font-size: 22px;

    
}
#storyAuthorFull {
    color: #ffe161;
}
.socialsIcons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    height: 60px;
}
.socialLink {
    color: yellow;
    font-size: 30px;
    text-decoration: none;
    transition: 0.2s;
    padding: 0px 0px 20px 0px;
}
#followUs {
    font-size: 22px;
    text-align: center;
    max-width: 90vw;
    margin: 0 auto;
    padding: 15px 10px;
    white-space: normal;
    overflow-wrap: break-word;
}

#subscribe {
    padding: 10px 10px 0px 10px;
    font-size: 22px;
    text-align: center;
}

.callToActionSubscribe {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.emailSubscribeForm {
    font-size: 22px;
    display: flex;
    flex-direction: column; /* puts button below input */
    align-items: center; /* centers horizontally */
    gap: 10px;
    margin: 0 0 30px 0;

}
    .emailSubscribeForm input {
        width: 300px;
        padding: 12px 12px 12px 12px;
        border: 1px solid #caf0f8;
        border-radius: 6px;
        text-align: center;
        font-size: 22px;
    }

#emailSubscribeSubmitButton {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    background: green;
    color: white;
    font-size: 22px;
    cursor: pointer;
}
#donate {
    display: block;
    text-align: center;
    text-decoration: none;
    font-size: 24px;
    color: #ffca58;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 15px;
    white-space: normal;
    overflow-wrap: break-word;
}

/* story stuff*/
#storyTitleContainer {
    flex: 1; /* take remaining space */
    text-align: center;
    color: #ffca58;
  
}
#mainSubTitle {
    color: #ffe161;
}
#storyAuthorSocials {
    text-align: center;
    font-size: 16px;
    color: #F5E8D8;
}
.storyText {
    padding: 15px;
    color: #F5E8D8;
    width: 100%;
    max-width: 800px;
    border: solid 1px #F5E8D8;
    margin: 20px 0px 5px 0px;
    min-width: 0; /* CRITICAL for proper shrinking */
    font-size: 22px;
    line-height: 1.5;
    text-shadow: 0px 0px 2px black;
}
@media (max-width: 768px) {
    .storyText {
        font-size: 18px;
        line-height: 1.7;
    }
}
.mainStoryWrap {
    display: flex;
    flex-direction: column;
    align-items: center; /* optional: centers both blocks */
}
.sceneBreak {
    text-align: center;
    margin: 40px 0;
    font-size: 24px;
    color: #F5E8D8;
    letter-spacing: 8px;
}
.mainStoryWrap {
    margin: 20px;
}

/*submissions page code*/
#submissionStatusGeneral {
    color: #ffca58;
}
#submitInfoContainer {
    color: #F5E8D8;
    display: flex;
    width: 100%;
    max-width: 800px;
    border: solid 1px #F5E8D8;
    margin: 20px 0px 5px 0px;
    min-width: 0; /* CRITICAL for proper shrinking */

    padding: 10px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 22px;
}
@media (max-width: 768px) {
    #submitInfoContainer {
        font-size: 18px;
    }
}
#submissionTastes {
    margin: 15px;
}
#submissionGuide {
    margin: 15px;
}
#submissionPayment {
    margin: 15px;
}
#artSubmissions {
    margin: 15px;
}
#forewordSubmissions {
    margin: 15px;
}
/* about page code*/
#staffContainer {
    color: #F5E8D8;
    display: flex;
    width: 100%;
    max-width: 800px;
    margin: 20px 0px 5px 0px;
    min-width: 0; /* CRITICAL for proper shrinking */

    padding: 10px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 22px;
}
.staffPortrait {
    height: 200px;
    width: 200px;
    border: solid 1px grey;
    border-radius: 50%;
    margin: 10px;
}
.staffCard {
    display: flex;
    gap: 20px;
    align-items: center;
    margin: 20px;
    border: solid 1px #F5E8D8;
}
.missionText {
    margin: 10px;
    padding: 10px;
}
@media (max-width: 768px) {
    .missionText {
        font-size: 18px;
    }
}
@media (max-width: 768px) {
    .staffText {
        font-size: 18px;
        padding:5px;
    }
}


/*archive page code*/
.storyLinkArchive {
    display: block;
    width: 95%;
    max-width: 1000px;
    text-decoration: none;
    color: #ffe161;

}

.storyCoverArchive {
    width: 30%;
    min-width: 50px; /* prevents it from becoming tiny */
    max-width: 100px;
    height:auto;
}
.storyTitleArchive {
    font-size: 25px;
    padding: 0px 10px 10px 10px;
    display: flex;
    align-items: center; /* vertical */
    justify-content: center; /* horizontal */
}
@media (max-width: 768px) {
    .storyTitleArchive {
        font-size: 18px;
    }
}
.storyBlockArchive {
    display: flex;
    height: 100px;
    width: 100%;
    max-width: 1000px;
    border: solid 1px #ffe161;
    margin: 20px 0px 25px 0px;
    background-color: black;
    min-width: 0; /* CRITICAL for proper shrinking */
}

/*support us code*/
.supportBlock {
    height: auto;
    width: 100%;
    max-width: 1000px;
    border: solid 1px #ffca58;
    margin: 20px 0px 5px 0px;
    min-width: 0; /* CRITICAL for proper shrinking */
}
.patreonLink {
    text-decoration: none; /* removes underline */
    color: #F5E8D8; /* use parent text color */
    width: 95%;
    display: flex;
    align-content: center;
    justify-content: center;
}
#patreonSupportText {
    text-align: center;
    padding: 0px 10px 10px 10px;
    font-size: 40px;
}
@media (max-width: 768px) {
    #patreonSupportText {
        font-size: 30px;
    }
}
#patreonWord {
    font-size: 50px;
    color: #ffca58;
}
@media (max-width: 768px) {
    #patreonWord {
        font-size: 40px;
    }
}
#tierList {
    font-size: 27px;
    text-align: center;
    padding: 0px 10px 10px 20px;
}
@media (max-width: 768px) {
    #tierList {
        font-size: 18px;
    }
}

#commingSoon {
    color: #ffca58;
    font-size: 30px;
    text-align: center;
}
#substackCall {
    color: #ffca58;
    font-size: 30px;
    text-align: center;
}
    #substackCall:hover {
        color: #FFE95A;
    }

/*comming soon page*/
#comingSoonHook {
    font-size: 24px;
    padding: 20px;
    margin: 20px;
    text-align:center;
}


/*magazine page*/
.magazinePageContent {
    padding: 20px;
    color: black;
    width: 95%;
    max-width: 1200px;
    border: solid 1px #F5E8D8;
    margin: 20px 0px 5px 0px;
    min-width: 0; /* CRITICAL for proper shrinking */
    font-size: 20px;
    line-height: 1.3;

}
.classic{
    color:white;
}
.magazinePage {
    display: flex;
    justify-content: center;
}
.backButton {
    display: inline-block;
    padding: 5px;
    font-size: 20px;
    text-decoration: none;
    border: solid 2px black;
    background: #D3D3D3;
    color: black;
    cursor: pointer;
    position:fixed;
}
/* utility stuff*/
.italics {
    font-style: italic;
}
.colorGreen{
    color:green;
}
.colorRed {
    color: red;
}
.bold {
    font-weight: bold;
}
.simple-underline {
    text-decoration: underline;
}