#objekt1 {
    transform: scale(0.5);
}


#svgContainer {
    position: relative;
    width: 95vw; /*100vW*/ 
    height: auto;
    overflow: visible;
}

#textBoxContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.textBox {
    position: absolute; 
    z-index: 999; 
}
.loop {
    width: 100px;
    height: auto; 
    border-radius: 10px; 
    margin-top: 10px;
}
.interactive-image {
    
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0; 
    transition: filter 0.3s ease-in-out;
}

#svgContainer.hoverEffectActive #kvetinace:hover,
#svgContainer.hoverEffectActive #kosikhlina:hover,
#svgContainer.hoverEffectActive #kosikseminka:hover,
#svgContainer.hoverEffectActive #konvice:hover,
#svgContainer.hoverEffectActive #poupátko1:hover,
#svgContainer.hoverEffectActive #poupátko2:hover,
#svgContainer.hoverEffectActive #poupátko3:hover,
#svgContainer.hoverEffectActive #poupátko4:hover,
#svgContainer.hoverEffectActive #poupátko5:hover,
#svgContainer.hoverEffectActive #LEDS1:hover,
#svgContainer.hoverEffectActive #sazenice1g:hover,
#svgContainer.hoverEffectActive #sazenice2g:hover,
#svgContainer.hoverEffectActive #sazenice3g:hover,
#svgContainer.hoverEffectActive #sazenice4g:hover,
#svgContainer.hoverEffectActive #sazenice5g:hover,
#svgContainer.hoverEffectActive #zivavoda:hover,
#svgContainer.hoverEffectActive #kytka1:hover,
#svgContainer.hoverEffectActive #kytka2:hover,
#svgContainer.hoverEffectActive #kytka3:hover,
#svgContainer.hoverEffectActive #kytka4:hover,
#svgContainer.hoverEffectActive #kytka5:hover,
#svgContainer.hoverEffectActive #hlína:hover {
    filter: brightness(110%); 
}
#lopata {
    position: fixed;
    z-index: 9999;
    cursor: pointer;
    display: none;
    z-index: 999;
    max-width: 250px;
    top: 600px;
    left: 590px;
    width: auto;
}
#zivavoda2 {
    position: fixed;
    z-index: 9999;
    cursor: pointer;
    display: none;
    z-index: 999;
    max-width: 270px;
    top: 530px;
    left: 150px;
    width: auto;
    cursor: pointer;
}

#zivavoda {
    cursor: pointer;
    opacity: 0; 
    transition: opacity 2s ease-in-out; /
}
#kosikhlina {
    cursor: pointer;
}
#seminka {
    position: fixed;
    z-index: 9999;
    cursor: pointer;
    display: none;
    z-index: 999;
    max-width: 150px;
    top: 650px;
    left: 880px;
    width: auto;
}

#konvicevoda {
    position: fixed;
    z-index: 9999;
    cursor: pointer;
    display: none;
    z-index: 999;
    max-width: 480px;
    top: 200px;
    left: 1100px;
    width: auto;
}
#kosikseminka {
    cursor: pointer; 
}
#LEDS1 {
    cursor: pointer;
}
#zivavoda,
#zivavoda2,
#konvicevoda,
#hlina,
#seminkarust,
#poupátko1,
#poupátko2,
#poupátko3,
#poupátko4,
#poupátko5,
#sazenice1g,
#sazenice2g,
#sazenice3g,
#sazenice4g,
#sazenice5g,
#kytka1,
#kytka2,
#kytka3,
#kytka4,
#kytka5,
#LEDS2,
#LEDS1,
#kytickyyg {
    display: none; 
    cursor: pointer;
}


#hlina {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}
#textBox3 {
    display: none;
}

#textBox4 {
    display: none;
}
#textBox5 {
    display: none;
}
#textBox6 {
    display: none;
}
#textBox7 {
    display: none;
}

#textBox8 {
    display: none;
}
#textBox9 {
    display: none;
}
#textBox10 {
    display: none;
}
#textBox11 {
    display: none;
}
#textBox12 {
    display: none;
}
#textBox13 {
    display: none;
}


#LEDS1 {
    animation: posunY 2s;
    position: absolute;
    top: -100px;
    left: 225px;
    
   
}

@keyframes posunY {
    0% {
        transform: translateY(-100%) translateX(225px);
    }
    100% {
        transform: translateY(0) translateX(225px);
    }
}

#tooltip {
    position: absolute;
    background-color: rgb(75, 173, 83);
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    font-size: 1vw;
    z-index: 9999;
    top: 5vw;
}

#LEDS1:hover #tooltip {
    display: block;
}
#textBox6 img.LEDS2box {
    width: 50vw; 
    max-width: 100%; 
    height: auto; 
}
#textBox6 {
    
    width: 80%; 
    margin: 0 auto; 
}
#end-button {
    position: fixed;
    top: 10%; 
    left: 50%;
    transform: translate(-50%, -50%); 
   
    opacity: 0;
    transition: opacity 1s ease-in-out ;
    
}
#end-button.show {
    opacity: 1; 
}
#continue-button {
    position: fixed;
    top: 15%; 
    left: 50%;
    transform: translate(-50%, -50%); 
   
    opacity:0;
    transition: opacity 1s ease-in-out ;
    z-index: 14000;
}
#continue-button.show {
    display: block;
    opacity: 1; 
}