@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

/*CORE*/

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

    html {
      margin: 0;
      padding: 0;
    }

    body {
        margin: 0;
        padding: 0;
        width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;

        background-image: url('../images/bg2.jpg'); /* Replace with your image path */
        background-position: right center; /* Aligns the background image to the right */
        background-size: cover; /* Ensures the image covers the entire screen */
        background-repeat: no-repeat; /* Prevents the image from repeating */
        background-attachment: fixed; /* Makes the image fixed */
        height: 100vh; /* Ensures the body covers the full viewport height */
        overflow-x: hidden; /* Prevents horizontal scrolling */
    }

    h1, h2, h3, h4, p, form, label, input, a, ul, textarea {
      font-family: "Rubik", sans-serif;
      font-weight: normal;
    }

    h2 {
      color: white;
    }

    

    h1 {
      font-weight:500;
      margin-bottom: 16px;
      margin-top: 16px;
      color: white;
    }
    .articles-h3 {
        margin-bottom: 12px;
        color: #ddb09e;
        margin-top: 32px;
        font-weight: 500;
    }

    p {
      max-width: 720px;
      color: white;
      margin-bottom: 16px;
      line-height: 24px;
    }
    
    .article-lists {
        list-style-type: disc;
        margin-left: 32px;
        margin-top: 16px;
        margin-bottom: 16px;
    }

    a {
      text-decoration: none;
      color: white;
    }
    a:hover {
      font-weight: bold;
    }
    a:visited {
      color: white;
    }
    a:active {
      color: white;
    }

    a h2:hover {
      color: #ddb09e;
    }

    header {
      margin-top: 64px;
    }

    
    .movie-container {
        position: relative;
    width: 100%;
    height: 0;
    margin-bottom: 24px;
    padding-bottom: 56.25%;
    }
    iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/*SPLASH*/

#splash-page {
    max-width: initial;
}

.grassy-grid {
    display: grid;
    grid-template-columns: auto auto;
    gap: 16px;
    margin-top: 16px;
    justify-content: center;
}

.grassy-grid img {
    width: 100%;
    max-width: 200px;
}

img#splash-logo {
    position: fixed;
    bottom: 10px;
    width: 300px;
    left: 50%;
    transform: translate(-50%);
    z-index: 50;
}

img#grassy {
    position: fixed;
    width: 150%;
    bottom: 0;
    z-index: 100;
}


/* Styles for landscape mode for splash screen */
@media only screen and (max-width: 1023px) and (orientation: landscape) {
  
  img#splash-logo {
      display: none;
  }
  img#grassy {
    display: none;
}
  
}

@media only screen and (min-width: 992px) and (orientation: landscape) {
  
 .grassy-grid {
     width: 90%;
    grid-template-columns: auto auto auto auto auto auto;
    margin-left: auto;
    margin-right: auto;
    gap: 24px;
}

  
 
  
}



    /* logo and hamburger*/

    #logo, #hamburger {
      position: absolute;
      height: 32px;
      top: 16px;
    }
    #logo {
      left: 16px;
      z-index:100;
    }
    #hamburger {
      right: 16px;
    }

    ul {
      list-style-type: none;
      color: white;
      font-size: 18px;
      line-height: 24px;
    }


    /* top navigation */

    ul#main-navigation {
      height: 0;
      overflow: hidden;
      transition: height 0.3s ease;
      list-style-type: none;
      margin: 0;
      padding-bottom: 0;
      padding-left: 16px;
      padding-right: 16px;
      text-align: center;
      color: white;
    }
    ul#main-navigation li {
      padding-bottom: 16px;
    }
    ul#main-navigation a {
      color: white;
    }


    /*Social Media Panel - desktop only */

    .social-panel {
      position:absolute;
      top: 80px;
      right: 0;
      display: none;
      background: #2d3e4e;
      border-bottom-left-radius: 16px;
    }
    .social-panel ul {
      display: block;
      width: 32px;
      margin: 16px;
    }


    /* main content */

    main {
        position: relative;
        flex: 1;
        padding-left: 16px;
        padding-right: 16px;
        width: 100%;
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 32px;
    }

    main p {
      font-size: 18px;
      line-height: 26px;
    }

    p.narrative {
      max-width: 576px;
      margin-left: auto;
      margin-right: auto;
    }
    img.narrative-images{
      margin-left: auto;
      margin-right: auto;
      display:block;
      margin-bottom: 32px;
      width: 100%;
      max-width: 576px;
    }

    .lead {
      display: grid;
    }
    .lead > div {
      display: flex;
      align-items: center;
    }
    .lead h1 {
      width: 100%;
      max-width: 720px;
      margin-left: auto;
      margin-right: auto;
    }

    .comic {
      height: 140px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 16px;
      margin-bottom: 32px;
    }

    .main-head {
      position: absolute;
      left: -9999px;
    }


    /*News layout */

    div.lamb-grid-news {
      position: relative;
      display: grid;
    }

    div.lamb-grid-news > div {
      margin-bottom: 32px;
    }

    div.lamb-grid-news h2 {
      margin-top: 8px;
      font-weight: 500;
    }

    .lamb-grid-news img {
      position: relative;
      display: block;
      width: 100%;
    }

    div.subsection {
      display: grid;
    }
    div.subsection h2 {
      font-size: 20px;
      margin-bottom: 32px;
    }


    /*Articles layout */

    .article-grid {
      position: relative;
    }

    .article-grid h2 {
      margin-bottom: 16px;
      font-size: 20px;
      font-weight: bold;
    }

    div.sub {
      width: 100%;
      max-width: 720px;
      margin-bottom: 16px;
      color: white;
      font-size: 12px;
    }
    div.sub h2 {
      font-weight: bold;
      margin-bottom: 8px;
    }

    img.article-image {
      width: 100%;
      max-width: 576px;
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 16px;
    }
    .image-drop {
        margin-top: 32px;
    }
    div.content-side h2 {
      width: 100%;
      max-width: 576px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 32px;
    }
    div.article-side h2 {
      font-size: 20px;
      margin-bottom: 32px;
    }
    div.article-photo-container {
      position: relative;
      width: 100%;
      max-width: 576px;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    .article-photo-container p {
      position: absolute;
      bottom: 0;
      left: 0;
      font-size: 12px;
      margin-bottom: 0;
      padding: 8px;
      background: url('../images/headline-bg.png');
    }


    /*films page */

    .film-grid-container {
      width: 100%;
      max-width: 720px;
      margin-left: auto;
      margin-right: auto;
    }

    .film-object {
      display: grid;
      grid-template-columns: 100px auto;
      gap: 8px;
      margin-bottom: 32px;
    }

    .film-object h2 {
      font-weight: bold;
    }

    .film-object img {
      display: block;
      width: 100px;
      height: 150px;
      object-fit: cover;
    }
    p.synopsis {
      display: none;
    }
    .film-col-right {
      color: white;
      text-align: center;
    }
    .film-col-right li {
      display: inline-block;
      line-height: 32px;
    }

    .divide {
      display: block;
      height: 2px;
      width: 50%;
      max-width: 360px;
      background: #ddb09e;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 32px;
    }
.divide-small {
      display: block;
      height: 2px;
      width: 50%;
      max-width: 240px;
      background: #ddb09e;
      margin-left: auto;
      margin-right: auto;
      margin-top: 32px;
      margin-bottom: 32px;
    }

    /*development*/

    .development-grid-container {
      width: 100%;
      max-width: 960px;
      margin-left: auto;
      margin-right: auto;
    }


    p.synopsis {
      display: none;
    }
    .development-col-right {
      color: white;
      text-align: center;
    }
    .development-col-right li {
      display: inline-block;
      line-height: 32px;
    }

    .divide {
      display: block;
      height: 2px;
      width: 50%;
      max-width: 360px;
      background: #ddb09e;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 32px;
    }

    .community-left-col img {
      display: block;
      width: 100%;
      max-width: 720px;
    }

    .community-right-col img {
      display: block;
      width: 100%;
      max-width: 360px;
      margin-left: auto;
      margin-right: auto;
    }
    
    
    
    /*FILMS*/
    .film-poster-grid {
   
    margin-bottom: 32px;
    }
    .film-poster-grid img {
         width: 100%;
         
    }
    
    .film-details h2 {
        margin-bottom: 16px;
        font-weight: bold;
    }
    .credits {
        display: grid;
        grid-template-columns: 1fr 2fr;
        position: relative;
        max-width: 720px;
        font-family: "Rubik", sans-serif;
      font-weight: normal;
      color: white;
      font-size: 18px;
    }
    .credits div:nth-child(odd) {
        font-weight: bold;
    }
    .h3-credits {
        margin-top: 24px;
        margin-bottom: 16px;
        color: white;
        font-weight: bold;
    }
    
    
    
    /*COMMUNITY*/
    .community-head-drop {
        padding-top: 32px;
    }
    
    .community-h2-drop {
        margin-top: 32px;
        margin-bottom: 16px;
    }
.community-links {
    max-width: 576px;
    margin-left: auto;
    margin-right: auto;
}

    /* footer */

    footer {
        color: #fff;
        background: #2d3e4e;
    }
    .footer-wrapper {
      width: 100%;
      max-width: 400px;
      margin-left: auto;
      margin-right: auto;
      padding: 16px;
      line-height: 26px;
    }
    form {
      width: 100%;
      max-width: 400px;
      margin-bottom: 32px;
    }
    input[type=text], input[type=email], textarea {
      width: 100%;
      border-style: none;
      margin-top: 4px;
      margin-bottom: 8px;
      padding: 8px;
      font-size: 16px;
      color: #2d3e4e;
      border-radius: 4px;
    }
    input[type=text], input[type=email] {
      height: 36px;
    }
    textarea {
      height: 96px;
      resize: none;
    }
    input[type=submit] {
      width:100px;
      height: 36px;
      border-style: none;
      font-size: 16px;
      margin-top: 8px;
      background: white;
      color: #00885f;
      font-weight: bold;
      border-radius: 4px;
    }
    input[type=submit]:hover {
      background: #00885f;
      color: white;
    }
    #social-footer {
      width: 100%;
      margin-top: 32px;
      margin-bottom: 16px;
    }
    #social-footer li {
      display: inline-block;
      width: 18.8%;
      text-align: center;
      font-size: 0;
      line-height: 0;
    }
    #social-footer img {
      position: relative;
      width: 54px;
    }
    #footer-links {
      text-align: center;
    }
    #footer-links li {
      display: inline-block;
    }
    #footer-links a {
      color: white;
      font-size: 14px;
    }
    #footer-links a:visited {
      color: white;
    }
    #footer-links a:active {
      color: white;
    }
    .footer-guff {
      font-size: 14px;
      display: block;
      text-align: center;
      margin-bottom: 32px;
    }
    .foot-guff {
      margin-left: auto;
      margin-right: auto;
    }
    .copyright {
      margin-top: 16px;
    }


    /* Media queries for different screen sizes */

@media only screen and (min-width: 576px) {
    
    
    
  /* Small screens (SM) and above */
  
  img#splash-logo {
    width: 440px;
    bottom: 30px;
}




  /* Main content */

  .lead h1 {
    max-width: 576px;
  }

  .comic {
    z-index: 100;
  }


  /* News layout */

div.lamb-grid-news {
  width: 100%;
grid-template-columns: 50% 50%;
gap: 16px;
padding-right: 16px;
}

div.lamb-grid-news > div {
  margin-bottom: 0;
}

div.subsection {
  grid-template-columns: 50% 50%;
  gap: 16px;
  margin-top: 32px;
  padding-right: 16px;
}
div.subsection > div {
  border-top-style: solid;
  border-width: 2px;
  border-color: #ddb09e;
}
div.subsection h2 {
  font-size: 16px;
  font-weight: 500;
  padding-top: 8px;
  margin-bottom: initial;
}


/*Articles layout */

.articles {
  max-width: 576px;
  margin-left: auto;
  margin-right: auto;
}
.article-bar {
  border-top-style: solid;
  border-width: 2px;
  border-color: #ddb09e;
  padding-top: 32px;
}

div.sub {
  width: 100%;
  max-width: 576px;
  margin-left:  auto;
  margin-right: auto;
}


div.article-side {
  max-width: 576px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 16px;
  margin-top: 32px;
  padding-right: 16px;
}
div.article-side > div {
  border-top-style: solid;
  border-width: 2px;
  border-color: #ddb09e;
}
div.article-side h2 {
  font-size: 16px;
  font-weight: 500;
  padding-top: 8px;
  margin-bottom: initial;
}

.movie-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 576px;
  margin-top: 32px;
}


.film-object {
  display: grid;
  grid-template-columns: 150px auto;
  gap: 0;
  margin-bottom: 32px;
  background: url('../images/header-bg.png');
}

.film-object img {
  display: block;
  width: 150px;
  height: 225px;
}

.film-info {
  padding: 16px;
}
p.synopsis {
  display: initial;
  font-size: 14px;
  line-height: 16px;
}




 /*FILMS*/
 
 
    .film-poster-grid {
        display: grid;
        grid-template-columns: 25% 75%;
        gap: 16px;
    }
    
    .film-poster-grid img {
         width: 100%;
         margin-bottom: 16px;
    }
    .film-poster-grid > div:nth-child(2) {
        padding: 16px;
    }
    .film-poster-grid p {
        max-width: 576px;
    }
    
    .film-details h2 {
        margin-bottom: 16px;
    }





.divide-small {
      display: none;
    }

}

@media only screen and (min-width: 768px) {
  /* Medium screens (MD) and above */

img#splash-logo {
    width: 550px;
    bottom: 40px;
}

.grassy-grid {
    grid-template-columns: auto auto auto;
}



}

@media only screen and (min-width: 992px) {
  /* Large screens (LG) and above */

.grassy-grid {
     width: 90%;
    grid-template-columns: auto auto auto auto auto auto;
    margin-left: auto;
    margin-right: auto;
    gap: 24px;
    margin-top: 5vw;
}

img#splash-logo {
    width: 600px;
    bottom: 50px;
}

  /* Header and navigation*/

  div.header-wrapper {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    height: 80px;
    display: block;
    position: relative;
  }

  header {
    margin-top: 0;
    height: 80px;
    position: relative;
    background: url('../images/header-bg.png');
  }

  nav {
    position: relative;
  }

  /* logo and hamburger */
  #logo {
    height: 48px;
    left: 0;
  }
  #hamburger {
    display: none;
  }

  /* top navigation */
  ul#main-navigation {
    height: 80px;
    overflow: initial;
    margin-left: 108px;
  }
  ul#main-navigation li {
    padding-bottom: 0px;
    display: inline-block;
    line-height: 80px;
    width: 19.5%;
  }
  ul#main-navigation a:hover {
    font-weight: bold;
  }


.movie-container {
  max-width: initial;
}

  /* Main content */

  main {
    padding-left: 0;
    padding-right: 0;
    position: relative;
  }

  .lead h1 {
    max-width: 960px;
    width: 960px;
    margin-left: initial;
    margin-right: initial;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 32px;
    padding-bottom: 32px;
    padding-left: 32px;
    background: url('../images/headline-bg.png');
  }
  .comic {
    margin-top: 32px;
  }


  /* News layout */

  .item1 {grid-area: main; position: relative;}
  .item2 {grid-area: minor1; position: relative;}
  .item3 {grid-area: minor2; position: relative;}
  .item4 {grid-area: minor3; position: relative;}

  div.lamb-grid-news {
    position: relative;
    grid-template-columns: initial;
    display: grid;
    grid-template-areas:
    'main main main minor1'
    'main main main minor2'
    'main main main minor3';
    gap: 8px;
    padding-right: 0;
  }

  .lamb-grid-news img {
    position: relative;
    display: block;
  }

  img.big-head {
    width: 718px;
    height: 484px;
    object-fit: cover;
  }

  img.small-head {
    width: 234px;
    height: 156px;
    object-fit: cover;
  }

  div.wide-news {
    position: absolute;
    bottom: 0;
    width: 718px;
    background: url('../images/headline-bg.png');
    padding: 14px;
    padding-bottom: 20px;
  }
  div.wide-news h2 {
    color: #white;
  }
  div.pull {
    width: 234px;
    font-size: 12px;
    padding: 8px;
    padding-bottom: 12px;
  }

  div.subsection {
    grid-template-columns: 216px 216px 216px 216px ;
    gap: 32px;
  }
  div.subsection > div {
  }
  div.subsection h2 {
    padding-top: 16px;
  }


  /*Articles layout */

  div.sub {
    width: 100%;
    max-width: 720px;
    margin-left:  auto;
    margin-right: auto;
    margin-bottom: 32px;
  }

  .article-grid {
      display: grid;
      grid-template-columns: 720px 240px;
      gap: 0;
    }

    img.article-image {
      width: 100%;
      max-width: 720px;
      display: block;
      margin-left: initial;
      margin-right: initial;
      margin-bottom: 32px;
    }
    .articles {
      max-width: 576px;
      margin-left: initial;
      margin-right: initial;
    }

    div.article-side {
      max-width: 576px;
      margin-left: auto;
      margin-right: auto;
      display: block;
      padding-top: 0px;
      margin-top: 0;
      padding-right: 0;
      margin-left: 0;
      background: url('../images/headline-bg.png');
    }
    div.article-side > div {
      border-top-style: solid;
      border-width: 2px;
      border-color: #ddb09e;
      margin-bottom: 24px;
      margin-left: 16px;
      margin-right: 16px;
    }
    div.article-side h2 {
      font-size: 16px;
      font-weight: 500;
      padding-top: 8px;
      margin-bottom: initial;
    }
    div.article-photo-container {
      max-width: 720px;
      width: 100%;
    }
    div.content-side h2 {
      max-width: 720px;
    }


    .film-grid-container {
      max-width: 960px;
    }

    .film-grid  {
      display: grid;
      grid-template-columns: 720px auto;
    }
    .film-col-right {
      padding: 16px;
      background: url('../images/headline-bg.png');
      text-align: left;
    }


    .development-grid-container {
      max-width: 720px;
    }



    .community-grid {
      display: grid;
      grid-template-columns: 720px auto;

    }
    .community-left-col {

    }
    .community-right-col {
      background: url('../images/headline-bg.png');
      padding: 16px;
    }


    /* FOOTER */

  .footer-wrapper {
    max-width: 960px;
    padding: 0;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 50% 50%;
  }
  .addresses {
    padding-top: 24px;
  }
  #social-footer li {
    width: initial;
  }
  #footer-links {
    text-align: left;
  }
  #footer-links a {
    color: white;
  }
  #footer-links a:hover {
    font-weight: bold;
  }

}

@media only screen and (min-width: 1100px) {
  /* Extra-large screens (XL) and above */


img#splash-logo {
    width: 800px;
    bottom: 5vw;
}

  /* Social panel */

  .social-panel {
    display: initial;
  }

}