body {
margin:0;
background:#0b0b0b;
color:white;
font-family:Arial, Helvetica, sans-serif;
}

#scene {
width:100%;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
}

#house {
width:1000px;
}

/* technologie */

.interaction {
cursor:pointer;
}

/* kruh divizí */

.division {
opacity:0.12;
transition:opacity 0.3s;
cursor:pointer;
}

.division:hover {
opacity:0.35;
}

.energy {
fill:#d4a017;
}

.systems {
fill:#2ecc71;
}

.security {
fill:#3498db;
}

.research {
fill:#9b59b6;
}

/* info panel */

#infoPanel {
position:fixed;
bottom:40px;
left:40px;
background:#111;
padding:20px;
border:1px solid #444;
max-width:300px;
}

#infoPanel button{
position:absolute;
top:10px;
right:10px;
background:none;
border:none;
color:white;
font-size:20px;
cursor:pointer;
}

.hidden {
display:none;
}

/* bazén animace */

rect[fill="#2a6f9b"] {
animation: waterMove 4s ease-in-out infinite;
}

@keyframes waterMove {

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-2px);
}

100%{
transform:translateY(0px);
}

}

/* okna animace */

rect[fill="#4c6a8a"] {
animation: windowGlow 6s ease-in-out infinite;
}

@keyframes windowGlow {

0%{
opacity:0.7;
}

50%{
opacity:1;
}

100%{
opacity:0.7;
}

}
#faistyBubble{
position:absolute;
bottom:120px;
left:50%;
transform:translateX(-50%);
background:#111;
padding:10px 15px;
border:1px solid #444;
border-radius:8px;
font-size:14px;
max-width:260px;
opacity:0;
transition:opacity 0.4s;
pointer-events:none;
}