* {
    box-sizing: border-box;
}
@import url('//fonts.googleapis.com/earlyaccess/jejuhallasan.css');
/* base css */
body{
    background-color:#2A2A2A;
    margin:0;
}
/* Text */
h2 {
    color:#DDD793;
font-family: "Chelsea Market", system-ui;
  font-weight: 400;
  font-style: normal;
  margin: 1em;
}
    
p {
    color:#DDD793;
    text-align: center;
  font-family: "Aleo", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}


li{
    color: #DDD793;
     font-family: "Aleo", serif;
  font-optical-sizing: auto;
  font-weight: 600;

}
/* Images*/
.cast-photo{
    max-width: 125px;
    max-height: 125px;
}
.creator{
    max-width: 300px ;
}


/* --- header --*/
header {
    width:100%;
    height:fit-content;
   

    display: flex;
    flex-flow: column nowrap;
    padding: 4em;
    gap: 2em;
}

header::after {
    content: '';
    position: absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:-1;
    opacity: .5;

    background-image: url(../Link/top-roz-image.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 25% top;



}

.logo {
    width: 50%;
    aspect-ratio: 990 / 632;
    margin-bottom: 4em;
}

header video.trailer {
    width:100%;
    aspect-ratio: 1920 / 1080;
}

main {
    padding-top: 2em;
}

.hero {
    width:100%;
    height: fit-content;

    img {
        width:100%;
    }
}
/*Cast Section*/
.grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    flex-direction: column;
}
.cast-card{
    text-align: center;
    padding: 1em;
}

/* Nominations */
.nominations{
    background-color:#A03606;
    display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
}
.nominations-info {
 padding: 1em;
 flex: 4 4 0;
}

.nominations img {
    flex: 1 1 0;
}
/* Histroy */
.history {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;   
}

.history-card {
    width: 100%;
    display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
   align-items: center;
   gap: 3rem;
   padding: 3rem;
}

.creator {
    flex:1 1 0;
    position: relative;
    
}

.creator img {
    width:100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: bottom center;
}

.history-card p {

 flex: 2 2 0;
}

.history-card:nth-child(1) .creator {
    order:2;  
}

.history-card:nth-child(1) .creator::after {
   content: '';
   width:110%;
   height:110%;
   position: absolute;
   background-image: url(../Link/pbrown-border.svg);
   background-repeat: no-repeat;
   background-size: cover;
   top:-5%;
   left:-5%;
   z-index: -1;
}
.history-card:nth-child(2) .creator::after {
   content: '';
   width:110%;
   height:110%;
   position: absolute;
   background-image: url(../Link/cSanders-border.svg);
   background-repeat: no-repeat;
   background-size: cover;
   top:-5%;
   left:-5%;
   z-index: -1;
}

/*Button & Hyperlink */
a {
    color: #DDD793;
    display: block;
    text-align: center;
    font-family: "Aleo", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    background-color: #A03606;
    padding: 1em;
}
a:hover{
    color: #A03606;

}
button{
    background-color: #A03606;
    border-style: none;
    color: #DDD793;
    font-size: 30px;
     font-family: "Chelsea Market", system-ui;
  font-weight: 400;
  font-style: normal;
}
.Copyrightcss{
        display: block;
    text-align: center;
}



/* Reviews */

.reviews {
    width:100%;
    height: fit-content;
    overflow: hidden;
    position: relative;

    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    gap: 20em;

}

.review {
    width:40%;
    position:relative;
    z-index: 1;
    transition: opacity 0.8s ease, transform 0.8s ease; /* Add this */
    opacity:0;
    transform: translateY(-400px) rotate(360deg);

    /* background-color: #9f3922; */


}

.reviewReveal {
    opacity:1;
    transform: translateY(0) rotate(0);
    height: auto;
}


.review::after {
    content: '';
    background-image: url(../Link/leaf.svg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 150%;
    aspect-ratio: 308 / 336;
    position: absolute;
    top: 10%;
    left:50%;
    z-index: -1;
}

.review-one::after {
       transform: translate(-50%, -50%) rotate(120deg);
}
    
.review-two::after {
       transform: translate(-50%, -50%) rotate(20deg) scaleX(-1) ;
}

.review-three::after {
       transform: translate(-50%, -50%) rotate(100deg)  ;
}



/* @keyframes fallLeaf {
    0% {
        opacity:0;
        transform: translateY(-400px) rotate(360deg);
    }
    100% {
        opacity:1;
        transform: translateY(0) rotate(0);
    }
} */

.leafTrigger {
    padding: .5em 1em;
    position:relative;
    z-index:2;
}

@media screen {
    
}