/* styles.css 
   Project: 
   Author: 
   Date: 
*/

/*google font*/

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Montserrat:wght@300;400&display=swap');

/*main css*/


* {
   box-sizing: border-box;
}

a {
   color: white;
   text-decoration: none;
}


img {
   width: 100%;
   display: block;
}

body {
   background-color: black;
   font-family: Verdana, sans-serif;
   /*font-family: 'Montserrat', sans-serif;*/
   min-height: 100vh;
   display: flex;
   flex-direction: column; 
   margin: 0;  
}


main {
  flex: 1;
}

.narrow {
   display: none;
}

.background {
   position: fixed;
   top: 0px;
   left: 0px;
   height: 100vh;
   width: 100vw;
   z-index: -1;
}

.background img {
   height: 100%;
   object-fit: cover;
   filter: grayscale(0);
   opacity: 0.2;
}

.icons {
   max-width: 400px;
   margin: 5vh auto;
   display: grid;
   grid-auto-flow: column;
   grid-gap: 10px;  
   padding: 10px;
   opacity: 1;
}

.icons img {
   padding: 10px;
   background-color: black;
   height: 100%;
   transition: all 0.7s ease;
   filter: grayscale(0.5);
   border-radius: 10px;
   border: 0.5px solid white;
}

.icons img:hover {
   transform: scale(1.07);
   filter: grayscale(0.4);
}


.linkbox {
   margin: 10vh auto;
   max-width: 640px;
}

.link {
   margin: 50px 30px;
   background-color: black;
   color: white;
   padding: 36px 25px;
   font-size: 1.5em;
   line-height: 1.5em;
   transition: all 0.7s ease;
   text-align: center;
   border-radius: 10px;
   border: 1px solid white;
}

.link img {
   margin-top: 0.25em;
   height: 1em;
   width: 1em;
}

.left {
   float: left;
}

.right {
   float: right;
}

.link:hover {
   transform: scale(1.07);
}

footer {
/*   position: fixed;
   bottom: 0px;*/
   width: 100%;
   padding: 10px 40px;
   background-color: black;
   color: white;
   text-align: right;
}


/*media query for responsive design */

@media only screen and (max-width: 640px) {


   .wide {
      display: none;
   }

   .narrow {
      display: block;
   }

   .background {
      opacity: 1;
   }

   .link {
      padding: 20px;
      font-size: 1.2em;
   }



}