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



/*====== Mobile/portrait tablets styles and bigger =========*/

 body 
        {
            background-color: rgb(0, 0, 0);
        }
       header h1 {
        text-align: center;
        color:rgb(60,157,208);
        padding-bottom: 15px;
        font-family: "Michroma", sans-serif;
        letter-spacing: 3px;
        background-color: rgb(0, 0, 0);
       
       }

     header nav {
      font-family: "Syne Mono", monospace;
       border-bottom: 1px solid white;
     }
    .row {
  display: flex;
}

.column {
  flex: 33.33%;
  padding: 5px;
}
       .michroma-regular {
  font-family: "Michroma", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.syne-mono-regular {
  font-family: "Syne Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

section {
 font-family: "Michroma", sans-serif;
 font-size: 10pt;
}

            a:link {
        color: rgb(60,157,208);
        background-color: transparent;
        text-decoration: none;
        }

        a:visited {
        color: rgb(60,157,208);
        background-color: transparent;
        text-decoration: none;
        }

        a:hover {
        color: rgb(255, 255, 255);
        background-color: transparent;
        text-decoration: underline;
        }
        a:active {
        color: rgb(60,157,208);
        background-color: transparent;
        text-decoration: underline;
        }
       p {text-align: center;
        padding-top: 15px;
         padding-bottom:30px ;
         color: rgb(60,157,208)
        }

         img{
     box-shadow: 4px 3px 30px rgb(255, 255, 255);
         }

        section {text-align: center;
        
         color: rgb(35,91,121);
        }
         
       nav
       {
        Text-align: center;
       
       }
       Header 
            {
            Border-bottom: 5px;
            }

   .centerImage{
  display:block;
    margin-left: auto;
    margin-right: auto;
}
     main 
     {
      display: flex;

     }

     main div
     {
        Background-color: solid rgb(141, 110, 24);
        border: transparent;
        flex: 2 0 50%;
     }


.card {
    padding: 2em;
    border: 1px solid grey;
    border-radius: 10px;
    background-image: url(../images/blacksuit.jpg);
    text-align:center;
    background-size: cover;
  background-position: center;
  height:40em;
}

.card2 {
    padding: 2em;
    border: 1px solid grey;
    border-radius: 10px;
    background-image: url(../images/spider.png);
    text-align:center;
    background-size: cover;
  background-position: center;
  height:40em;
}

.card3 {
    padding: 2em;
    border: 1px solid grey;
    border-radius: 10px;
    background-image: url(../images/eyes.jpg);
    text-align:center;
    background-size: cover;
  background-position: center;
  height:40em;
}

.card4 {
    padding: 2em;
    border: 1px solid grey;
    border-radius: 10px;
    background-image: url(../images/car.jpg);
    text-align:center;
    background-size: cover;
  background-position: center;
  height:40em;
}

.card5 {
    padding: 2em;
    border: 1px solid grey;
    border-radius: 10px;
    background-image: url(../images/tvs.jpg);
    text-align:center;
    background-size: cover;
  background-position: center;
  height:40em;
}

.card6 {
    padding: 2em;
    border: 1px solid grey;
    border-radius: 10px;
    background-image: url(../images/291024e0237d10d411da5bc86ac360ce.jpg);
    text-align:center;
    background-size: cover;
  background-position: center;
  height:40em;
} 
.grid-container{
    display:grid;
    
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    justify-content: center;
}

       footer
             {
        padding-top: 280px;
        text-align: center;
        color: rgb(60,157,208);
        font-family: "Michroma", sans-serif;
            }



/*====== Landscape tablet and bigger =========*/
@media screen and (min-width: 1020px) {

 .card {
    padding: 2em;
    border: 1px solid grey;
    border-radius: 10px;
    background-image: url(../images/blacksuit.jpg);
    text-align:center;
    background-size: cover;
  background-position: center;
  height:30em;
  width:30em;
}

.card2 {
    padding: 2em;
    border: 1px solid grey;
    border-radius: 10px;
    background-image: url(../images/spider.png);
    text-align:center;
    background-size: cover;
  background-position: center;
 height:30em;
  width:30em;
}

.card3 {
    padding: 2em;
    border: 1px solid grey;
    border-radius: 10px;
    background-image: url(../images/eyes.jpg);
    text-align:center;
    background-size: cover;
  background-position: center;
  height:30em;
  width:30em;
}

.card4 {
    padding: 2em;
    border: 1px solid grey;
    border-radius: 10px;
    background-image: url(../images/car.jpg);
    text-align:center;
    background-size: cover;
  background-position: center;
  height:30em;
  width:30em;
}

.card5 {
    padding: 2em;
    border: 1px solid grey;
    border-radius: 10px;
    background-image: url(../images/tvs.jpg);
    text-align:center;
    background-size: cover;
  background-position: center;
  height:30em;
  width:30em;
}

.card6 {
    padding: 2em;
    border: 1px solid grey;
    border-radius: 10px;
    background-image: url(../images/291024e0237d10d411da5bc86ac360ce.jpg);
    text-align:center;
    background-size: cover;
  background-position: center;
  height:30em;
  width:30em;
}
.grid-container{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 300px));
    gap: 15px;
    justify-content: center;
}

} /*====== end of wide-screen styles =========*/