html{
  overflow-x:hidden;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
a{
  color: #ffffff;
  
  text-decoration: none;
}

body {
  font-family: "Segoe UI", sans-serif;
 background-color: #000000;
  color: #ffffff;


}

nav {
    background: linear-gradient(to right, #1e3b72, #2a52981b, #2a529800, #2a52981b, #1e3b72);
    width: 100vw;
    height: 7.1%;
    display: flex;
    justify-content: flex-start; 
    align-items: center;
    position: fixed;
    z-index: 11;
    border-bottom: 1px solid #ffffff;
    padding: 0 ; 
    
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 5px; 
    padding-right: 3%;
    width: 25%;
    height: 100%;
      margin-left: 0.5%;
        transition: all ease-in-out 0.3s;
}
.nav-links a{

  width: 10%;
  height: 100%;
}
.nav-links a img{
  width: 100%;
  height: 100%;
}

nav a:hover {
    transform: translateY(-3px);
}


header {

    padding: 2rem;
    text-align: center;

}


header h1 {
    margin-top: 3%;
    font-size: 3rem;
    margin-bottom: 0.5rem;
}



.MAIN {
  width: 90VW;
  margin: auto;

}

.kategorie {
  margin: 2rem 0;
}

.kategorie h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #ccc;
  padding-bottom: 0.5rem;
  text-align: center;
  width: 50vw  ;
  margin: auto;
  margin-bottom: 5%;

}

.projekty-box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 5%;
}

.projekt {
  background-color: #16325c;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.616);
  border-radius: 8px;
  box-shadow: 0 2px 5px rgb(0, 0, 0);
  transition: transform 0.2s ease;
  width: 20vw;
  height: 40vh;
  z-index: 2;
}

.projekt:hover {
  transform: scale(1.02);
}

.projekt h3 {
  margin-top: 10px;
  margin-bottom: 15px;
  height: 10%;
  padding: 5px;
  text-align: center;
}

.projekt p {
  font-size: 0.95rem;
  padding-left: 15px;
  height: 15%;
  text-align: center;
}

.projekt img{
  width: 100%;
  margin-top: 5%;
  height: 60%;
  object-fit:  cover;
  border-radius: 0px 0px 5% 5%;
  
}
.projekt a{
  display: block;
  width: fit-content;
  margin: 10px auto;
  padding: 6px 12px;
  background-color: #ffffff22;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-size: 0.9rem;
  transition: background-color 0.3s;
  
}

footer {
  height: 10%;
  text-align: center;
  padding: 1rem;
  background-color: #071221;
  color: #999;
  margin-top: 3rem;
}


@media (min-width: 320px){
  .projekt{
    width: 65vw;
  }
  .projekty-box{
    gap: 5rem;
  }
  .projekty-box{
    margin-bottom: 25%;
  }
  header{
    padding: 3rem;
  }
  .nav-links{
    width: 100%;
  }
}

@media (min-width: 600px){
  .projekt{
    width: 40vw;
  }
}

@media (min-width: 800px){
  .nav-links a img{
    width: 100%;
  }
  .nav-links a{
    width: 3%;
  }
      .projekty-box {
        margin-bottom: 10%;
    }
}

@media (min-width: 1024px){
  .projekt{
    width: 25vw;
  }
}

.starry-background {
    overflow-x: hidden;
    overflow-y: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; 
    height: 300vh;
    background:
      /* malé hvězdy */
      radial-gradient(1.5px 1.5px at 20px 30px, white 90%, transparent 100%),
      radial-gradient(1.3px 1.3px at 50px 90px, #eee 90%, transparent 100%),
      radial-gradient(1.8px 1.8px at 130px 60px, white 90%, transparent 100%),
      radial-gradient(1.2px 1.2px at 180px 200px, #ddd 90%, transparent 100%),
      radial-gradient(1.6px 1.6px at 220px 150px, white 90%, transparent 100%),
      radial-gradient(1.1px 1.1px at 300px 300px, #ccc 90%, transparent 100%),
      radial-gradient(1.7px 1.7px at 370px 120px, white 90%, transparent 100%),
      radial-gradient(1.3px 1.3px at 410px 410px, #eee 90%, transparent 100%),
      radial-gradient(1.0px 1.0px at 450px 220px, white 90%, transparent 100%),
      radial-gradient(1.5px 1.5px at 490px 80px, #ddd 90%, transparent 100%),
      /* Střední hvězdy*/
      radial-gradient(2.5px 2.5px at 70px 120px, #fff 90%, transparent 100%),
      radial-gradient(2.0px 2.0px at 150px 180px, #eee 90%, transparent 100%),
      radial-gradient(2.6px 2.6px at 230px 250px, #fff 90%, transparent 100%),
      radial-gradient(2.3px 2.3px at 320px 100px, #ddd 90%, transparent 100%),
      radial-gradient(2.4px 2.4px at 400px 290px, #fff 90%, transparent 100%),
      radial-gradient(2.1px 2.1px at 480px 160px, #ccc 90%, transparent 100%),
      /* Velké hvězdy*/
      radial-gradient(3.5px 3.5px at 90px 310px, #fff 90%, transparent 100%),
      radial-gradient(3.0px 3.0px at 170px 350px, #eee 90%, transparent 100%),
      radial-gradient(3.6px 3.6px at 250px 400px, #fff 90%, transparent 100%),
      radial-gradient(3.2px 3.2px at 340px 220px, #ddd 90%, transparent 100%),
      radial-gradient(3.4px 3.4px at 420px 350px, #ffe100 90%, transparent 100%),
      radial-gradient(3.3px 3.3px at 510px 300px, #ccc 90%, transparent 100%);
    background-repeat: repeat;
    background-size: 600px 600px;
     animation: spin 250s linear infinite;
    z-index: 0;
    pointer-events: none;
  }

  @keyframes spin{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}