/* ----------------------------------------------------
   IMPORTAÇÃO DE FONTE
---------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,900&display=swap');


/* ----------------------------------------------------
   RESET CSS 
---------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ----------------------------------------------------
   CONFIGURAÇÃO GLOBAL DA PÁGINA
---------------------------------------------------- */

html {
    min-height: 100%;
}

body {
    min-height: 100vh;                    
    display: flex;
    flex-direction: column;
    font-family: 'Poppins';              
    background: url('fundoAzul02.jpg');   
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}


/* ----------------------------------------------------
   HEADER (CABEÇALHO)
---------------------------------------------------- */
header {
    background-color: #000;
    color: #fff;
    padding: 1rem;
    text-align: center;
}


/* ----------------------------------------------------
   ÁREA PRINCIPAL (CONTEÚDO)
---------------------------------------------------- */
main {
    flex: 1;                              
    padding: 2rem;
}


/* ----------------------------------------------------
   FOOTER (RODAPÉ)
---------------------------------------------------- */
footer {
    background-color: #000;
    padding: 1rem;
    color: #fff;
    text-align: center;
}


/* ----------------------------------------------------
   ESTILO DO LOGO NO HEADER
---------------------------------------------------- */
.logo {
    text-decoration: none;
    color: #fff;
}

.destaque-logo {
    color: rgb(90, 251, 162);              
}

label {
    color: #000;
    font-weight: bold;
}

/* ----------------------------------------------------
   CAIXA PRINCIPAL ONDE FICAM TODOS OS EVENTOS
---------------------------------------------------- */
#box-group {
    background-color: #fff;
    max-width: 700px;
    margin: auto;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    justify-content: center;
    border-radius: 0.4rem;
    color: #fff;
    gap: 1rem;
    align-items: center;
}

/* ----------------------------------------------------
   EVENTOS 1 E 3: Botões (Click e MouseDown)
---------------------------------------------------- */
.box:nth-of-type(1) {
    width: 100%;
    max-width: 350px;
}

.box:nth-of-type(3) {
    width: 100%;
    max-width: 350px;
}

#btn-click,
#btn-pressiona {
    padding: 1rem;
    width: 100%;
    cursor: pointer;
    background: linear-gradient(#0020ed, #132171);
    color: #fff;
    border: none;
    border-radius: 0.2rem;
    font-size: 1rem;
    font-weight: bold;
}

#btn-click:hover,
#btn-pressiona:hover {
    background: linear-gradient(#0020ed, #293cab);
}

/* ----------------------------------------------------
   EVENTO 2: Caixa do MouseOut
---------------------------------------------------- */
.box:nth-of-type(2) {
    background-color: #000;
    width: 100%;
    max-width: 350px;
    padding: 1rem;
    display: flex;
    justify-content: center;
    font-weight: bold;
    border-radius: 0.2rem;
}

/* ----------------------------------------------------
   EVENTO 4: Campo do KeyDown
---------------------------------------------------- */
.box:nth-of-type(4) {
    width: 100%;
    max-width: 350px;
}

/* Input do evento */
input {
    border-radius: 0.2rem;
    border: none;
    border: 0.1rem solid gray;
    padding: 0.4rem;
    font-size: 1rem;
    width: 100%;
    margin: 0.2rem 0rem;
}

input:focus {
    outline: 2px solid #4b58e8;
}

/* ----------------------------------------------------
   CAIXA DE RESULTADOS (mostra spans)
---------------------------------------------------- */
#box-result {
    display: none;
}

#box-result > div {
    color: #ebebeb;
    background-color: #000000;
    margin-top: 20px;
    padding: 1rem;
    font-weight: bold;
    width: 100%;
    text-align: center;
    word-wrap: break-word;
    border-radius: 0.2rem;
}

/* ----------------------------------------------------
   EVENTO 5: SELECT (Change)
---------------------------------------------------- */
.box:nth-of-type(5) {
    display: flex;
    width: 100%;
    max-width: 350px;
    flex-direction: column;
}

.box:nth-of-type(5) select {
    padding: 0.4rem;
    border-radius: 0.2rem;
    font-size: 1rem;
    margin-top: 0.2rem;
}

select:focus {
    outline: none;
}

/* ----------------------------------------------------
   EVENTO 9: FORMULÁRIO (Submit)
---------------------------------------------------- */
form {
    width: 100%;
    max-width: 350px;
}

.form-button {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.2rem;
}

#btn-enviar {
    padding: 1rem 2rem;
    margin-top: 0.4rem;
    max-width: 350px;
    cursor: pointer;
    border: none;
    border-radius: 0.2rem;
    background-color: #1b6d5a;
    color: #fff;
    font-weight: bold;
    font-size: 1rem;
    transition: 0.25s;
    margin-bottom: 1rem;
}

#btn-enviar:hover {
    transform: scale(1.02);
    background-color: #1b6d5adc;
}

/* ----------------------------------------------------
   EVENTO 10: Imagem (Duplo Clique)
---------------------------------------------------- */
#img-title {
    text-align: center;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    color: #000;
}

#img-peterParker,
#img-spiderman {
    width: 100%;
    max-width: 350px;
    max-height: 500px;
    border-radius: 0.2rem;
    border: 0.15rem solid #000;
    cursor: pointer;
    margin-top: 1.8rem;
    transition: 0.25s;
}

#img-peterParker:hover {
    box-shadow: 2px 2px 12px #4f9effc6;
    transform: scale(1.02);
}

#img-spiderman {
    display: none;
}

#img-spiderman:hover {
    display: none;
    box-shadow: 2px 2px 12px #f40d0d6f;
    transform: scale(1.02);
}

/* ----------------------------------------------------
   EVENTO 12: Contador
---------------------------------------------------- */
.box:nth-of-type(9) {
    display: flex;
    flex-direction: column;
    max-width: 350px;
    width: 100%;
}

#btn-contador {
    padding: 1rem 2rem;
    border: none;
    background: linear-gradient(#0020ed, #132171);
    color: #fff;
    cursor: pointer;
    transition: 0.25s;
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 1rem;
}

#btn-contador:hover {
    background: linear-gradient(#0020ed, #293cab);
}

#spanContador {
    font-weight: bold;
    color: #000;
    display: none;
    text-align: center;
}