@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap');

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

html {
   font-family: 'Pixelify Sans', sans-serif;
   font-size: 25px;
   font-weight: 400;
   line-height: 1.5;
   color: #000;
}

/* HEADER */
header {
   display: flex;
   flex-flow: row;
   position: sticky;
   justify-content: space-around;
   width: 100vw;
   height: 110px;
   background-color: #000;
   color: #fff;
   z-index: 1;
}

/* HEADER > ICON */
header .header-icon {
   display: flex;
   align-items: center;
   font-size: 2.5em;
   cursor: pointer;
   text-decoration: none;
   color: #fff;
}
header .header-icon:hover{
   transform: scale(0.95);
}

header .header-icon img {
   height: 70%;
}

/* FOOTER */
footer {
   height: 110px;
   background: #000;
   font-size: 25px;
}

footer .contacts {
   display: flex;
   width: 100%;
   height: 100%;
   justify-content: center;
   align-items: center;
}

footer ul {
   display: flex;
   justify-content: space-between;
   column-gap: 15px;
}

footer .contacts h3 {
   color: #fff;
}

footer ul li {
   position: relative;
   display: flex;
   cursor: pointer;
   align-items: center;
   justify-content: center;
}

footer ul li:first-child {
   cursor: initial;
}

footer ul li img {
   height: 50px;
}

footer ul li img:hover {
   transform: scale(1.2);
}

@media (max-width: 1400px) {
   header {
      height: 90px;
   }

   header .header-icon {
      font-size: 1.6em;
   }
}

@media (max-width: 1200px) {
   header {
      height: 75px;
   }
   
   html {
      font-size: 24px;
   }
   footer {
      height: 90px;
      font-size: 20px;
   }
   footer ul li img {
      height: 40px;
   }
}
@media (max-width: 768px) {
   header .header-icon {
      width: 80%;
   }
}
@media (max-width: 576px) {
   html {
      font-size: 19px;
   }

   header .header-icon {
      font-size: 2.2em;
   }
}