img{
    width: 70px;
    height: 70px;
}
@font-face {
    font-family: bob;
    src: url(../Fonts/Roboto-Regular.ttf);
}
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  :root{
    --primary-color: #5570ff;
    --primary-color-2: #5671FF;
    --text-color: #2c346D;
    --light-color: #F5F7FF;
    --seconndary-color: #B36AFF;
    --light-green: #9AFB02;
  }
  /* reset */
  body, p, a, ul, li{
    margin: 0;
    padding: 0;
    text-decoration: none;
}
li{
    list-style-type: none;
}
body{
    overflow-x: hidden;
    font-family: bob, sans-serif;
    color: var(--text-color);
}
a{
    font-family: bob, sans-serif;
}

/* Nav styling starts here */
nav{
    height: 100px;
    box-shadow: .5px .5px 4px #e5e2e2;
}

/* main styling */
main{
    margin: 50px 0 200px 0;
}
.connect-wallet{
    padding: 50px 0;
}

.connect-wallet h1{
    font-weight: bolder;
    font-size: 3em;
    padding: 10px 0;
}
.connect-wallet span{
    padding: 0px 0;
    font-size: 1.3em;
}
/* Products styling */

.products{
    display: grid;
    text-align: center;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    grid-gap: 70px;
}
.products div{
    grid-column: span 1;
    transition: all .5s ease-in-out;
}
.products div:hover{
    transform: scale(1.3,1.3);
}
.image-name {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    color: #333; 
}


@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* show and remove classes */
@media only screen and (max-width: 767px) {
    img{
        width: 45px;
        height: 45px;
    }
    .connect-wallet{
        margin-left: 20px;
    }
    .connect-wallet h1{
        font-weight: bolder;
        font-size: 1.5em;
        padding: 10px 0;
    }
    .connect-wallet span{
        padding: 0px 0;
        font-size: .5em;
    }
    .products{
        display: grid;
        text-align: center;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto;
        grid-gap: 10px;
    }
    .products div{
        grid-column: span 1;
        transition: all .5s ease-in-out;
    }
    
}

@media only screen and (min-width: 768px) and (max-width: 1000px) {
    
}