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

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

header{
    min-height: 100px;
}

header,footer{
     background-color: #003A5F;
}

#logo{
    position: absolute;
    top: 12px;
    left: 3px;
}

nav ul li {
    display: inline-block;
    padding-top: 0.4rem;
    padding-bottom: 2rem;
    padding-left: 0.2rem;
    font-size: 1.08rem;
    }

    nav{
        margin-left: 80px;
        padding-top: 33px;
    }

    a{
        text-decoration: none;
        padding-left: 0.5rem;
    }


   p, a, h1, h2, footer, figcaption{
        color: #29FFF8;
    }

    h1{
        padding-top: 1rem;
        padding-bottom: 0.5rem;
        font-size: 2rem;

        
    }

    h2{
        font-size: 1.5rem;
        padding-top: 1rem;
        padding-bottom: 0.3rem;
        
    }

    h1, h2{
        padding-left: 2rem;
        font-family: "Asul", serif;
        font-weight: 400;
        font-style: normal;
    }

    p, a, figcaption{
        font-family: "Molengo", sans-serif;
        font-weight: 400;
        font-style: normal;
    }


    p{
     padding-left: 1.5rem;
     padding-right: 2rem;
     padding-bottom: 0.5rem;
     font-size: 1.3rem;
    }
  body{
    background-color: #000001;
  }

    footer,figcaption{
    text-align: center;
  }

footer{
    padding: 1.5rem;
}

  .gallery{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    justify-items: center;
    position: relative;
    margin: 0 auto;
    padding: 2rem;
    padding-top: 0.5rem;
    padding-bottom: 1rem;

}


/* @media screen and (min-width: 300px){
    .gallery{
        grid-template-columns: 1fr 1fr 1fr;
    }
} */


main article img {
    width: 100%;
    height: auto;
}

figcaption{
    padding-top: 0.5rem;
}