@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');
.nav {
     position: fixed;
     width: 100%;
     top: 0;
     backdrop-filter: blur(300px);
}

body{
     background-image: url("bg1.webp");
     background-size: cover;
}

.body_main{
     margin-top: 12%;
     margin-left: 6%;
     margin-right: 6%;
     font-family: 'Jost', sans-serif;
}

.body_main h1 {
     display: inline-block;
     font-size: 3.5vw;
     margin-left: 6%;
     margin-right: 6%;
     font-family: 'Jost', sans-serif;
     text-shadow: 2px 2px pink;
}
.cans{
     margin-left: 6%;
     margin-right: 6%;
     font-family: 'Jost', sans-serif;
     display: grid;
     grid-template-columns: auto auto;
     row-gap: 2em;
     column-gap: 2em;

}
.cans img{
     width: 40px;
     float: left;
     margin: 4%;
     margin-right: 5%;
     margin-bottom: 5%;
}
.c1 , .c2,.c3,.c4{
     background-color: white;
    box-shadow: 3px 3px 3px 3px grey;
    
}


@media only screen and (max-width: 550px){
     .body_main{
          margin-top: 50%;
          margin-bottom: 25%;
     }
     .body_main h1 {
          
          font-size: 2.2em;
          
     }
     .cans{
          display: block;
     }

}