@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body {
   font-family: 'Roboto', sans-serif;
   background-repeat: no-repeat;
   background-image: url(../img/pozadi.png);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: top;
   margin: 0px;
   color: white;
}

header {
   padding: 10px 8%;
}

nav a {
   color: white;
   text-decoration: none;
   padding: 10px 20px;
   border-radius: 4px;
   margin: 12px;
   text-align: center;
   justify-content: center;
   background-color: rgba(177, 174, 174, 0.6);
   transition: 0.6s;
}

nav a:hover {
   background-color: rgba(255, 255, 255, 0.817);
   transition: 0.6s;
   justify-content: center;
}

nav a.vava p,
nav a.wpwp p {
   padding: 5px;
   background-color: rgb(154, 154, 154);
   border-radius: 10px;
   transition: 0.6s;
}

nav a.vava:hover p {
   background-color: #e5a032;
   padding: 5px;
   border-radius: 15px;
   transition: 0.6s;
}

nav a.wpwp:hover p {
   background-color: #e86229;
   padding: 5px;
   border-radius: 15px;
   transition: 0.6s;
}

nav {
   display: flex;
   flex-direction: column;
   justify-content: center;
   transition: 0.6s;
}

h1 {
   font-family: 'Nunito Sans';
   font-size: 3em;
}

img {
   max-width: max-content;
   width: 100%;
   border-radius: 5px;
}

p.footer {
   font-family: 'Comfortaa';
}

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

footer a img {
   transition: 0.6s;
}

footer a img:hover {
   transform: scale(1.3);
   transition: 0.6s;
}

article.mail{
   position: fixed;
   left: 3%;
   bottom: 1.5%;
}

@media (min-width: 860px) {
   div#hlavni {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
   }

   div#vedle {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 10px 8%;
      background-color: rgba(64, 64, 64, 0.7);
   }

   nav {
      flex-direction: row;
      align-items: flex-end;
   }

   nav a:hover {
      transform: scale(1.1);
   }

   header {
      padding: 15% 8%;
   }

   div#extra {
      position: relative;
      bottom: 500px;
      margin: 0;
      padding: 0;
      opacity: 0.02;
   }

   div#extra p {
      margin: 0;
      padding: 0;
   }

   html,
   body {
      scroll-behavior: smooth;
      position: relative;
      min-height: 100%;
      overflow: hidden;
   }

   footer {
      position: fixed;
      bottom: 3%;
      right: 5%;
      width: 5%;
   }
}

@media (max-width:860px) {
   p.footer {
      display: none;
   }

   div#extra {
      display: none;
   }

   div#vedle {
      padding: 20px;
   }

   div#vedle h1 {
      text-align: center;
      background-color: rgba(122, 122, 122, 0.6);
      padding: 20px;
      border-radius: 10px;
   }

   header {
      display: flex;
      flex-direction: column;
      align-items: center;
   }

   div#vedle h2 {
      display: none;
   }

   footer {
      position: fixed;
      bottom: 1.5%;
      right: 3%;
      width: 11%;
   }

   footer a img{
      transform: scale(1.7);
   }

   footer a img:hover{
      transform: scale(1.9);
   }
}

::selection {
   color: black;
   background: #FFC107;
}

::-moz-selection {
   color: black;
   background: #FFC107;
}

body {
   opacity: 0;
   animation: fadeIn 1s forwards;
}

@keyframes fadeIn {
   to {
      opacity: 1;
   }
}