.grid{
    height:97vh;
        display: grid;
        grid-template-columns:repeat(10, 1fr);
        grid-template-rows: repeat(10, 1fr);
    }
.top{
    background-image:url(images/hearth.jpg);
    background-position:center;
    grid-row:1/3;
    grid-column:2/10;
}
.menu ul{
    list-style-type:none;
    padding:0px;
    margin:0px;
    overflow:hidden;
}
.menu li{
    float:left;
}
.menu a{
    color:rgb(245, 244, 172);
    text-align: center;
    text-decoration: none;
    display:block;
    padding:20px;
    padding-bottom:37px
    
}
.menu a:hover{
    background-color: rgba(43, 28, 0, 0.767);
}
.menu{
    background-color: rgba(109, 71, 0, 0.767);
    grid-row:3;
    grid-column:2/10;
}
.bottom{
    background-color: purple;
    grid-row:10;
    grid-column:1/11;
    text-align: center;
    color:white;
    z-index: 100;
}
.center{
    background-color: rgb(255, 250, 223);
    grid-row:4/10;
    grid-column:2/10;
    text-align: center;
    padding-left:20px;
    padding-right:20px;

}
.left{
    background-color: rgb(44, 29, 2);
    grid-row:1/11;
    grid-column:1;
    z-index: 101;

}
.right{
    background-color: rgb(44, 29, 2);
    grid-row:1/11;
    grid-column:10;
    z-index: 101;
}
.centerimg{
    width:80px;
    height:120px;
}
.leftalign{
    float:left;
}
.rightalign{
    float:right;
}
.centeralign{
    float:center;
}
.logo{
    width: 150px;
    height:120px;
}
mark{
    background-color: bisque;
    padding:7px;
}
.genre{
    width:230px;
    height:150px;
    object-fit: cover;
    overflow:hidden;
}
.top p{
    margin:0px;
}
.top a{
    text-decoration: none;
}
@media (max-width:750px) {
    .logo{
        width:90px;
        height:75px;
    }
    .leftalign{
        display:none;
    }
    .rightalign{
        display:none;
    }
    .centeralign{
        display:none;
    }
}
@media (max-height:650px) {
    .logo{
        display:none;
    }
    .leftalign{
        display:none;
    }
    .rightalign{
        display:none;
    }
    .centeralign{
        display:none;
    }
}