body, html {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    
}

@keyframes float {
  0% {
    transform: translateY(-5vh);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(105vh);
    opacity: 0;
  }
}

.star {
  position: absolute;
  top: -10px;
  background-color: rgb(109, 128, 177);
  border-radius: 50%;
  opacity: 0.3;
  animation-name: float;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* sizes */
.size1 { width: 2px; height: 2px; }
.size2 { width: 3px; height: 3px; }
.size3 { width: 4px; height: 4px; }

.KrevetakPozadi {
    position: fixed; /* Fixed zajistí, že pozadí neuteče */
    inset: 0;
    z-index: -1;
}
.KrevetakPozadi img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Vyplní obrazovku bez deformace */
}

#TextATlacitko {
    position: absolute;
    top: 40%;
    left: 20vw; /* Odsazení zleva */
    width: 38vw; /* Šířka prostoru pro text */
    display: flex;
    flex-direction: column;
    gap: 2px; /* Mezera mezi textem a tlačítkem */
    z-index: 20;
}

.TlacitkoContainer {
    align-self: flex-end; /* Toto ho hodí na pravou stranu pod text */
    font-family: HostinaText;
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    padding: 8px 18px;

    border: none;
    cursor: pointer;
    color: rgb(37, 39, 93);
    
    background-color: transparent; 
    background-image: url('extra/hladbtn.png');
    background-repeat: no-repeat; 
    background-size: 100% 100%;
    background-position: center;

    opacity: 0; /* Nechte 0, pokud ho odkrýváte v JS */
    transition: opacity 0.5s ease, transform 0.2s;
    white-space: nowrap;
}


@font-face{
    font-family: HostinaText;
    src: url(fonts/OUTFIT-MEDIUM.TTF) format('truetype');
}

#demo {
    margin: 0;
    color: rgb(215, 250, 249);
    font-family: HostinaText;
    font-size: clamp(24px, 4.5vw, 66px);
    line-height: 1.1;
    text-shadow: 0 0 15px rgba(184, 223, 253, 0.4);
    text-align: left;
}

.GifKreveta {
    position: absolute;
    right: 5vw; /* Odsazení zprava */
    top: 50%;
    transform: translateY(-50%); /* Vycentrování na střed výšky */
    width: 35vw;
    max-width: 500px;
    height: auto;
    z-index: 10;
    pointer-events: none;
    animation: wave 1s ease-in-out infinite alternate;
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

@keyframes wave {
    0% { transform: translateY(-50%) translateY(0); }
    100% { transform: translateY(-50%) translateY(-30px); }
}

.wave-container {
    position: relative;
    width: 300px;
    height: 300px;
}

#fade-to-black {
    position: fixed;
    inset: 0;
    background: black;
    z-index: 9999;

    opacity: 0;
    pointer-events: none;
    transition: opacity 1.2s ease;
}

#fade-to-black.active {
    opacity: 1;
    pointer-events: all;
}