@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

*{ font-family: 'Open Sans', sans-serif; } body{ margin:0; padding:0; }
body{  background-color: #E3E3E3; }
main1 *{ border:1px solid red;}
main{
    display: grid;
    height:100vh;
    grid-template-columns: 100%;
   
    align-items: start;
    min-width:600px;
    min-height: 500px;
}

.topbg{
    /* background-image: url(bg.jpg); */
    background-size: cover;
    background-position: center center;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background-color: yellow;
    height: 90%;
    border-radius: 10px;
    margin: 1.5vh 1vw;
    min-height: 256px;
}
.topbg .centerd{ display: flex; flex-direction: column; text-align:center; width: 300px;  }
.topbg .centerd .playfreebtn a{
    display: block;
    height:100px;

    background-image: url(btn.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    margin: 10px 0;
}
.topbg .centerd .logo{ width:100%; }
.topbg .centerd .logo img{ width:100%; -webkit-filter: drop-shadow(5px 5px 5px #000); filter: drop-shadow(5px 5px 5px #000); }
h1{align-items: center;font-size: 2.5vw;padding-left: 2vw;margin: 0;/* background-color: red; */padding-top: 0vw;padding-bottom: 21px;}

.content {/* background-color: blue; */flex;flex-direction: row;width:100%;justify-content: center; align-items: flex-start;}
.content {display: flex;flex-direction: row;align-items: center;overflow: hidden;margin-top: 10px;justify-content: center;}
.content .cards{width: 90vw;margin: 0;}
.content .carousel{ display: flex; flex-direction: row; align-items: center; }
.slider div{ margin: 0 auto; padding-bottom:10px; }
.slider div img{
    margin:0 auto;
    display:block;
    width: 24vh;
    height: 24vh;
    box-shadow: 0px 20px 15px rgba(0, 0, 0, 0.51);
    background-color: #000;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.slider{ display: flex; flex-direction: row;}
.slider {  display:flex;  display:flex; align-items: center; justify-content: center; vertical-align: middle;}


section.info{
    z-index:8;
    text-align: center;
    color:#FFF;
    z-index: 8;
    text-align: center;
    color: #FFF;
    background-color: #000;
    position: relative;
    width: 24vh;
    margin: 0 auto 0 auto;
    height: 10vh;
    border-radius: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    backdrop-filter: blur(21.413000106811523px);
    --webkit-backdrop-filter: blur(21.413000106811523px);
    /* background-color: rgba(0, 0, 0, 0.55); */
    padding-top: 1vh;
    text-transform: uppercase;
    padding-bottom:1vh;
   }
section.info h5.gametitle{text-transform: uppercase;font-size: 2vh;padding:0;margin: 0;}
section.info span.category{text-transform: uppercase;padding: 0.1vw 1vw;border:1px solid #FFF;border-radius: 5px;font-size: 1.2vh;margin: 0 0.2vh;display: inline-block;}
section.info .rating{font-size: 2vh;}
.checked { color: orange; }

.aro{
    width: 50px;
    height: 50px;
    background-color: #FFF;
    border-color: #666;
    border-radius: 50px;
    border: 1px solid #bbb;
    filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 15px;
    cursor: pointer;
}
.prev{ background-image: url(arrowleft.png); }
.next{ background-image: url(arrowright.png); }

.srch{ width:auto; margin: 0 auto; margin-top:100px}
.srch form.search{ display: flex; flex-direction: row; align-items: stretch; justify-content: center;}
.srch .btns{width: 10%;display: flex;flex-direction: row;margin-bottom:-50px;position: relative;justify-content:flex-end;margin-left: 440px;}
.srch .btns a{ margin:0 10px;}

.searchtxt {
    height: 60px;
    width: 490px;
    border-radius: 16px;
    background-color: #FFF;
    box-shadow: 0 8px 16px 0 #E0E2E4;
    border: 0;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    color: rgba(0,0,0,0.38);
    padding-left:20px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

.searchbtn{
    display: block;
    cursor: pointer;
    border:0;
    background-color: rgb(123,71,212);
    color: #FFF;
    text-transform: capitalize;
    font-size: 20px;
    padding:0 30px;
    font-weight: 500;
  letter-spacing: 1.25px;
  line-height: 20px;
  text-align: center;

}
.search-bar {
    margin: 40px auto 10px auto;
    width: auto;
    display: inline-block;
    height: auto;
	
    
}

.search-input2 {
    float: left;
    width: 300px;
    font-size: 10px;
    padding: 3px;
    border: 2px solid #FFF;
}



.search-input {
    float: left;
    width: 700px;
    font-size: 18px;
    padding: 10px;
    border: 1px solid #000000;
}

.search-submit-button {
    float: left;
    background-color: #3b7de6;
    width: 50px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    padding: 10px;
    font-size: 25px;
    color: #FFF;
    text-align: center;
}
.search-submit-button2 {
    float: left;
    background-color: #3b7de6;
    width: 25px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    padding: 3px;
    font-size: 25px;
    color: #FFF;
    text-align: center;
}
.recipetbl img {width:150px}
.panel {
    text-align: center;
    color: #ffffff;
    padding-top: 50px;
    margin-top:50px;
    height: 200px;
    background-image: linear-gradient(#a29bfe, #6c5ce7);
}
footer {
    
    
   position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #ffffff;
  color: white;
  text-align: right;

     
}
footer .nav {width:450px; text-align:right; float:right}
    footer .nav li {
        padding: 0 5px;
        margin: 0 auto;
        text-align: right;
        margin-left: auto;
        margin-right: auto;
		
    }

            footer .nav li a {
                font-size: 12px;
                color: #000000;
                text-decoration: none;
                
            }

                footer .nav li a:hover {
                    text-decoration: underline;
                }