*{
   padding: 0;
   margin: 0;
   margin-top: 5px;
   box-sizing: border-box;
}
/*navigation bar*/
h1{
   text-align: center;
   margin-top: -30px;
   margin-bottom: 20px;
}
.nav-container{
   display: flex;
   justify-content: flex-end;
   margin: 0;
   font-size: 1.3rem;
   cursor: pointer;
}
.nav-container > div > a{
   padding: 10px;
   margin-right: 15px;
   text-decoration: none;
   color: rgb(65, 65, 65);
}
.nav-container > div:hover{
   transform: scale(1.25);
}
/*main gallery*/
.gallery{
   margin: 0 3px ;
   column-gap: 3px;
   column-count: 4;
}
.gallery img{
   border-radius: 7%;
   width: 100%;
   height: auto;
}

/* footer */
.footer-container{
   height: 100%;
   background: rgb(219, 219, 219);
   box-shadow: 0 0 0 2px rgb(151, 150, 150);
   padding: 5px 20px 10px 20px;
}
.footer{
   display: flex;
   justify-content: space-between;
}
.footer > a{
   font-size: 20px;
   text-decoration: none;
   color: black;
}
.footer > h3{
   font-size: 20px;
   font-weight: 500;
}
.footer >a:hover{
   transform: scale(1.05);
}
.footer >h3:hover{
   transform: scale(1.05);
}
/*contact me*/
.socials{
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   height: 100vh;
}
.socials a{
   font-size: 2.5rem;
   margin: 0 20px;
   text-decoration: none;
   color: black;
}
.socials > .insta{
   background:
   linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}
.socials > .fb{
   background:#3b5998;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}.socials > .twitter{
   background:#00acee;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}.socials > .gmail{
   background:
   linear-gradient(90deg, #4285F4, #BB001B, #EA4335, #FBBC05, #34A853);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}
/*responsiive design*/
@media screen and (max-width: 920px)
{
   .gallery{
      margin: 0 3px ;
      column-gap: 3px;
      column-count: 3;
   }
   .nav-container > div{
      font-size: 1.2rem;
      margin-left: 0;
      padding: 5px  
   }
   h1{
      padding-top: 12px;
      text-align: center;
      font-size: 1.5rem;
   }
}
@media screen and (max-width: 690px)
{
   *{
      margin: 0;
      padding: 0;
   }
   .gallery{
      margin: 0 3px ;
      column-gap: 3px;
      column-count: 2;
   }
   .nav-container{
      display: flex;
      justify-content: space-evenly;
      background-color: lightgray;
      width: 100%;
   }
   h1{
      text-align: center;
      margin: 5px 0px;
      font-size: 2.0rem;
   }
   .footer-container{
      padding: 5px;
      margin: 0;
      width: 100%;
   }
   .footer a {
      font-size: 1.15rem;
   }
   .footer h3{
      font-size: 1.15rem;
   }
   .socials{
      display: grid;
      grid-template-rows: repeat(4 , 15%);
   }
   .socials a{
      font-size: 2.0rem;
   }
}@media screen and (max-width: 486px)
{
   .nav-container{
      width: 100%;
   }
   h1{
      font-size: 2.5rem;
   }
   .gallery{
      margin: 0 3px ;
      column-gap: 3px;
      column-count: 1;
   }
   .footer-container{
      width: 100%;
   }
   .footer > a{
      text-align: left;
   }
   .footer > h3{
      text-align: right;
   }
   .socials{
      display: grid;
      grid-template-rows: repeat(4 , 15%);
   }
   .socials a{
      text-align: center;
      font-size: 1.6rem;
   }
}
@media screen and (max-width: 420px)
{
   .nav-container .footer-container{
      width: 100%;
   }
   .socials a{
      font-size: 1.3rem;
   }
}