@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');

body{
  font-family: jost;
}

*{
    padding:0px;
    margin:0px;
 }
 
#navbar4{
    height:60px;
    width:100%;
   
    display:grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(1,60px);
    margin-top: 0px;
    
}
#biggest{
    width:100%;
    background-color: yellow;
    font-weight: bold;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items:center;
    
}
#biggest>p{
    width:300px;
    
}

#free{
    background-color: black;
    color:white;
    display: flex;
    justify-content: center;
    align-items: center;
}
#winner{
    height:290px;
    width:100%;
    background: #C6FFDD;  
background: -webkit-linear-gradient(to right, #f7797d, #FBD786, #C6FFDD);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #f7797d, #FBD786, #C6FFDD); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 cursor: pointer;

}
#mover{
    margin-top:20px;
    margin-left: 36%;
    
}


#get{
    height:70px;
    width:30%;
    margin:auto;
   display:flex;
   justify-content: center;
   align-items: center;
   text-align: center;
}
#use{
    height:60px;
    width:20%;
    margin:auto;
    text-align: center;
    margin-top: 25px;
    
}
#see{
    height:fit-content;
    width:fit-content;
    margin:auto;
    font-size: 14px;
    background-color: #7b7a7a;
    border-radius: 5px;
}
#whitegap{
    height:600px;
    width:85%;
    margin:auto;
    margin-top:50px;
    cursor: pointer;
}
#whitegap>img{
    width:100%;
}
#cards{
    height:480px;
    width:85%;
    
    margin:auto;
    margin-top:60px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(1,480px);
    gap:20px;
    cursor:pointer
}

#cards>div>img{
    width:100%;
}
.cardsh{
    display:flex;
    justify-content: center;
    font-stretch: wider;
}
.cardsp{
    display:flex;
    justify-content: center;
    font-stretch: wider;
}
#nextcards{
    height:820px;
    width:70%;
    
    margin:auto;
    margin-top:50px;
    display:grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(1,800px);
    gap:30px;
    cursor: pointer;
}
#nextcards>div>img{
    width:100%;
}
.nextcardsh{
    display:flex;
    justify-content: center;
    font-stretch: wider;
}
.nextcardsp{
    display:flex;
    justify-content: center;
    font-stretch: wider;
}
.butt{
    padding:20px 30px 20px 30px;
    border-color: black;
    font-size:16px;
    font-weight: bold;
    margin-top:5px;
margin:auto;
display: flex;
justify-content: center;
}
.butt:hover{
    background-color: black;
    color:white;
}

#trending{
    height:fit-content;
    width:fit-content;
    
    margin:auto;
}
#trendb{
    height:200px;
    width:85%;
   
    margin:auto;
    margin-top: 50px;
    display:grid;
    grid-template-columns: repeat(6,1fr);
    grid-template-rows: repeat(1,250px);
    gap:20px;
    cursor: pointer;
}
#trendb>div>img{
width:100%;
}