@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Luxurious+Script&family=Pinyon+Script&display=swap');

  @font-face {
    font-family: 'Literaturnaya Book Book';
    font-style: normal;
    font-weight: normal;
    src: local('Literaturnaya Book Book'), url('fonts/literaturnaya-webfont/literaturnaya-book.woff') format('woff');
    }

@font-face {
  font-family: "Perandory";
  src:
    url("/fonts/perandory/perandory-condensed-webfont.woff2") format("woff2"),
    url("/fonts/perandory/perandory-condensed-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

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

html {
    font-size: 20px;
}

/* Full viewport background */
body {
  min-height: 100vh;
  height: auto;
  background-color: #f0e5da;
  font-family: 'Literaturnaya Book Book', Arial, sans-serif;
}

img {
    position: fixed;
inset: 0; /* top:0; right:0; bottom:0; left:0 */
width: 100%;
height: 100%;
object-fit: cover; /* behaves like background-size: cover */
object-position: center;
z-index: -1;
}

.podcast-guide img {
    position: static;
}

h1 {
    font-family: 'Luxurious Script', cursive;
    line-height: 0.7;
    text-align: center;
    font-size: 10rem;
    font-weight: 100;
}

h1 span {
    font-family: 'Perandory', Times, serif;
    text-transform: uppercase;
    line-height: 0.8;
    color: #ff5757;
}
.podcast-guide h1 {
    font-family: 'Perandory', Times, serif;
    font-size: 6rem;
    text-transform: uppercase;
    font-weight: 400;
    line-height: 0.9;
}

.podcast-guide h1 span {
    font-size: 10rem;
}

.podcast-guide h2 {
    font-size: 4rem;
    text-transform: uppercase;
    text-align: center;
}

.podcast-guide h3 {
    text-align: center;
    margin-top: 5vh;
    font-size: 1.5rem;
    margin-bottom: 50px;
}

p {
    margin: 20px 15%;
    text-align: center;
}

.wrapper {
    width: 100%;
    max-width: 100vw;
}

.wrapper > div:first-child {
  display: flex;
  flex-direction: column; /* Keeps content stacked vertically */
  justify-content: center; /* Centers content vertically */
  align-items: center;
  width: 50%;
  height: 100vh;
}

#newsletterForm {
    text-align: center;
}

#newsletterForm input[type="email"] {
    margin: 0 auto 10px;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background-color: #fff;
    color: #111;
    cursor: pointer;
    border: #111 1px solid;
    width: calc(100% - 40px);
}

#newsletterForm button {
    display: inline-block;
    margin: 0 auto;
    padding: 10px 40px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    background-color: #111;
    color: #fff;
    cursor: pointer;
    border: #333 1px solid;
    height: auto;
}

#signup-status {
    text-align: center;
    margin-top: 10px;
}

#signup-status.success {
    color: #084410;
}

#signup-status.error {
    color: #b00020;
}

.parallax {
    width: 50%;
    height: 100vh;
    position: absolute;
    top: 0;
    right: 0;
}

.parallax img {
    display: block;
    height: 100%;
    width: auto;
    margin-left: auto;
}


.podcast-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.episode-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 10%;
}

.episode-card {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 0.6s ease forwards;
}

.episode-card img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
    border-radius: 10px;
}

.episode-card img:hover {
    transform: scale(1.02);
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustment for smaller screens */
@media (max-width: 600px) {
    .episode-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 1630px) {
    .parallax img.layer4, .parallax img.layer3, .parallax img.layer2 {
        height: 70%;
        top: 30%;
        right: 10%;
    }
    
}

@media screen and (max-width: 1050px) {
    body {
        background-image: url('background.jpg');
        background-size: cover;
        background-position: center center;
    }
    body.podcast-guide {
        background-image: none;
    }
    p {
        margin: 20px 0;
        width: 400px;
    }
    .parallax {
        display: none;
    }
    .wrapper > div:first-child {
      width: 100%;
    }
    #signup-status {
        padding: 10px 15%;
    }
    #signup-status.success, #signup-status.error {
        background: #fff;
    }

}

@media screen and (max-width: 800px) {
    html {
        font-size: 16px;
    }
}

@media screen and (max-width: 600px) {
    html {
        font-size: 10px;
    }

    p {
        font-size: 1.5rem;
        width: 300px;
    }
    #newsletterForm {
      width: 350px;
    }
}