* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body, html {
    margin: 0;
    padding: 0;
    height: auto;
    min-height: 100vh;
    width: 100vw;
    font-size: 62.5%; /* This makes 1rem equal to 10px for easier calculations */
}

body {
    background-color: #1a1a1a; /* Background color */
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px), radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 20px 20px; /* Double the spacing value to accommodate both the dot and the spacing */
}

header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

main {
    position: relative;
    top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100vw;
    gap: 40px;
}

a {
    color: #EE5D78;
    text-decoration: none;
    text-transform: inherit;
}

.logo-section {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
}

.toplogo {
    max-width: 150px;
    height: auto;
    -webkit-filter: drop-shadow(0px 0px 20px rgba(227, 243, 196, 1));
}

.top-text {
    position: relative;
    top: 0px;
    text-transform: uppercase;
    text-align: center;
    font-family: "Instrument Serif", serif;
    font-size: 5.5rem;
    width: 100vw;
    max-width: 1150px;
    line-height: .85;
    color: #eee;
    text-align: justify;
    text-align-last: justify;
    margin-bottom: 60px;
}

.banner {
    position: absolute; /* Absolute position relative to the nearest positioned ancestor (slideshow-container) */
    top: 50%; /* Distance from the top of the container */
    transform: translateY(-50%);
    width: 100vw;
    background-color: #C9EAA8;
    height: 40px;
    white-space: nowrap; /* Ensure the text stays in one line */
    z-index: 1000;
    -webkit-filter: drop-shadow(0px 0px 10px rgba(227, 243, 196, 0.5));
    -webkit-transition: all 0.2s linear;
    cursor: pointer;
    padding-top: 6px;
    overflow: visible;
}

.banner:hover {
    background-color: #d5ffab;
    -webkit-filter: drop-shadow(0px 0px 20px rgba(227, 243, 196, 1));
}

#bannerText {
    position: absolute;
    display: inline-block;
    text-transform: uppercase;
    font-style: italic;
    text-align: center;
    color: #000; /* Example style */
    font-family: "Instrument Serif", serif;
    font-size: 2.2rem;
}

@keyframes scroll-left {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

#navbar {
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 70vw; /* Initial width */
    max-width: 750px;
    margin: 0 auto;
    background-color: rgba(0, 0, 0);
    color: #fff;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
}

#navbar.sticky {
    width: 100vw; /* Full viewport width */
    max-width: 100vw; /* Override the max-width when sticky */
    background-color: #fff;
    color: rgba(0, 0, 0);
    
}

#navbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Initial width */
    height: 50px;
    max-width: 950px;
    font-family: "Work Sans", sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1.6rem;
    padding: 0 20px;
    margin: auto;
}


.navbar-logo {
    font-weight: 700;
}

.navbar-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center; /* Centers menu items vertically */
}

.navbar-menu ul li {
    padding: 0  3px; /* Horizontal padding between menu items */
}

.navbar-menu ul li a {
    color: inherit;
    text-decoration: none;
}

.navbar-menu ul li a:hover {
    font-weight: 500;
}

#nav-journal:hover {
    cursor: url('media/cursors/cursor-journal.png') 0 0, auto; /* Hotspot at the center for a 32x32 image */
}

#nav-podcast:hover {
    cursor: url('media/cursors/cursor-podcast.png') 0 8, auto; /* Hotspot at the center for a 32x32 image */
}

#nav-community:hover {
    cursor: url('media/cursors/cursor-community.png') 0 8, auto; /* Hotspot at the center for a 32x32 image */
}
#nav-store:hover {
    cursor: url('media/cursors/cursor-store.png') 5 5, auto; /* Hotspot at the center for a 32x32 image */
}

#nav-about:hover {
    cursor: url('media/cursors/cursor-about.png') 5 5, auto; /* Hotspot at the center for a 32x32 image */
}

#journal:target {
    padding-top: 90px;  /* Adjust this value to match your fixed header's height */
    margin-top: -90px;  /* This should be the negative value of the padding */
}

.magazine-section {
    position: relative;
    width: 100vw;
    overflow: hidden;
    transform-origin: top center;
    margin-bottom: 20px;
}

.magazine-content {
    width: 85vw;
    max-width: 1000px;
    aspect-ratio: 10 / 7;
    margin: 0 auto;
    pointer-events: none;
    filter: sepia(15%) brightness(90%);
}

.turn-page-wrapper {
    border: 0.5px solid #000;
    box-shadow: inset 50px 0px 100px rgba(0, 0, 0, .2), 0px 0px 150px rgba(0, 0, 0, .4);
    transition: box-shadow 0.5s ease-in-out;
    -webkit-transform: translate3d(0, 0, 0); /* Enhances the depth effect */
    will-change: box-shadow;
}

.blur-effect {
    -webkit-filter: blur(5px);
    filter: blur(5px);    
}


/* .magazine-spread {
    position: relative;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    object-fit: contain;
    opacity: 0;
} */

.button-pink {
    position: absolute; /* Absolute position relative to the nearest positioned ancestor (slideshow-container) */
    top: 50%; /* Distance from the top of the container */
    left: 50%; /* Distance from the right of the container */
    padding: 10px 30px;
    font-family: "Work Sans", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1.5rem;
    text-align: center; /* Example style */
    color: white;
    border-radius: 50px;
    border: 0;
    background-color: #C65368;
    -webkit-filter: drop-shadow(0px 0px 20px rgba(238, 93, 120));
    -webkit-transition: all 0.2s linear;
    cursor: pointer;
    transform: translateX(-50%) translateY(-50%);
    z-index: 1000; /* Make sure it's above other content */
    overflow: visible;
}

.button-pink:hover{
    color: #FFF;
    background-color: #C65368;
    -webkit-filter: drop-shadow(0px 0px 20px rgba(238, 93, 120));
}

#podcast:target {
    padding-top: 90px;  /* Adjust this value to match your fixed header's height */
    margin-top: -90px;  /* This should be the negative value of the padding */
}

.podcast-section {
    position: relative;
    width: 85vw;
    max-width: 1000px;
    margin-bottom: 45px;
}

.podcast-text {
    font-family: "Work Sans", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1.5rem;
    text-align: center; /* Example style */
    color: white;
    margin-bottom: 15px;
}

.podcast-container {
    position: relative;
    padding-bottom: 45px;
    width: 60vw;
    max-width: 750px;
    background-color: #FFCCDE;
    overflow: visible;
    border-radius: 40px 40px 0px 0px;;
    left: 50%;
    transform: translateX(-50%);
}

#podcast-cover {
    position: relative;
    width: 100%;
    border-radius: 40px 40px 0px 0px;;
    aspect-ratio: 16 / 9;
    margin-bottom: 25px;
    background-position: center;
    background-size: contain;
    background-repeat:no-repeat;
}

#podcast-tags {
    font-family: "Work Sans", sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    text-transform: uppercase;
    color: #C65368;
    display: flex;        /* Flexbox layout to center content */
    justify-content: center; /* Horizontally center the content */
    align-items: center;  /* Vertically center the content */
    border-radius: 10px;  /* Rounded corners with 10px radius */
    width: fit-content;  /* Adjust width based on content size */
    margin: auto;        /* Centers the element horizontally */
    margin-bottom: 20px;
}

#podcast-tags span {
    padding: 3px 10px;    /* Padding inside each tag */
    margin: 0 3px;        /* Space between tags */
    border-radius: 50px;  /* Rounded corners for each tag */
    border: 1.5px solid #C65368;
   /* border: 2px solid black;  Border for each tag */
}

#podcast-description {
    font-family: "Work Sans", sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    text-align: justify; /* Example style */
    color: #000000;
    margin-bottom: 20px;
    margin-left: 25px;
    margin-right: 25px;
}

#podcast-listenOn {
    font-family: "Work Sans", sans-serif;
    text-align: center;
    font-weight: 600;
    font-size: 1.4rem;
    text-transform: uppercase;
    color: #000;
    margin-left: 25px;
    margin-right: 25px;
}

#podcast-listenOn a {
    color: #000;
}

#podcast-listenOn a:hover {
    color: #000;
}

#listenOn-apple:hover {
    cursor: url('media/cursors/cursor-listenOn-apple.png') 0 0, auto; /* Hotspot at the center for a 32x32 image */
}

#listenOn-spotify:hover {
    cursor: url('media/cursors/cursor-listenOn-spotify.png') 5 5, auto; /* Hotspot at the center for a 32x32 image */
}

#listenOn-youtube:hover {
    cursor: url('media/cursors/cursor-listenOn-youtube.png') 0 0, auto; /* Hotspot at the center for a 32x32 image */
}

#listenOn-pocket:hover {
    cursor: url('media/cursors/cursor-listenOn-pocket.png') 5 5, auto; /* Hotspot at the center for a 32x32 image */
}

#listenOn-rss:hover {
    cursor: url('media/cursors/cursor-listenOn-rss.png') 0 0, auto; /* Hotspot at the center for a 32x32 image */
}

.podlink-icon {
    width: 30px;
}

#podcast-title {
    text-transform: uppercase;
    text-align: center;
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-size: 2.5rem;
    line-height: .9;
    color: #000;
    margin-bottom: 15px;
}

.button-podcast {
    position: absolute; /* Absolute position relative to the nearest positioned ancestor (slideshow-container) */
    bottom: -20px;/* Distance from the top of the container */
    width: 100%;
    height: 40px;
    font-family: "Work Sans", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1.5rem;
    text-align: center; /* Example style */
    color: #C65368;
    border-radius: 50px;
    border: 0;
    background-color: #FFF;
    -webkit-filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.5));
    -webkit-transition: all 0.2s linear;
    cursor: pointer;
    z-index: 100; /* Make sure it's above other content */
    overflow: visible;
}

.button-podcast:hover{
    color: #EE5D78;
    -webkit-filter: drop-shadow(0px 0px 20px rgb(255, 255, 255, 1));
}

.community-section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    background-color: #EEE;
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.1) 1px, transparent 1px), radial-gradient(circle, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
    background-size: 20px 20px; /* Double the spacing value to accommodate both the dot and the spacing */
    padding-top: 42px;
    padding-bottom: 20px;
}

#community:target {
    padding-top: 85px;  /* Adjust this value to match your fixed header's height */
    margin-top: -85px;  /* This should be the negative value of the padding */
}

.community-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the content horizontally */
    justify-content: center; /* Centers the content vertically */
    width: 90vw; /* Full width */
    max-width: 1000px;
}

.community-title {
    text-transform: uppercase;
    text-align: center;
    font-family: "Instrument Serif", serif;
    font-size: 4.5rem;
    line-height: .9;
    color: #000;
    margin-bottom: 20px;
}

#subscribe-text {
    font-family: "Work Sans", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1.5rem;
    text-align: center; /* Example style */
    color: #000000;
    margin-bottom: 40px;
    width: 75vw;
    max-width: 800px;
}

#subscription-form {
    position: relative;
    width: 75vw; /* Adjust as necessary */
    max-width: 500px;
    height: 40px;
    display: flex;
    justify-content: center;
    margin: auto; /* Center horizontally */
}

input[type="email"] {
    flex: 1;
    padding: 20px;
    height: auto;
    border: none;
    background-color: #1c1c1c;
    color: #dddddd;
    font-family: "Work Sans", sans-serif;
    font-weight: 600;
    font-size: 2rem;
    border-radius: 50px 0 0 50px;
}

input[type="email"]:focus {
    outline: none;
}

::placeholder {
    color: #aaaaaa;
    text-align: left;
    font-size: 2rem;
}

#subscribe-button {
    padding: 0 20px;
    margin: auto;
    height: 40px;
    background-color: #d5ffab;
    color: #111111;
    border: none;
    border-radius: 0 50px 50px 0;
    cursor: pointer;
    font-family: "Karla", sans-serif;
    font-weight: 800;
    font-size: 2rem;
    -webkit-filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.5));
    -webkit-transition: all 0.2s linear;
    cursor: pointer;
    overflow: visible;
}

#subscribe-button:hover {
    background-color: #d5ffab;
    -webkit-filter: drop-shadow(0px 0px 20px rgba(227, 243, 196, 1));
}

.site-footer {
    position: relative;
    bottom: 0;
    width: 100%;
    padding-top: 60px;
    text-align: center;
}

.ig-poster {
    position: relative;
    max-width: 100%;
    height: 750px;  /* Adjust to your image aspect ratio */
    margin: 2rem 0;
    border-radius: 8px;  /* Matches your site aesthetic */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #f0f0f0;  /* Fallback if image fails */
}

.ig-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Crops nicely if image is wrong ratio */
    display: block;
}

.logo {
    width: 100px;
    height: auto;
    -webkit-filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.75));
    margin-bottom: 20px;
    overflow: visible;
}

.footerTEXT {
    color: #000;
    bottom: 10px;
    font-family: "Karla", sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
}

.footer-links {
    font-family: "Work Sans", sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    text-transform: uppercase;
    color: #000;
    display: flex;        /* Flexbox layout to center content */
    justify-content: center; /* Horizontally center the content */
    align-items: center;  /* Vertically center the content */
    border-radius: 10px;  /* Rounded corners with 10px radius */
    width: fit-content;  /* Adjust width based on content size */
    margin: auto;        /* Centers the element horizontally */
    margin-bottom: 15px;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center; /* Centers menu items vertically */
}

.footer-links ul li {
    padding: 5px 20px;    /* Padding inside each tag */
    margin: 0 5px;        /* Space between tags */
    border-radius: 50px;  /* Rounded corners for each tag */
    background-color: #fff;
    -webkit-filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.5));
    -webkit-transition: all 0.2s linear;
   /* border: 2px solid black;  Border for each tag */
}

.footer-links ul li:hover {
    -webkit-filter: drop-shadow(0px 0px 20px rgb(255, 255, 255));
   /* border: 2px solid black;  Border for each tag */
}

.footer-links ul li a {
    color: #111;
   /* border: 2px solid black;  Border for each tag */
}

/* The Modal (background) */
.modal {
    display: flex; /* Using flexbox to center children */
    flex-direction: column;
    justify-content: center; /* Center horizontally */
    position: fixed;
    visibility: hidden; /* Initially hidden */
    opacity: 0;
    z-index: 10001; /* Sit on top */
    top: 0;
    left: 0;
    width: 100vw; /* Full width */
    height: 100vh; /* Full height */
    overflow: hidden; /* Prevent scroll */
    backdrop-filter: blur(10px); /* Apply a blur filter to the backdrop */
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
}

.modal.visible {
    visibility: visible; /* Make visible */
    opacity: 1; /* Fade in */
}

.modal-content {
    position: relative;
    display: flex; /* Activates flexbox layout */
    flex-direction: row;
    align-items: center; /* Centers items vertically */
    justify-content: center; /* Centers items horizontally */
    background-color: #C65368;
    margin: auto; /* Centered */
    width: 80%; /* Control width */
    max-width: 900px;
    overflow: auto;
    gap: 25px;
}

#about-image{
    width: 100%; /* Adjust width here */
    max-width: 500px;
    mix-blend-mode: multiply;
    -webkit-filter: grayscale();
}

.text-content {
    color: #000;
    flex-grow: 1;
    font-family: "Work Sans", sans-serif;
    font-weight: 500;
    font-size: 1.4rem;
    text-align: justify; /* Example style */
    margin-right: 25px;
}

.text-content a{
    color: #000;
    font-style: italic;
}

.close-button {
    position: absolute;
    color: #000;
    right: 25px;
    top: 15px;
    font-size: 28px;
    font-weight: bold;
    -webkit-filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
    transition: all 0.3s ease;
}

.close-button:hover,
.close-button:focus {
    text-decoration: none;
    cursor: pointer;
    -webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 1));
}


.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* @MEDIA */

@media only screen and (max-width: 768px) {
    main {
        top: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 100vw;
        gap: 40px;
    }
    .banner {
        height: 25px;
        padding-top: 1px;
    }

    #bannerText {
        font-size: 1.8rem;
    }

    .top-text {
        font-size: 2.5rem;
        margin-bottom: 40px;
    }
    #navbar {
        width: 60vw;
    }
    .navbar-menu {
        display: none;  /* Hide the navigation links on small screens */
    }

    .navbar-logo {
        flex-grow: 1;  /* Make the logo take full width of the navbar */
        text-align: center; /* Center the logo text */
    }
    .magazine-section {
        margin-bottom: 0;
    }
    .magazine-content {
        width: 90vw;
    }
    .podcast-section {
        margin-bottom: 25px;
    }
    .podcast-text {
        font-size: 1.2rem;
    }
    .podcast-container {
        padding-bottom: 35px;
        width: 80vw;
        border-radius: 20px 20px 0px 0px;;
    }
    #podcast-cover {
        border-radius: 20px 20px 0px 0px;;
        margin-bottom: 20px;
    }
    #podcast-title {
        font-size: 2rem;
        margin-bottom: 10px;
    }
    #podcast-description {
        font-size: 1.1rem;
        margin-bottom: 15px;
        margin-left: 15px;
        margin-right: 15px;
    }
    #podcast-tags {
        font-size: 1.1rem;
        margin-bottom: 15px;
    }
    #podcast-listenOn {
        font-size: 1.2rem;
    }
    .community-section {
        padding-top: 32px;
    }
    .community-content {
        width: 95vw; /* Full width */
    }
    .community-title {
        font-size: 3.5rem;
        margin-bottom: 25px;
    }
    #subscribe-text {
        margin-top: 25px;
        font-size: 1.2rem;
    }
    .site-footer {
        padding-top: 50px;
    }
    .modal-content {
        flex-direction: column; /* Stack vertically */
        gap: 15px;
        padding-bottom: 15px;
    }
    #about-image{
        max-width: 100%;
    }
    .text-content {
        font-size: 1.1rem;
        margin-left: 15px;
        margin-right: 15px;
    }
    .close-button {
        right: 15px;
        top: 5px;
    }
}