body {background:#1f1f24 !important;padding-right: 10%;}
.w { position: relative;top:20px;left:10%;right:10%;color:white ;padding-right: 10%;font-size:100%;}
h1 {color:#62a92b; text-shadow: 0 0 3px gray;}
.s {color: #b4ffac;    text-shadow: 0 0 3px yellow;}
.l {line-height: 150%;  list-style-type: none; }
footer {margin-top:120px;border-top: 1px solid white;padding-top: 15px;font-size: 80%;padding-bottom:50px}
.i {  font-style: italic;}
.b {  font-size:150%}
a {  color:#FC5F9D}
.i2 {line-height: 150%;  list-style-type: none; }
.g {color:greenyellow;}
strong {color:greenyellow;font-weight: bolder}
small {color:#d76ba4}
.f{ width:280px;float:right;-webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 505%;}
.gtranslate_wrapper {position:absolute;right:20px}

.answer {
    display: none;  /* Odpovědi jsou skryté při načtení */
}

#titulek   {   position: relative;
}
#titulek:active:after {
    content:attr(title);
    padding:10px;
    border:0px solid #ccc;
    top:5px;
    right:10%;
    background: white;
    color:black;
}

.t   {  line-height:100% !important;  position: relative;

}
.t:active:after {
    content:attr(title);
    padding:1px;
    border:0px solid #ccc;
    top:5px;
    right:10%;
    background: white;
    color:black;
    line-height:100% !important;
}html {

     line-height: normal !important;

 }


/* MENU */
.menu {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 720px;
    margin: 0 auto;
    height: 10vh;
    list-style: none;
}

.menu li {
    width: 100px;
    height: 40px;
    transition: background-position-x 0.9s linear;
    text-align: center;

    a {
        font-size: 16px;
        color: greenyellow;
        text-decoration: none;
        transition: all 0.45s;
    }

    &:hover {
        background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEi%0D%0AIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhs%0D%0AaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0%0D%0AaD0iMzkwcHgiIGhlaWdodD0iNTBweCIgdmlld0JveD0iMCAwIDM5MCA1MCIgZW5hYmxlLWJhY2tn%0D%0Acm91bmQ9Im5ldyAwIDAgMzkwIDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggZmlsbD0i%0D%0Abm9uZSIgc3Ryb2tlPSIjZDk0ZjVjIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGlt%0D%0AaXQ9IjEwIiBkPSJNMCw0Ny41ODVjMCwwLDk3LjUsMCwxMzAsMAoJYzEzLjc1LDAsMjguNzQtMzgu%0D%0ANzc4LDQ2LjE2OC0xOS40MTZDMTkyLjY2OSw0Ni41LDI0My42MDMsNDcuNTg1LDI2MCw0Ny41ODVj%0D%0AMzEuODIxLDAsMTMwLDAsMTMwLDAiLz4KPC9zdmc+Cg==");
        animation: line 1s;
    }

    &:hover a {
        color: greenyellow;
    }

    &:not(:last-child) {
        margin-right: 30px;
    }
}

@keyframes line {
    0% {
        background-position-x: 390px;
    }
}