:root {
    --asiapink: #FF00FF;
    --asiagreen: #00ff00;
    --awoogagray: #b7b5b5;
}
html {
    font-size: 20px;
    box-sizing: border-box;
}
body {
    background: black;
    color: var(--asiagreen);
    font-size: 20px;
}


main, footer {
    max-width: 46rem;
    margin: auto;
    display: flex;
}

main {
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

footer {
    margin-top: 1rem;
    margin-bottom: 3rem;
}

footer a {
    color: yellow;
}

.bordered-title {
    color: var(--asiapink);
    border: 1rem ridge var(--awoogagray);
    padding: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

main section p {
    max-width: 38rem;
}

figure img {
    max-width: 100%;
}

header {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
}

header .tagline {
    color: var(--asiagreen);
    font-size: 1.5rem;
}

header .logo {
    max-width: 80%;
    margin-bottom: 0;
}

.divider {
    width: 80%;
}

section#next-show {
    /* border: 0.5rem groove chartreuse; */
    padding: 1rem;
    /* color: chartreuse; */
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

section#subscribe {
    padding: 1rem;
    color: var(--asiagreen);
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

section.site-links {
    margin-bottom: 2rem;
}


h2 {
    color: var(--asiagreen);
    text-align: center;
    font-size: 2.5rem;
    margin: 0;
    padding: 0;
}

p.time-and-place {
    text-align: center;
    color: pink;
}
ul.cast {
    margin: 0;
    list-style-type: "🔥 ";
}

ul.guests {
    margin: 0;
    list-style-type: "⚡️ ";
}

.buy-btn {
    display: table;
    background: orange;
    padding: 1rem;
    margin: 1rem;
    font-size: 1rem;
    border: 2mm outset var(--asiagreen);
    font-family: var(--heading);
    font-weight: 600;
    color: black;
}


.flex-list {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Space between items */
    margin-top: 1rem;
}
.flex-item {
    display: flex;
    align-items: center; /* Vertically center items */
}
.label {
    width: 10rem; /* Fixed width for the left text */
    text-align: right; /* Align text to the right */
    padding-right: 1rem; /* Space between text and :: */
}
.separator {
    padding: 0 8px; /* Space around :: */
}

.label a {
    color: orange;
}

#shows, #press {
    color: var(--asiagreen);
}


#shows h1,
#press h1 {
    color: var(--asiapink);
    border: 1rem ridge var(--awoogagray);
    padding: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

#shows h2 {
    font-size: 1.5rem;
    color: var(--asiapink);
    padding-bottom: 0.5rem;
}

#shows section.year {
    margin-top: 2rem;
}

ul.shows {
    padding-left: 0;
    list-style-type: none;
    display: flex;
    flex-flow: column;
    gap: 0.5rem;
}

.show-card {
    display: flex;
    align-items: flex-start;
    border: 0.25rem ridge var(--awoogagray);
    padding: 0;
}
@media(max-width: 667px) {
    .show-card {
        flex-flow: column;
        max-width: 74mm;
    }
}

.show-poster {
    margin: 0;
    flex: 0 0 auto;
    width: 74mm;
    height: 105mm;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    border-right: 0.25rem ridge silver;
}

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

.show-card b {
    color: var(--asiapink);
    font-size: 2rem;

}

.show-card .details {
    flex: 1;
    padding-top: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    height: 100%;
}

#press {
    color: var(--asiagreen);
}

#press blockquote {
    color: mintcream;
    font-style: italic;
    font-size: 1.2rem;
    padding-bottom: 1rem;
    border-bottom: 0.5rem ridge var(--asiapink);
}

#press cite , #press cite a {
    font-size: 1.5rem;
    color: yellow;

}

div.special-note {
    background: tomato;
    color: black;
    padding: 1rem;
    font-style: italic;
}

.special-note h2 {
    font-size: 1.3rem;
    color: black;
}

.description {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .label {
        width: auto; /* Allow the label to take full width */
        text-align: left; /* Align text to the left */
        padding-right: 0; /* Remove extra padding */
    }
    .separator {
        display: none; /* Hide :: on small screens */
    }
    .flex-item {
        flex-direction: column; /* Stack items vertically */
        align-items: flex-start; /* Align items to the left */
    }
}