152 lines
2.7 KiB
CSS
152 lines
2.7 KiB
CSS
html {
|
|
box-sizing: border-box;
|
|
font-size: 16px;
|
|
}
|
|
*, *:before, *:after {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
body {
|
|
background: #fdf6e3;
|
|
font-family: Arial, sans-serif;
|
|
text-align: center;
|
|
color: #222;
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Encabezado */
|
|
h1 {
|
|
margin-top: 2.7rem;
|
|
color: #222;
|
|
font-size: clamp(1.5rem, 4vw, 2.7rem);
|
|
}
|
|
|
|
/* Marcador */
|
|
#scoreboard {
|
|
font-size: clamp(1.05em, 2.5vw, 1.2em);
|
|
margin: 0.9em 0 1.8em 0;
|
|
}
|
|
|
|
/* Botones de elección */
|
|
#choices {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1em;
|
|
justify-content: center;
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
#choices button {
|
|
font-size: clamp(1em, 3vw, 1.3em);
|
|
margin: 0 0.4em;
|
|
padding: 0.9em 2em;
|
|
border: none;
|
|
border-radius: 0.7em;
|
|
background: #6ab04c;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
min-width: 100px;
|
|
max-width: 90vw;
|
|
box-shadow: 0 2px 6px #eaeaea;
|
|
}
|
|
|
|
#choices button:hover {
|
|
background: #218c5a;
|
|
}
|
|
|
|
/* Resultado */
|
|
#result {
|
|
font-size: clamp(1.05em, 2vw, 1.2em);
|
|
margin: 1.1em 0 1.7em 0;
|
|
min-height: 2em;
|
|
}
|
|
|
|
/* Reset */
|
|
#reset-btn {
|
|
font-size: clamp(1em, 2vw, 1.15em);
|
|
padding: 0.6em 2em;
|
|
border: none;
|
|
border-radius: 0.5em;
|
|
background: #f76707;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
margin-top: 1.1em;
|
|
box-shadow: 0 2px 6px #eaeaea;
|
|
}
|
|
#reset-btn:hover {
|
|
background: #c44210;
|
|
}
|
|
|
|
/* ======= Pantallas pequeñas (móviles) ======= */
|
|
@media (max-width: 600px) {
|
|
h1 {
|
|
margin-top: 5vw;
|
|
font-size: clamp(1.2rem, 7vw, 2rem);
|
|
}
|
|
#scoreboard {
|
|
font-size: clamp(1em, 6vw, 1.35em);
|
|
margin-top: 2vw;
|
|
margin-bottom: 5vw;
|
|
}
|
|
#choices {
|
|
gap: 3vw;
|
|
margin-bottom: 5vw;
|
|
}
|
|
#choices button {
|
|
font-size: clamp(1em, 6vw, 2em);
|
|
padding: 1.2em 6vw;
|
|
border-radius: 7vw;
|
|
min-width: 48vw;
|
|
}
|
|
#result {
|
|
font-size: clamp(1em, 7vw, 1.5em);
|
|
margin-bottom: 6vw;
|
|
}
|
|
#reset-btn {
|
|
font-size: clamp(1em, 8vw, 2em);
|
|
padding: 1em 15vw;
|
|
border-radius: 8vw;
|
|
margin-top: 5vw;
|
|
}
|
|
}
|
|
|
|
/* ===== Pantallas muy grandes ===== */
|
|
@media (min-width: 1200px) {
|
|
h1 {
|
|
font-size: clamp(2rem, 2vw, 3rem);
|
|
}
|
|
#scoreboard {
|
|
font-size: clamp(1.2em, 2vw, 1.5em);
|
|
margin-bottom: 2.5em;
|
|
}
|
|
#choices button {
|
|
font-size: clamp(1.2em, 2vw, 1.5em);
|
|
padding: 1em 3em;
|
|
border-radius: 1em;
|
|
min-width: 120px;
|
|
max-width: 320px;
|
|
}
|
|
#reset-btn {
|
|
font-size: clamp(1.12em, 2vw, 1.25em);
|
|
padding: 0.8em 2.5em;
|
|
border-radius: 0.8em;
|
|
}
|
|
}
|
|
|
|
/* ===== Pantallas muy pequeñas (<350px) ===== */
|
|
@media (max-width: 350px) {
|
|
#choices {
|
|
flex-direction: column;
|
|
gap: 5vw;
|
|
}
|
|
#choices button {
|
|
min-width: 60vw;
|
|
padding: 1em 7vw;
|
|
}
|
|
#reset-btn {
|
|
padding: 1em 8vw;
|
|
}
|
|
} |