body {
    background-color:rgb(49, 49, 49);
    margin: 0 auto;
    max-width: 4000px;
    position: relative;
  }
  
  
  p {
    font-family: Montserrat;
    font-size: 25px;
    max-width: 34em;
    justify-self: center  ;
    color: white
  }

  #para {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    padding-bottom: 5rem;
    align-items: top;
}
  

h1 {
    text-align: center;
    color: rgb(255, 255, 255);
    font-size: 70px;
    font-family: Bebas Neue;
  }
  
  h2 {
    text-align: center;
    font-size: 40px;
    font-family: Montserrat;
    color: rgb(255, 255, 255);
    margin-top: 5rem;
  }
  figcaption {
    font-family: Montserrat;
    padding-top:2rem;
  }
  
  header {
    background-color: rgb(0, 0, 0);
    padding-left: 2rem;
    padding-right: 2rem;
  }
  
  a {
    justify-self: center;
    width: 70%;
  
  }

  #part0,#part2, #part3, #part4, #part5, #part6 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    aspect-ratio: 16/4;
    align-items: center;
    background-color: rgb(0, 0, 0);
    margin-top: 3rem;
}

.credit {
    text-align: center;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 20px;
  }
  

#crew {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    padding-bottom: 5rem;
    padding-left:9rem ;
    padding-right: 9rem;
    align-items: top;
}

figure img {
    width: 100%;
      object-fit: cover;
      border-radius:0.6em;
  }
  
  .rules img {
      object-fit: cover;
      justify-self: center;
  }

  #concept2rules {
    display: grid;
    justify-content: center;
}
  

  
  .reveal {
    position: relative;
    transform: translateY(100px);
    opacity: 0;
    transition: 2s all ease;
  }
  
  .reveal.active {
    transform: translateY(0);
    opacity: 1;
  }
  .reveal2 {
    position: relative;
    transform: translateX(-700px);
    opacity: 0;
    transition: 1s all ease;
  }
  
  .reveal2.active2 {
    transform: translateX(0);
    opacity: 1;
  }




  @media screen and (min-width: 1401px) {
  
    #part0, #part2, #part3, #part4, #part5, #part6 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    aspect-ratio: 16/2.5;
    align-items: center;
    background-color: rgb(0, 0, 0);
}
.para1 {
  margin-left: 15rem;
  margin-right: 5rem;
}

.para2 {
  margin-right: 15rem;
  margin-left: 5rem;
}


#tbird {
  padding-top: 6rem;
}


#capypara {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    padding-bottom: 5rem;
    align-items: center;
}


  
  
  }
@media screen and (max-width: 1400px) {
  #demo, #finalcards {
    grid-template-columns: 1fr 1fr 1fr;
    padding-left: 0rem ;
    padding-right: 0rem;
    
}
#crew{
    grid-template-columns: 1fr 1fr;
    padding-left: 0rem ;
    padding-right: 0rem;
    
}
#para, #capypara{
    grid-template-columns: 1fr;
    padding-left: 0rem ;
    padding-right: 0rem;
    
}

p {
  padding: 1.5rem;
}
.rules img {
  width: 100%;
}
.rulefinal img {
  width: 100%;
}
}

@media screen and (max-width: 600px) {
  h1 {
  font-size: 40px;
}
h2 {
  font-size: 35px;
}

  #demo, #finalcards, #crew, #para {
    grid-template-columns: 1fr;
    padding-left: 3rem ;
    padding-right: 3rem;
}
p {
  font-size: 17px;
}
a {
  max-width: 100%;
}

}