/* @config "./tailwind.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities; */


/* @theme {
    --font-linden: "Linden Hill", "serif";
    --font-babylonica: "Babylonica", "cursive";

    --color-offwhite: #f7f0de;
    --color-offblack: #0e1111;

    --text-p-xxsmall-laptop: 20px;
    --text-p-xsmall-laptop: 25px;
    --text-p-small-laptop: 30px;
    --text-p-big-laptop: 40px;

    --text-p-small-mobile: 25px;
    --text-p-big-mobile: 40px;
} */

html, body {
    max-width: 100%;
    overflow-x: hidden;
}
  
section {
    width: 100vw;
    
}

@font-face {
    font-family: "Linden Hill";
    src: url('./linden-hill-master/Linden-Hill.otf');
  }


/* BASE STYLING */
@layer base {
    h1 {
        @apply font-babylonica text-p-big-laptop text-offwhite;
    }
    p, h3 {
        @apply font-linden text-p-small-laptop/[54px] text-offwhite;
    }
    a {
        @apply font-linden text-p-small-laptop/[54px];
    }

    li {
        @apply font-linden text-p-xxsmall-laptop
    }

    section {
        @apply relative
    }

    /* Mobile screens */
    @media (max-width: 767px) {
        p,li, a {
            @apply text-p-small-mobile/10
        }

        h1 {
            @apply text-p-big-mobile
        }
    }
}




/* General styling */


a:hover {
    cursor: pointer;


}


.hover {
    @apply hover:scale-[1.08] transition ease-in-out duration-300;
}
/*  NAV BAR */

#hamburger-icon {
    margin: auto 0;
    display: none;
    cursor: pointer;
}

#hamburger-icon div {

    @apply w-[35px] h-[3px] bg-offblack;
    margin: 6px 0;
    transition: 0.4s;
    
}

.open .bar1 {
    -webkit-transform: rotate(-45deg) translate(-6px,6px);
    transform: rotate(-45deg) translate(-6px,6px);
}

.open .bar2 {
    opacity: 0;
}

.open .bar3 {
    -webkit-transform: rotate(45deg) translate(-6px,-7px);
    transform: rotate(45deg) translate(-6px,-7px);
}


.mobile-menu {
    @apply hidden absolute top-[50px] left-0 bg-offwhite h-[calc(100vh-50px)] w-full;
  
}

.open .mobile-menu {
    @apply flex flex-col items-center justify-start;
}

.open ul {
    @apply py-12;
}



@media only screen and (max-width: 767px) {
    nav {
        display: none;
    }

    #hamburger-icon {
        display: block;
    } 
    
}


/* Logo */

.logo {
    height: 40px;
}

@media (max-width: 767px) {
   .logo {
    height: 35px;
   }
}


/* HERO */
#home {
    background-image: url('../images/dirt_background_tiling.png');
}

header {
    transform-style: preserve-3d;
}

.parallax {
    position: absolute;
    object-fit: cover;
}

#flowers-layer {
    filter: drop-shadow(0px 0px 2px #2e2d2d );
}

.lav {
    filter: drop-shadow(0px 0px 5px #2e2d2d );

}

/*  GAME FEATURES */




.game-feature {
    @apply flex items-center p-[10px] h-full
}


.game-feature-image {
    @apply aspect-video h-[20vh] md:h-[18vh] lg:h-[30vh] rounded-xl  border-offblack border-2 hover:scale-[1.02] transition ease-in-out duration-300;
}

.game-feature-text {
    @apply font-thin text-p-xsmall-laptop/[36px] text-offblack;
}

.centered-item{
    @apply flex justify-center md:justify-end items-center;
}



@media (max-width: 767px) {
    .scrolls {
     display: none;
    }

    .game-feature-text {
        @apply text-offwhite px-12 text-p-small-mobile;
    }
 }

@media (max-width: 1024px) {
    .game-feature-text {
        @apply text-p-xxsmall-laptop/[36px];
    }

}
 

#petunia-pattern{
    background-image: url(../images/Dirt_background.png);

    /* parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: repeat;
    background-size: cover;

}

b {
    @apply font-bold;
}