/*ajutine*/
body {
  font-family: "Arial", sans-serif; /* Üldine font */
  background: linear-gradient(to bottom, #0a0a0a, #000000);/* Tume taust */
  color: #ffffff; /* Valge tekst */
  margin: 20px;
    padding: 20px;
  line-height: 1.6;
  text-align: center;
  /*background-image: url("Night-Sky-Wallpapers-HD-Free-Download.jpg");*/
  background-repeat: no-repeat;
  background position: center;
  background-attachment: fixed;
  min-height: 100vh;

}

.virmalised {
  background: #000000;
  
}

/* Tähtede kiht - väga palju tähti kogu ekraanile */
.tähed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    /* Väga palju väikseid tähti üle kogu ekraani */
    radial-gradient(1px 1px at 5% 5%, white, transparent),
    radial-gradient(1px 1px at 10% 15%, white, transparent),
    radial-gradient(1px 1px at 15% 25%, white, transparent),
    radial-gradient(1px 1px at 20% 35%, white, transparent),
    radial-gradient(1px 1px at 25% 45%, white, transparent),
    radial-gradient(1px 1px at 30% 55%, white, transparent),
    radial-gradient(1px 1px at 35% 65%, white, transparent),
    radial-gradient(1px 1px at 40% 75%, white, transparent),
    radial-gradient(1px 1px at 45% 85%, white, transparent),
    radial-gradient(1px 1px at 50% 95%, white, transparent),
    radial-gradient(1px 1px at 55% 10%, white, transparent),
    radial-gradient(1px 1px at 60% 20%, white, transparent),
    radial-gradient(1px 1px at 65% 30%, white, transparent),
    radial-gradient(1px 1px at 70% 40%, white, transparent),
    radial-gradient(1px 1px at 75% 50%, white, transparent),
    radial-gradient(1px 1px at 80% 60%, white, transparent),
    radial-gradient(1px 1px at 85% 70%, white, transparent),
    radial-gradient(1px 1px at 90% 80%, white, transparent),
    radial-gradient(1px 1px at 95% 90%, white, transparent),
    radial-gradient(1px 1px at 3% 12%, white, transparent),
    radial-gradient(1px 1px at 8% 22%, white, transparent),
    radial-gradient(1px 1px at 13% 32%, white, transparent),
    radial-gradient(1px 1px at 18% 42%, white, transparent),
    radial-gradient(1px 1px at 23% 52%, white, transparent),
    radial-gradient(1px 1px at 28% 62%, white, transparent),
    radial-gradient(1px 1px at 33% 72%, white, transparent),
    radial-gradient(1px 1px at 38% 82%, white, transparent),
    radial-gradient(1px 1px at 43% 92%, white, transparent),
    radial-gradient(1px 1px at 48% 8%, white, transparent),
    radial-gradient(1px 1px at 53% 18%, white, transparent),
    radial-gradient(1px 1px at 58% 28%, white, transparent),
    radial-gradient(1px 1px at 63% 38%, white, transparent),
    radial-gradient(1px 1px at 68% 48%, white, transparent),
    radial-gradient(1px 1px at 73% 58%, white, transparent),
    radial-gradient(1px 1px at 78% 68%, white, transparent),
    radial-gradient(1px 1px at 83% 78%, white, transparent),
    radial-gradient(1px 1px at 88% 88%, white, transparent),
    radial-gradient(1px 1px at 93% 98%, white, transparent),
    radial-gradient(1px 1px at 98% 14%, white, transparent),
    
    /* Keskmised tähed */
    radial-gradient(2px 2px at 7% 8%, white, transparent),
    radial-gradient(2px 2px at 17% 28%, white, transparent),
    radial-gradient(2px 2px at 27% 48%, white, transparent),
    radial-gradient(2px 2px at 37% 68%, white, transparent),
    radial-gradient(2px 2px at 47% 88%, white, transparent),
    radial-gradient(2px 2px at 57% 18%, white, transparent),
    radial-gradient(2px 2px at 67% 38%, white, transparent),
    radial-gradient(2px 2px at 77% 58%, white, transparent),
    radial-gradient(2px 2px at 87% 78%, white, transparent),
    radial-gradient(2px 2px at 97% 98%, white, transparent),
    radial-gradient(2px 2px at 12% 38%, white, transparent),
    radial-gradient(2px 2px at 22% 58%, white, transparent),
    radial-gradient(2px 2px at 32% 78%, white, transparent),
    radial-gradient(2px 2px at 42% 98%, white, transparent),
    radial-gradient(2px 2px at 52% 28%, white, transparent),
    radial-gradient(2px 2px at 62% 48%, white, transparent),
    radial-gradient(2px 2px at 72% 68%, white, transparent),
    radial-gradient(2px 2px at 82% 88%, white, transparent),
    radial-gradient(2px 2px at 92% 18%, white, transparent),
    
    /* Suured tähed */
    radial-gradient(3px 3px at 4% 6%, white, transparent),
    radial-gradient(3px 3px at 14% 26%, white, transparent),
    radial-gradient(3px 3px at 24% 46%, white, transparent),
    radial-gradient(3px 3px at 34% 66%, white, transparent),
    radial-gradient(3px 3px at 44% 86%, white, transparent),
    radial-gradient(3px 3px at 54% 16%, white, transparent),
    radial-gradient(3px 3px at 64% 36%, white, transparent),
    radial-gradient(3px 3px at 74% 56%, white, transparent),
    radial-gradient(3px 3px at 84% 76%, white, transparent),
    radial-gradient(10px 10px at 94% 96%, white, transparent),
    radial-gradient(3px 3px at 9% 56%, white, transparent),
    radial-gradient(3px 3px at 19% 76%, white, transparent),
    radial-gradient(3px 3px at 29% 96%, white, transparent),
    radial-gradient(15px 15px at 39% 26%, white, transparent),
    radial-gradient(3px 3px at 49% 46%, white, transparent),
    radial-gradient(3px 3px at 59% 66%, white, transparent),
    radial-gradient(3px 3px at 69% 86%, white, transparent),
    radial-gradient(3px 3px at 79% 16%, white, transparent),
    radial-gradient(3px 3px at 89% 36%, white, transparent),
    radial-gradient(3px 3px at 99% 56%, white, transparent);
  animation: starsTwinkle 5s ease-in-out infinite;
}

/* Tähtede sädelamine */
@keyframes starsTwinkle {
  0%, 100% { 
    opacity: 0.7; 
    filter: brightness(0.8);
  }
  25% { 
    opacity: 0.9; 
    filter: brightness(1.1);
  }
  50% { 
    opacity: 7; 
    filter: brightness(20.3);
  }
  75% { 
    opacity: 0.8; 
    filter: brightness(0.9);
  }
}

/* Virmalised */
.virmalised::before,
.virmalised::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150%;
  opacity: 0;

}

/* Rohelised virmalised */
.virmalised::before {
  background: 
    linear-gradient(120deg, 
      transparent 0%,
      rgba(34, 197, 94, 0.1) 10%,
      transparent 20%,
      rgba(34, 197, 94, 0.2) 30%,
      transparent 40%,
      rgba(34, 197, 94, 0.15) 50%,
      transparent 60%,
      rgba(34, 197, 94, 0.1) 70%,
      transparent 80%,
      rgba(34, 197, 94, 0.05) 90%,
      transparent 100%
    ),
    linear-gradient(80deg,
      transparent 0%,
      rgba(34, 197, 94, 0.05) 15%,
      transparent 25%,
      rgba(34, 197, 94, 0.15) 45%,
      transparent 55%,
      rgba(34, 197, 94, 0.1) 75%,
      transparent 85%
    );
  animation: virmalised1 20s ease-in-out infinite;
}

/* Sinised virmalised */
.virmalised::after {
  background: 
    linear-gradient(60deg,
      transparent 0%,
      rgba(59, 130, 246, 0.1) 5%,
      transparent 15%,
      rgba(59, 130, 246, 0.2) 35%,
      transparent 45%,
      rgba(59, 130, 246, 0.15) 65%,
      transparent 75%,
      rgba(59, 130, 246, 0.05) 85%,
      transparent 95%
    ),
    linear-gradient(100deg,
      transparent 0%,
      rgba(59, 130, 246, 0.08) 20%,
      transparent 30%,
      rgba(59, 130, 246, 0.12) 40%,
      transparent 60%,
      rgba(59, 130, 246, 0.1) 80%,
      transparent 90%
    );
  animation: virmalised2 18s ease-in-out infinite 5s;
}

@keyframes virmalised1 {
  0%, 100% { 
    opacity: 0;
    transform: translateX(-10%) translateY(5%) scale(1);
  }
  20% { 
    opacity: 0.4;
    transform: translateX(5%) translateY(-3%) scale(1.1);
  }
  40% { 
    opacity: 0.7;
    transform: translateX(12%) translateY(4%) scale(1.2);
  }
  60% { 
    opacity: 0.5;
    transform: translateX(2%) translateY(-6%) scale(1.15);
  }
  80% { 
    opacity: 0.3;
    transform: translateX(-8%) translateY(2%) scale(1.05);
  }
}

@keyframes virmalised2 {
  0%, 100% { 
    opacity: 0;
    transform: translateX(8%) translateY(-4%) scale(1);
  }
  25% { 
    opacity: 0.3;
    transform: translateX(-6%) translateY(3%) scale(1.1);
  }
  50% { 
    opacity: 0.6;
    transform: translateX(-12%) translateY(-2%) scale(1.25);
  }
  75% { 
    opacity: 0.4;
    transform: translateX(7%) translateY(4%) scale(1.15);
  }
}


 .sky {
            position: relative;
            width: 100%;
            height: 100%;
            
        }

        .star {
            position: absolute;
            background-color: white;
            border-radius: 50%;
            animation: twinkles 4s infinite;
        }

        .cloud {
            position: absolute;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 50%;
            filter: blur(5px);
        }

        .moon {
            position: relative;
            width: 80px;
            height: 80px;
            background: #f5f3ce;
            border-radius: 50%;
            top: 9%;
            left: 15%;
            box-shadow: 0 0 30px #f5f3ce;
        }

        .title {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 2.5rem;
            text-align: center;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
            z-index: 10;
        }

        @keyframes twinkles {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 1; }
        }

        @keyframes moveClouds {
            0% { transform: translateX(-100px); }
            100% { transform: translateX(calc(100vw + 100px)); }
        }




        .sky-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 101;
        }
        
        /* STARS - yellow with twinkle */
        .star {
            position: absolute;
            background: yellow;
            border-radius: 50%;
            animation: twinkle var(--twinkle-duration) infinite ease-in-out, 
                       moveStars var(--move-duration) linear infinite;
        }
        
        /* LETTERS - different colors, no twinkle */
        .letter {
            position: absolute;
            color: cyan;
            font-family: Arial, sans-serif;
            font-weight: bold;
            font-size: var(--letter-size);
            animation: moveStars var(--move-duration) linear infinite;
        }
        
        /* SYMBOLS - another color group */
        .symbol {
            position: absolute;
            color: yellow;
            font-family: Arial, sans-serif;
            font-weight: bold;
            font-size: var(--symbol-size);
            animation: moveStarsDiagonal var(--move-duration) linear infinite;
        }
        
        /* PLANETS - larger circles */
        .planet {
            position: absolute;
            background: orange;
            border-radius: 50%;
            animation: moveStarsArc var(--move-duration) linear infinite;
        }
        
        @keyframes twinkle {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 1; }
        }
        
        @keyframes moveStars {
            from { transform: translateY(200vh); }
            to { transform: translateY(-20vh); }
        }
        

                /* New animation 1: Diagonal sweep from left */
        @keyframes moveStarsDiagonal {
            from { transform: translate( -50vw, 200vh); }
            to { transform: translate( 50vw, -20vh); }
        }

        /* New animation 2: Gentle arc from right */
        @keyframes moveStarsArc {
            from { transform: translate( 100vw, 200vh) rotate(0deg); }
            to { transform: translate( -100vw, -20vh) rotate(360deg); }
        }
        .content {
            position: relative;
            z-index: 101;
            color: white;
            padding: 2rem;
            font-family: Arial, sans-serif;
            min-height: 150vh;
            
        }


      


.post-container {
  background-image: url('/static/Pildid/aldebaran-s-qtRF_RxCAo0-unsplash.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Kui tahad, et taust jääks paigal, kui leht liigub */
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  color: #ffffff; /* Teksti värv kontrasti jaoks */
  font-family: Arial, sans-serif;
}

.laululink{
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-all;
  white-space: normal;
}



div{
  max-width: 85vw;

}

iframe{
  max-width: 100%;
}

svg{
  position: relative;
  z-index: 101;
}

.topnav .icon {
  display: none;
}

.topnav {
  background: rgba(40, 0, 40, 0.5);
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 101;
  
  padding: 5px 5px;
}

.keelenav {
  font-family: "Lobster", sans-serif; /* Üldine font */
  color: rgb(238, 255, 0);
  font-size: large;
}

.keelenav a {
  font-family: "Poppins", sans-serif; /* Üldine font */
  font-size: 20px;
}

a{
  color: aqua;
  font-size: 20px;
}

ul {
    font-size:30px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    
  }
  li {
    float: left;
  }

  li a {
    display: inline-block;
    color: rgb(35, 240, 229);
    text-align: center;
    padding: 12px 12px;
    text-decoration: none;
  }

  li a:hover {
    color: #f3f708;
  }

  .parent {
    display: block;
    position: relative;
    float: left;
                  
  }
  
  
  
  .parent:hover>ul {
    display: block;
    
  }
  
  .child {
    display: none;
  }


  h1 {
    font-size:4vw;
    color: rgb(0, 255, 98);
    text-align: center;
    margin: 0;
    padding: 0;

  }
  
  h2 {
    font-size:35px;
    margin-bottom: 5px;
    color: #7fffd4;
    text-shadow: 0 0 10px rgba(127, 255, 212, 0.5);
    
  }
  
  h3{
    
    color: aqua;
  }

  .vahekirjeldustekst{
    color: #ffffff; /* Valge tekst */
  background-color: rgba(0, 0, 0, 0.6); 
  }
  p {
    
    font-size: 18px;
    line-height: 1.6;
    color: aquamarine;
    margin: 10px 0;
  }
  
  form{
    font-size: 3vw;
    color: aquamarine;
    text-align: center;
  }
  label{
    font-size: 1.5vw;
    color: aquamarine;
  }
 .vorm{
  font-size: 1.5vw;
  color: aquamarine;
  
 }

 span{
  font-size: 2vw;
  color: aquamarine;
 }

 input{
  border-radius: 15px;
  font-size: 1.5vw;
  color: aquamarine;
  background-color: #0c0c0c;
 }



.kaart {
    
    

    font-family: sans-serif;
}
.toor-json {
    
    
    font-family: monospace;
    
}




 input:hover{
  
  background-color: #720b72;
  box-shadow: 0 4px 8px rgba(3, 114, 77, 0.3);
  border-color: #2500f7;
  border: 7px solid transparent;
  transition: all 0.3s ease;
 }

 select{
  font-size: 1.5vw;
  color: aquamarine;
  background-color: #0c0c0c;
 }

 select:hover{
  background-color: #5900ff;
  box-shadow: 0 4px 8px rgba(3, 114, 77, 0.3);
  border-color: #2500f7;
  border: 7px solid transparent;
  transition: all 0.3s ease;
 }


    /* Peamine konteiner */
    .main-container {
      position: relative;
      z-index: 101;
      display: flex;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
      padding: 20px;
    }

    /* Üksiku lingikonteineri stiilid */
    .pildikonteiner {
      text-decoration: none;
      display: block;
      width: 23%;
      border-radius: 15px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      background: linear-gradient(145deg, #73ff00, #292929); /* Kaunis gradient */
      color: #ffffff;
      margin: 0 auto;
    }

    /* Hover-efekt */
    .pildikonteiner:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    }

    /* Pildi stiil */
    .pildikonteiner img {
      width: 100%;
      height: auto;
      border-radius: 15px 15px 0 0;
      object-fit: cover;
      text-align: center;
      display: block; margin: auto;
      max-width: 100%; /* Ensures it doesn't overflow */
      height: auto;
      object-fit: contain; 
    }

    /* Pealkiri */
    .pildikonteiner h2 {
      background-color: rgba(0, 0, 0, 0.6);
      color: aquamarine;
      padding: 15px;
      margin: 0;
      text-align: center;
      font-size: 1.8em;
      font-weight: bold;
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
      hyphens: auto;
      white-space: normal;  /* Allows text to wrap */
      word-wrap: break-word; /* Breaks long words */
      overflow-wrap: break-word;
      display: block;  
    }

    /* Paragrahv */
    .pildikonteiner p {
      padding: 15px;
      margin: 0;
      font-size: 1em;
      line-height: 1.6;
      color: #ffffff;
      
    }

    
    .pildikonteiner p br + a {
      display: inline-block;
      margin-top: 10px;
      color: aquamarine;
      font-weight: bold;
      text-transform: uppercase;
      font-size: 0.9em;
      text-decoration: underline;
    }


     /* Üksiku lingikonteineri stiilid */
     .pildikonteinerkaks {
      text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40%; /* Reduce width */
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: linear-gradient(145deg, #73ff00, #292929);
    color: #ffffff;
    margin: 20px auto;
    padding: 15px;
    }

    /* Hover-efekt */
    .pildikonteinerkaks:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    }

    /* Pildi stiil */
    .pildikonteinerkaks img {
      width: 100%;
    max-height: 250px; /* Prevents image from being too large */
    object-fit: contain;
    border-radius: 15px 15px 0 0;
    display: block;
    margin: auto;
    }

    /* Pealkiri */
    .pildikonteinerkaks h2 {
      background-color: rgba(0, 0, 0, 0.6);
      color: aquamarine;
      padding: 15px;
      margin: 0;
      text-align: center;
      font-size: 1.8em;
      font-weight: bold;
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
      hyphens: auto;
      white-space: normal;  /* Allows text to wrap */
      word-wrap: break-word; /* Breaks long words */
      overflow-wrap: break-word;
      display: block;  
    }

    .pildikonteinerkaks h1 {
      font-size: 2em;
      color: aquamarine;
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
      margin-bottom: 10px;
  }

    /* Paragrahv */
    .pildikonteinerkaks p {
      font-size: 1em;
    line-height: 1.6;
    color: #ffffff;
    margin-bottom: 15px;
      
    }

    
    .pildikonteinerkaks p br + a {
      display: inline-block;
      margin-top: 10px;
      color: aquamarine;
      font-weight: bold;
      text-transform: uppercase;
      font-size: 0.9em;
      text-decoration: underline;
    }   


    /* Buttons container (Flexbox for alignment) */
.button-container {
  display: flex;
  justify-content: space-between; /* Ensures buttons stay in one line */
  gap: 10px;
  padding: 10px;
  flex-wrap: wrap; /* Ensures buttons wrap on smaller screens */
}









 img {
  width: 200px; /* Set the width of the image */
  height: auto; /* Maintain the aspect ratio */
  text-align: center;
  
  
}

  .teekond  {
    width: auto; /* Set the width of the image */
    height: auto; /* Maintain the aspect ratio */
    vertical-align: right;
    
  }


img.otsingupilt  {
  width: 500px; /* Set the width of the image */
  height: auto; /* Maintain the aspect ratio */
  
  
}

h1 img{
  width: 100px; /* Set the width of the image */
  height: auto; /* Maintain the aspect ratio */
  text-align: center;
}

.grid-container {
  display: grid;
  grid-template-columns: max-content;
  max-width: 100%;
  overflow-x: auto; 
}





.grid-item{
  max-width: 100%;
}

.grid-item input[type="radio"]{
  width: 1vw;
  height: 1vw;
}


/* The side navigation menu */
.sidenav {
  
  
  float: right;
  
  
  
    
    
    
   
  
  
  
  
  
}

.Autor {
  font-size: 16px;
    color: #f706eb;
    margin-top: 5px;
    text-align: center;
}

.Autor:hover{
  color: #922e74;
  
}

.grid-item input[type="radio"]{
  width: 5vw;
  height: 5vw;
}

input[type="radio"]{
  width: 3vw;
  height: 3vw;
}

.postihinne{
  color: red;
}

button{
  border-radius: 10px;
  background: linear-gradient(145deg, #73ff00, #292929);
  border: none;
  color: yellow;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: block;
  margin: 10px auto;
}

button.teavitused {
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: yellow;
  padding: auto auto;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: block;
  margin: auto auto;
}

button:hover{
  color: #f1f1f1;
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(127, 255, 212, 0.3);
  border-color: #7fffd4;
  
  border: 10px solid transparent;
  transition: all 3s ease;
}

a.nupp{
  border-radius: 25px;
  background: linear-gradient(145deg, #2bff00, #020202);
  color: rgb(255, 255, 255);
  padding: 12px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.3s ease;
  
}

.hidden {
  display: none;
}

#notificationsDropdown {
  position: absolute;
  background: #333;
  color: white;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}



.kasutajanupp{
  border-radius: 25px;
  background: linear-gradient(145deg, #00f7ff, #020202);
  color: rgb(255, 255, 255);
  padding: 12px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.kasutajanupp:hover
{
  color: #f1f1f1;
  background-color: #5a5a9f;
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(3, 114, 77, 0.3);
  border-color: #2500f7;
  border: 100px solid transparent;
  transition: all 3s ease;
}

.nupp:hover
{
  color: #f1f1f1;
  background-color: #5a5a9f;
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(3, 114, 77, 0.3);
  border-color: #2500f7;
  border: 100px solid transparent;
  transition: all 3s ease;
}

a.nupp:hover{
  color: #f1f1f1;
  background-color: #5a5a9f;
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(3, 114, 77, 0.3);
  border-color: #2500f7;
  border: 20px solid transparent;
  transition: all 3s ease;
}


/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 20px;
}

.vasaksidenav {
  
  width: 160px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  
  left: 0;
  background-color: rgb(47, 155, 149);
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
}

/* The navigation menu links */
.vasaksidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: rgb(245, 229, 12);
  display: block;
}

/* When you mouse over the navigation links, change their color */
.vasaksidenav a:hover {
  color: #f1f1f1;
}

/* Style page content */
.main {
  margin-left: 153px; /* Same as the width of the sidebar */
  padding: 0px 0px;
}

.kommentaarid{
  display: none;
}

.kommentaaride-nupud {
  display: flex;
    justify-content: flex-start;  /* Nupud kõrvuti */
    flex-wrap: wrap; 
    justify-content: center;
}

.kommentaaride-nupud button {
  margin: 0;  /* Kõrvaldab nuppude vahelise vahe */
}

.kommentaarid p span {
  font-weight: bold;
  color: aquamarine;
  word-wrap: break-word;
}

.kommenteeri{
  display: none;
}

.peida{
  display: none;
}

.grid-item label{
  font-size: 4vw;
}

th{
  font-size: 16px;
}

.leitudkasutajad{
  text-align: left;
}

/*VÄIKE VERSIOON*/

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

  .post-container {
    max-width: 90%;
}

  label{
    font-size: 6vw;
  }

  .sidenav {
  
  
    float: none;
    
    
    
      
      
      
     
    
    
    
    
    
  }

    /*navi*/

    ul {
      font-size:6vw;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    ul li {
      width: 100%;
      text-align: center;
    }

    ul li a {
      padding: 5px 0;
    }

   

    h1 {
      font-size:7vw;
      text-align: center;
    }
    
    h2 {
      font-size:6vw;
      text-align: center;
      
    }
    
    p {
       font-size: 18px;
    line-height: 1.6;
    color: #ffffff;
    margin: 10px 0;
    }

    a {
      font-size: 5vw;
      
    }


    form{
      font-size: 4vw;
    }
   .vorm{
    font-size: 5vw;
   }
  
   span{
    font-size: 4vw;
   }
  
   input{
    font-size: 4vw;
   }
  
   select{
    font-size: 4vw;
   }

   .linnukesekast input[type="checkbox"] {
    width: 5vw; 
    height: 5vw;
    align-items: center;
   }

   .pildikonteiner {
    width: 48%; /* Two containers per row */
    margin-bottom: 20px;
  }

  .pildikonteinerkaks {
    width: 48%; /* Two containers per row */
    margin-bottom: 20px;
  }

   img {
    width: 350px; /* Set the width of the image */
    height: auto; /* Maintain the aspect ratio */
    vertical-align: right;
    
  }



  .grid-container {
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr; 
     box-sizing: border-box;

    
  }


  .grid-item input[type="radio"]{
    width: 5vw;
    height: 5vw;
  }

  input[type="radio"]{
    width: 5vw;
    height: 5vw;
  }
  
  .grid-item label{
    font-size: 8vw;
  }

  .pildikonteinerkaks {
    width: 90%;
}
.button-container {
    flex-direction: column;
    align-items: center;
}
  
  }
     

  /*ajutine*/
  @media screen and (max-width: 600px) {
    .topnav a, .dropdown .dropbtn {
      display: none;
    }
    .topnav a.icon {
      text-align: center;
      display: block;

    }
  }
  
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 10;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: center;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
    }
  }

  @media only screen and (max-width: 480px) {
    .pildikonteiner {
      width: 100%; /* One container per row */
    }
    .pildikonteinerkaks {
      width: 100%; /* One container per row */
    }
  }

  @media screen and (max-height: 450px) {
    
    .vasaksidenav a {font-size: 18px;}
  }