* {
    margin: 1px;
    padding: 0;
}
nav {
    background: #e5e7e9;
}
body {
    background: #FFFFFF;
    font-size: 18px;
    font-family: serif;
}
footer {
    background: #fdfefe;
    color: blue;
    font-style: oblique;
    font-family: serif;
}
h1 {
    color: #ECEFF1;
    font-size: 1.8em;
    background: #424242;
    opacity: 0.8;
    border-radius: 20px;
    margin-bottom: 0;
}
h3 {
    color: grey;
    font-size: 1.6em;
    background: #fdfefe;
}
h4 {
    color: rgb(21, 182, 45);
    font-size: 1.4em;
}
h5 {
    color: rgba(241, 133, 10, 0.95);
    font-size: 1.3em;
}
h6 {
    color: #0a0a0a;
    font-size: 1.1em;
}
p {
    font-size: 1em;
    color: #666666;
}
label {
    font-size: 1em;
    color: rgb(36, 119, 149);
    padding: 10px;
}
input {
    color: darkblue;
}
input:focus,
textarea {
    border: 3px solid #09B777;
}
textarea {
    resize: both;
}
textarea[type="text"] {
    font-size: 1em;
    margin-bottom: 5px;
    text-align: center;
}
.fantom {
    color: #fdfefe;
    border: 0px solid #fdfefe;
}
input[type="submit"] {
    font-size: 1.1em;
    margin-bottom: 5px;
    background: #2B59A1;
    color: #fff;
    border: 0;
    padding: 0.3em;
    text-decoration: none;
    text-shadow: 1px 1px 0px #000;
    border-radius: 20px;
}
input[type="submit"]:hover {
    background: #94D5FF;
    cursor: pointer;
    opacity: 1;
}
input[type="submit"]:active {
    transform: scale(0.92);
}
input[type="button"] {
    font-size: 1.1em;
    margin-bottom: 5px;
    background: rgba(36, 119, 149, 0.80);
    color: #fff;
    padding: 0.3em;
    text-decoration: none;
    text-shadow: 1px 1px 0px #000;
    border-radius: 20px;
}
input[type="button"]:hover {
    background: #15709A;
    cursor: pointer;
    opacity: 1;
}
input[type="email"],
input[type="password"],
input[type="text"] {
    font-size: 1em;
    margin-bottom: 5px;
    text-align: center;
}
input[type="checkbox"] {
    font-size: 1em;
    color: rgb(36, 119, 149);
}
a:link {
    text-decoration: none;
    color: #666666;
}
table.table {
    font-size: 1.2rem;
    font-weight: 100;
    width: 100%;
    border: 0px solid #aa4;
    background: #fdfefe;
}
th {
    width: 25%;
    text-align: center;
    font-style: normal;
    vertical-align: middle;
    border: 0px solid #440;
    padding: 0.3em;
    background: #f8f9f9;
    color: #000033;
}
td {
    width: 25%;
    text-align: center;
    font-style: italic;
    vertical-align: middle;
    border-spacing: 1px;
    border: 0px solid #440;
    padding: 0.3em;
    border-bottom: 1px solid #e5e7e9;
    color: #666666;
    background: #fdfefe;
}
tbody {
    font-size: 1em;
}

/* Colores */
.tomate { background: #d5303e; }
.rojo { background: #CD0019; }
.naranja { background: #FF8000; }
.verde { background: #00FF00; }
.verdex { background: #7FFF00; }
.ve1 { background: #12EA00; }
.ve2 { background: #00CA4E; }
.ve3v { background: #CDFFE0; }
.verdev { background: #C0EFF5; }
.amarillo { background: #FFF200; }
.limonv { background: #BFFF00; }
.grisv { background: #D7E5EB; }
.gris2v { background: #E1E1E1; }
.rosav { background: #F6E2E2; }
.rosa2v { background: #E86B78; }
.rosa3v { background: #FF1493; }
.cafev { background: #FFF2D7; }
.azulv { background: #2B59A1; }
.azul2v { background: #94D5FF; }
.moradov { background: #9B99FF; }
.morado2v { background: #8A2BE2; }
.mostazav { background: #FFB401; }

select {
    font-size: 1em;
}
img {
    border-radius: 10px;
}
.contenedor {
    width: 80%;
    max-width: 1000px;
    margin: 0 auto;
}

/* RESPONSIVE */
@media screen and (max-width: 800px) {
    nav {
        flex-direction: column;
    }
    section {
        padding: 1rem;
    }
}
@media screen and (max-width: 400px) {
    nav {
        flex-direction: column;
    }
    section {
        padding: 1rem;
    }
    .contenedor {
        width: 100%;
        height: auto;
        font-size: 1rem;
    }
    img,
    .chica,
    .logo,
    .menu,
    .anuncio,
    .intro,
    .mini,
    .mediana,
    .grande,
    .xl,
    .xlx {
        width: 100%;
        height: auto;
    }
    .mini { width: 4rem; }
    .mediana { width: 8rem; }
    .grande { width: 9rem; }
    .xl { width: 12rem; }
    .xlx { width: 20rem; }
    .logo { width: 9rem; }
    .menu { width: 8em; }
    .anuncio { width: 15em; }
    .intro { width: 49%; }

    .uno { background: #FE81D8; }
    .dos { background: #0DDCFC; }
    .tres { background: #FFE422; }
    .cuatro { background: #8B8B8B; }
    .cinco { background: #FF0000; }
    .seis { background: #5579a7; }
    .siete { background: #FF13B8; }
    .ocho { background: #000000; }

    .tableo { overflow-x: auto; }
    table {
        width: 100%;
        border-collapse: collapse;
        min-width: 400px;
    }
    th,
    td {
        padding: 12px;
        border: 1px solid #ccc;
        text-align: center;
    }
}