body {
    background-color: brown;
    background-image: url(l.jfif);
    cursor: move;
}

body:hover {
    cursor: move;
}

body:active {
    cursor: alias;
}

.txt {
    background-color: aliceblue;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: progress;
    width: 300px;
    margin: 0 auto;
    gap: 15px;
}

.txt h2 {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 20px;
}

.opçoes {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.opcao.btn {
    cursor: zoom-out;
    border: 2px solid #ccc;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
    user-select: none;
}

.opcao.btn input[type=radio] {
    display: none;
}

.opcao.btn:hover {
    border-color: #94c6fc;
    background-color: #f8f9fa;
}

.opcao.btn input[type=radio]:checked + span {
    font-weight: bold;
}

.opcao.btn:has(input[type="radio"]:checked) {
    border-color: #eaedf1;
    background-color: aqua;
    color: aquamarine;
}

.btn-enviar {
    width: 100%;
    padding: 10px;
    background-color: #b5d9ff;
    color: purple;
    border-radius: 8px;
    cursor: progress;
    font-size: 1rem;
    font-family: 'Times New Roman', Times, serif;
    transition: background-color 0.3s;
}

.btn-enviar:hover {
    background-color: aquamarine;
    cursor: cell;
}

.btn-enviar:active {
    cursor: not-allowed;
}


.txt {
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 300px;
    background-image: url(r.jfif);
}

.txt:active {
    cursor: help;
}

.txt h2 {
    animation: typing 3.5s steps(20) alternate, blink 5s step-end;
}

.opcao.btn {
    animation: typing 3.5s steps(20) alternate, blink 5s step-end;
}

.txt {
    animation: typing 3.5s steps(20) alternate, blink 5s step-end;
}

@keyframes typing {
    from { width: 0; }
    to { width: 300px;}
}

@keyframes blink {
    from, to {border-color: transparent;}
    50% {border-color: #38bdf8;}
}