/* 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: white;
   font-family: 'Times New Roman', Times, serif;
   /*font-family: 'Montserrat', sans-serif;*/
}

.narrow {
   display: none;
}

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

.background img {
   height: 100%;
   object-fit: cover;
}

.construction {
   max-width: 480px;
   animation: lower 2s;
   position: absolute;
   left: 50%;
   transform: translate(-50%, 0%);
   top: -20%;
}

@keyframes lower {

   0% {
      top: -100%;
   }

   80% {
      top: -20%;
   }

   90% {
      top: -25%;
   }

   100% {
      top: -20%;
   }

}

.icons {
   display: grid;
   grid-auto-flow: column;
   grid-gap: 10px;  
/*   position: fixed;
   left: 0px;
   top: 0px;
   width: 10vw;*/
/*   background-color: black;*/
   padding: 10px;
   width: 120%;
   position: relative;
   left: -10%;
   opacity: 1;
   animation: appear 4s ease;
}

.icons img {
   padding: 10px;
   background-color: black;
   height: 100%;
}


@keyframes appear {

   0% {
      opacity: 0%;
   }

   50% {
      opacity: 0%;
   }

   70% {
      opacity: 1;
   }

}

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

.link {
   margin: 50px 30px;
   background-color: black;
   color: white;
   padding: 36px 25px;
   font-size: 2em;
   line-height: 1.5em;
   transition: all 0.7s ease;
   text-align: center;
/*   border-image: linear-gradient(to top right, var(--orange-50), var(--pink-50), var(--cobalt-50)) 1;*/

/*border-image: linear-gradient(#f6b73c, #4d9f0c) 30;
   
   border-width: 5px;
   border-style: solid;*/
}

.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;
   }

   .construction {
      width: 80vw;
   }


}