@font-face {
    font-family: 'Campus'; /* Name of the font */
    src: url('../Fonts/Campus/campus-personal-use.regular.ttf') format('opentype'); /* Path to the font file */
}
@font-face {
    font-family: 'Sippin'; /* Name of the font */
    src: url('../Fonts/mf-sippin-on-sunshine/Sippin\ On\ Sunshine\ -\ OTF.otf') format('opentype'); /* Path to the font file */
}
@font-face {
    font-family: 'Dyslexic'; /* Name of the font */
    src: url('../Fonts/Dyslexic/OpenDyslexic-Regular.otf') format('opentype'); /* Path to the font file */
}
@font-face {
    font-family: 'Sherlock'; /* Name of the font */
    src: url('../Fonts/sherlock/Sherlock\ Vintage.ttf') format('opentype'); /* Path to the font file */
}
@font-face {
    font-family: 'Crack'; /* Name of the font */
    src: url('../Fonts/icrack/iCrack.ttf') format('opentype'); /* Path to the font file */
}
@font-face {
    font-family: 'hogwarts'; /* Name of the font */
    src: url('../Fonts/hogwarts/Hogwarts.ttf') format('opentype'); /* Path to the font file */
}
@font-face {
    font-family: 'Avatar';
    src: url('../Fonts/Avatar_Water.ttf') format('opentype');
}
*{
    padding: 0px;
    margin: 0px;
}
#navbar a[href="../inside.html"] {
    font-family: Avatar;
    font-size: 2rem;
}

#navbar a[href="action.html"] {
    font-family: Campus;
}

#navbar a[href="romance.html"] {
    font-family:Sippin;
}

#navbar a[href="slice.html"] {
    font-family:Dyslexic;
}

#navbar a[href="fantasy.html"] {
    font-family:Sherlock;
}

#navbar a[href="adventure.html"] {
    font-family:Crack;
}
#navbar a[href="Drama.html"] {
    font-family:hogwarts;
}

body,html{
    width: 100vw;
    min-height: 100%;  /* Ensure that the body takes at least the full height of the screen */
    background-color: black;
    background-size:cover;  /* Ensures the background covers the entire screen */
    background-position: center; /* Ensures the background is centered */
    background-attachment: fixed; 
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0px;
    padding: 0px;


}
.container{
    position: absolute;
    top: 25%;
    margin-left: 6%;
    margin-right: 7%;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: repeat(3,1fr);
    color: white;
    gap: 50px;
}
.container .card {
    text-align: center;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background-color: white;
}
.container .card .inner{
    background-color: black;
}


.card{
    width: 270px;
    height: 400px;
    position: relative; /* To make the inner div positioned inside */
    margin: 0 auto; /* Center the outer div horizontally */
    display: flex;
    justify-content: center; /* Horizontally center the inner div */
     /* Vertically center the inner div */
    bottom: 10%;
    font-size: 34px;
    transition: transform 0.3s ease;
    cursor: pointer;
    margin-top: 65px;
}

.inner{
    position: absolute;
    width: 100%;
    height:400px;
    background: aqua;
}
#navbar{
    position: sticky;
    width: 100%;
    height: 60px;
    background-color: #121212;
    margin-top: 0px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font-size: 1.5rem;
}
.generes{
    /* border: 2px solid black; */
    /* padding: 10px;
    border-radius: 0 10px;
    background:linear-gradient(145deg,black,grey); */
    color: white;
}
.highlighted{
    text-decoration: underline;
    text-underline-offset: 10px;
    padding: 10px;

}
.card:hover{
    transform: scale(1.1)
    
}