/* GLOBALS */
    *{
        margin: 0;
        padding: 0;
        /*cursor: none;*/
    }
    html {
        font-size:62.5%;
        -webkit-font-smoothing: antialiased;
    }
    h1,h2,h3,h4,h5,h6{
        margin: 0;
        font-family: "Poiret One";
    }
    h1{
        font-size: 15rem;
    }
    h2{
        font-size: 10rem;
    }
    h3{
        font-size: 8rem;
    }
    h4{
        font-size: 6rem;
    }
    h5{
        font-size: 4rem;
    }
    h6{
        font-size: 2.5rem;
    }
    p{
        margin: 0;
        font-size: 2.2rem;
    }
    a{
        text-decoration: none;
    }
    a:hover{
        color: white;
    }
    video {
        clip-path: inset(0.1px 0.1px);
    }
    ::selection {
        color: #f5f3ed;
        background: #270604;
    }

/* BODY */

    body{
        position: relative;
        font-family: "Quicksand";
        background-color: #f5f3ed;
    }

/* HEADER */
    header{
        position: relative;
        max-height: 850px;
        min-height: 450px;
        height: 50vw;
        width: 100%;
        overflow: hidden;
        background-image: url("images/header.jpg");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }
        header h1{
            color:#ffffff;
            position: relative;
            width: 90%;
            text-align: right;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
            top: 45%;
            translate: 0 -50%;
        }
        header div#blur{
            position: absolute;
            width: 100%;
            height: 100%;
            backdrop-filter: blur(0px);
        }

/* MAIN */

    main{
        color: #270604;
        width: 1150px;
        margin: 60px auto;
    }
    main > *,
    main > div > *,
    main > section > *{
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, color 0.3s ease-in-out;
    }
     main > div{
         display: flex;
         justify-content: space-between;
     }
     main > h5{
         text-align: center;
         margin: 200px 0 30px 0;
     }
     main > p{
        text-align: center;
        margin: 0 auto 200px auto;
        width: 80%;
     }
    main div > a{
        color: #27060433;
        cursor: pointer;
    }
      main div a:hover{
          color: #27060488;
      }
      main div a.active{
          color: #270604;
      }

    main section#decor_section{
        display: none;
    }
    main section .grid_item {
        width: 100%;
        display: grid;
        grid-template-columns: 40% 55%; /* Define the width of each column */
        column-gap: 5%;
        padding: 80px 0;
        border-top: 2px solid #270604;
    }
    main section .grid_item:nth-child(even){
        grid-template-columns: 55% 40%; /* Define the width of each column */
    }
    main section .grid_item img{
        border-radius: 2px;
        width: 100%;
        aspect-ratio: 16/10;
    }
    main section .grid_item div{   
        width: 100%;
    }
    main section .grid_item div p{
        position: absolute;
        bottom: 0;
    }

@media only screen and (max-width : 1295px) {
    main{
        width: 90%;
    }
}
@media only screen and (max-width : 1024px) {
    main section .grid_item,
    main section .grid_item:nth-child(even){
        grid-template-columns: auto;
        padding: 5% 0;
    }
    main section .grid_item img{
        width: 100%;
        grid-row: 1;
    }
    main section .grid_item div{   
        width: 100%;
    }
    main section .grid_item div h5,
    main section .grid_item div p{
        position: relative;
        margin: 5% 0;
    }
    header h1{
        font-size: 15vw;
        text-align: center;
        width: 100%;
        color: #ffffff;
    }
}

@media only screen and (max-width : 720px) {
    main div > a > h2{
        font-size: 14vw;
    }
}