body{
        margin:0;
        padding:0;
        font-family: Helvetica, Arial, sans-serif;
            }

    img {
        width: 100%;
         }

    header {
        width: 100%;
        margin: 3% 0 0 0;
        text-align: center;
        /* padding: 13.8% 0;
        background-image: url(../images/banner.png);
        background-position: 50%;
        background-size: contain;
        overflow: hidden ; */
        }

    header img {
        width: 80%;
         }

    section {
        margin: 1% 3%;
        font-size: 125%;
        line-height: 1.3;
        }

    .nft_grid {
        display: grid;
        grid-template-columns:  1fr 1fr 1fr 1fr 1fr;
        column-gap: 1.5%;
            }
            
    .nft_grid img {
        display: block;
        }

    .grid_item{  
        padding-bottom: 12%;
        margin-bottom: 6%;
        }

    .grid_item img {
        border-radius: 300px;
        }
    .grid_item h2 {
        text-align: center;
        margin: 6% 0 0 0;
        font-size: 90%;
        }

    .description {
        margin:1.5% 9% 4.5% 9%;
        text-align: center;
        }


    .cta {
        text-align: center;
        margin: 3% 0 9% 0;
        }

    footer {
        margin:3% 3% 12% 3%;
        display: block;
        text-align: center;
        }

    h1 {
        margin: 0;
        padding:0;
        line-height: 1;
        font-size:250%;
        }

    h2 {
        margin: 0 0 1.5% 0;
        padding:0 0;
        line-height: 1;
        font-size: 125%;
        }

    p {
        margin:0;
        padding:0;
        line-height: 1.3;
        font-size:125%;
        display: inline-block;
        }
    
    a {
        color:black;
        text-decoration:dashed ;
    }
    
    a:hover {
        color:gray;
     }

    a.button {
        
        text-transform: uppercase;
        background: #000;
        color: white;
        padding: 1.5% 3%;
        text-decoration: none;
        margin: 1.5% .5%;
        display: inline-block;
        border-radius: 500px;
        font-weight: bold;
        text-align: center;
        min-width:300px;
        border:#000 3px solid;
        font-size:100%;
    }

    a:hover.button,  a:active.button {
        background-color: #fff;
        border:#000 3px solid;
        color:#000;
    }

    #details {
        margin:9% 12%;
        font-size: 125%;
        
    }

    #details p {
        margin-bottom: 6%;
    }

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #social {
        text-align: center;
        margin:9% 15%;
       
        }

    #social ul {
        display: grid;
        grid-template-columns:  auto auto auto;
        align-content: center;   
        justify-items: center;
        column-gap: 3%;
        margin: 0;
        padding: 0;

        }

    #social a {
        display: block;
        height: 60px;
        width: 60px;
        border-radius: 60px;
        border: 3px solid rgb(0,0,0);
        }

    #social a:hover, #social a:active {
        border: 3px solid rgb(0, 0, 0. .5);
        background-color: rgba(0,0,0,.05);
        }

    #social li {
        margin: 0;
        padding: 0;
     
        text-align: center;
        }


    @media only screen and (max-width: 835px) {
      
        .nft_grid {
            display: grid;
            grid-template-columns:  1fr 1fr 1fr 1fr;
            column-gap: 2%;
            }

            header img {
                width: 95%;
            }
        
            p {
                font-size: 80%;
            }

            h2 {
                font-size: 80%;
            }

            .grid_item h2 {
                font-size: 60%;
            }

            a.button {
                font-size: 70%;
                width:60% ;
            }


    }

    @media only screen and (max-width: 415px) {
    
        .nft_grid {
            display: grid;
            grid-template-columns:  1fr 1fr;
            column-gap: 3%;
            }

            header img {
                width: 95%%;
            }

            p {
                font-size: 80%;
            }

            h2 {
                font-size: 70%;
            }

            .grid_item h2 {
                font-size: 65%;
            }

            a.button {
                font-size: 70%;
                width:80% ;
            }

            #social a {
                height: 50px;
                width: 50px;
                border-radius: 50px;
            }



    }