:root {
    --color-principal: #11111f;
    --font-size-html: 18px;
}

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

body {
    background-color: white;
    font: normal 300 var(--font-size-html) 'Roboto', sans-serif;
    text-align: center;
}

section {
    margin-bottom: 50px;
}

i {
    margin: 0 5px 0 0;
}

article {
    text-align: left;
    padding: 20px;

    & p,
    h2,
    h3,
    ol {
        max-width: 800px;
        margin: auto;
    }

    & ol {
        padding-left: 40px;
    }
}

h3,
h2 {
    padding: 20px;
}

p {
    line-height: 1.5rem;
    padding-bottom: 30px;
}

.btn-contacto {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    border: 2px solid var(--color-principal);
    margin-top: 20px;
    text-decoration: none;
}

.btn-contacto i {
    margin: 10px;
}

a.btn-contacto:link,
a.btn-contacto:active,
a.btn-contacto:visited {
    color: var(--color-principal);
}

a.btn-contacto:hover {
    background-color: #14e147;
    border: 2px solid #14e147;
    color: white;

    & .icono-menu {
        color: white;
    }
}

.encabezado {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 35vh;
}

.img-article,
.fondo-encabezado {
    width: 100%;
    height: 40vh;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.img-article {
    z-index: -90;
    filter: blur(1px);
}

.fondo-encabezado {
    z-index: -89;
    background-color: #11111f;
    opacity: .6;
}

.title-article {
    font-size: 2rem;
}

.tabla-usuarios {
    /* border: 1px solid; */
    width: 100%;
    border-collapse: collapse;

    & tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    & tr:hover {
        background-color: var(--color-principal);
        color: white;
    }

    & th,
    td {
        border-bottom: 1px solid;
        padding: 15px;
    }

    & th {
        background-color: var(--color-principal);
        color: white;
    }
}

.contacto {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    text-align: left;

    & input[type=text],
    input[type=password],
    input[type=submit],
    input[type=date],
    input[type=email],
    input[type=number],
    input[type=file],
    textarea,
    select {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
    }
}

@media only screen and (min-width:768px) {

    .v-desktop {
        max-width: 800px;
        margin: auto;
    }

    .v-des-2col {
        display: grid;
        grid-template-columns: auto auto;
        grid-gap: 10px;
    }

    .login input[type=text],
    .login input[type=password],
    .login input[type=submit] {
        width: 350px;
    }
}