@font-face {
    font-family: 'regular';
    src: url('fonts/Roboto-Regular.ttf');
}

@font-face {
    font-family: 'bold';
    src: url('fonts/Roboto-Bold.ttf');
}

* {
    font-family: 'regular', sans-serif;
    touch-action: manipulation;
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    max-height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: none;
}

body.laska {
    background: url('img/pozadi.JPG') center/cover no-repeat;
}

#container {
    text-align: center;
    background: white;
    padding: 40px 20px;
    border-radius: 10px;
    width: clamp(280px, 84vw, 800px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    box-sizing: border-box;
}
#container-wrap {
    /* position: relative; */
    display: flex;
    flex-direction: column;
    height: max(550px, 80vh);
    width: 95%;
    align-items: center;
}

#container-wrap::before {
    content: '';
    height: 100%;
    margin-top: 50px;
    background: bottom center/contain no-repeat;
    display: block;
    width: calc(.9 * clamp(280px, 84vw, 800px));
    padding-inline: 40px;
    box-sizing: border-box;

}

#container-wrap::after {
    content: '';

    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: clamp(10px, 7vh, 80px);
    width: 100%;
    font-size: 2rem;
    text-align: center;
    font-family: 'bold', sans-serif;
    color: #00274d;

    background: white;
    padding: 20px 20px;
    border: 2px solid black;
    border-radius: 4px;
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.3);
    margin: 0;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;

}

.tooltip {
    font-size: .8rem;
    color: #6f909a;
    margin-bottom: 10px;
    display: block;
}

#container-wrap.stop::before {
    background-image: url('img/stop.webp');
}

#container-wrap.stop::after {
    content: 'STŮJ !!';
}


#container-wrap.think::before {
    background-image: url('img/think.webp');
}
#container-wrap.think::after {
    content: 'Kdopak jsi ?';
}


#container-wrap.run::before {
    background-image: url('img/run.webp');
}
#container-wrap.run::after {
    content: 'Prcháááááám';
}

#container-wrap.prosiim::before {
    background-image: url('img/prosiim.webp');
}
#container-wrap.prosiim::after {
    content: 'Budeš moje valentýnka ?';
    white-space: normal;
    width: min(400px, 70%);

}

#container-wrap.jupi::before,
#container-wrap.tebeeee::before {
    background-image: url('img/jupi.webp');
}
#container-wrap.jupi::after {
    content: 'Já to věděěěl !!';
}
#container-wrap.tebeeee::after {
    content: 'Já tebeeee milujuu !!';
}



button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    margin: 10px;
}

button:hover {
    background-color: #0056b3;
}

input {
    padding: 10px;
    font-size: 16px;
    margin: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 200px;
}

h1 {
    color: #333;
}

.srdicko {
    position: absolute;
    --c: red;
    aspect-ratio: 1;
    background:
    radial-gradient(at 70% 31%,var(--c) 29%,#0000 30%),
    radial-gradient(at 30% 31%,var(--c) 29%,#0000 30%),
    conic-gradient(from -45deg at 50% 84%,var(--c) 90deg,#0000 0) 
    bottom/100% 50% no-repeat;
}