* {
    margin: 0;
    font-family: 'Montserrat', 'Open Sans', 'Raleway', sans-serif;
}

.fondo {
    background-color: #f8f4f4;

}

header {
    display: flex;
    align-content: center;
    background-color: #303c54;
    width: 100%;
    height: 5vh;

}

.ancho {
    align-items: center;
    display: flex;
    flex-direction: row;
    width: 70%;
    margin-left: auto;
    margin-right: auto;

}

.ancho h1 {
    margin-right: auto;
    color: white;
    font-size: large;
    font-size: x-large;

}

nav {
    display: flex;
    margin-left: auto;
    gap: 15px;
}

nav a {
    text-decoration: none;
    color: white;
    display: inline-block;
    transition: 1s
}

nav a:hover {
    transform: scale(1.1);
}

article {
    text-align: center;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    row-gap: 15px;
    margin-top: 20px;
}

article h1 {
    color: #303c54;
    font-size: x-large;
}

article p {
    font-size: smaller;
}

aside {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    text-align: center;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    grid-row-gap: 15px;
    padding-bottom: 40px;
}

aside h1 {
    grid-column: span 9;
    color: #303c54;
    margin-bottom: 10px;
    margin-top: 10px;
    font-size: x-large;
}

aside img {
    object-fit: cover;
    transition: 1s ease-out;
    width: 100%;
    height: 18vh;
    object-position: center;
}

aside img:hover {
    transform: scale(1.2);
}

aside div {
    width: 93%;
    height: 18vh;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 0 2px;
}

.fondo2 {
    background-color: #ecf0f1;
    width: 100%;
}

.formulario {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    color: #303c54;
    padding-bottom: 30px;

}

.formulario h1 {
    text-align: center;
    padding-top: 20px;
    margin-bottom: 20px;
    font-size: x-large;

}

form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 15px;

}

form div {
    display: flex;
    flex-direction: column;
}

.area {
    grid-column: span 3;
}

.boton {
    grid-column: 2;
}

label {
    margin-bottom: 10px;
}

input {
    height: 30px;
    border-radius: 5px;
    border: 1px solid rgb(168, 168, 168);
    box-shadow: 0 0 1px;
    padding: 5px;
}

select {
    height: 42px;
    border-radius: 5px;
    border: 1px solid rgb(168, 168, 168);
    box-shadow: 0 0 1px;
    padding: 5px;

}

textarea {
    height: 50px;
    border-radius: 5px;
    border: 1px solid rgb(168, 168, 168);
    box-shadow: 0 0 1px;
    margin-bottom: 15px;
    padding: 5px;

}

.boton {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    border: none;
    background-color: #349ce0;
    color: white;
    transition: 1s ease;
    height: 40px;
}

.boton:hover {
    transform: scale(1.05);
}

footer {
    background-color: #303c54;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
}

.pie {
    display: flex;
    flex-direction: row;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.pie div {
    display: flex;
    flex-direction: column;
    color: white;
    width: 33%;
    text-align: left;
}

.pie div strong {
    color: #349ce0;
}

.pie div p {
    font-weight: lighter;
    text-align: left;
}

footer hr {
    margin-top: 20px;
    border: 1px solid #27354e;
    margin-bottom: 20px;
}

.bajo {
    color: white;
}

.pie div p a {
    text-decoration: none;
    color: white;
    transition: 1s ease;
    display: inline-block;
}

.pie div p a:hover {
    transform: scale(1.1);
}


@media screen and (min-width: 576px) and (max-width: 992px) {


    .ancho {
        flex-direction: column;
        text-align: center;
    }

    .ancho h1 {
        margin-top: 10px;
        margin-left: auto;

    }

    .ancho nav {
        margin-right: auto;
        margin-top: 15px;
    }

    header {
        height: 9vh;

    }

    article {
        width: 90%;
        padding-top: 25px;
        padding-bottom: 50px;
    }


    aside {
        grid-template-columns: repeat(6, 1fr);
        width: 90%;
        padding-bottom: 70px;
    }

    #a,
    #g,
    #m {
        grid-column: 1;
    }

    #f,
    #l,
    #q {
        grid-column: 6;
    }

    #b,
    #h,
    #n {
        grid-column: 2;
    }

    #c,
    #i,
    #ñ {
        grid-column: 3;
    }

    #d,
    #j,
    #o {
        grid-column: 4;
    }

    #e,
    #k,
    #p {
        grid-column: 5;
    }

    .formulario {
        padding-top: 35px;
        width: 90%;
    }

    form {
        grid-template-columns: repeat(2, 1fr);
    }

    .area {
        grid-column: span 2;
    }

    .boton {
        grid-column: span 2;
        width: 33%;
    }

    .pie {
        width: 90%;
    }

    aside img {
        width: 100%;

    }
}

@media screen and (max-width: 576px) {
    .ancho {
        flex-direction: column;
        text-align: center;
    }

    .ancho h1 {
        margin-top: 10px;
        margin-left: auto;

    }

    .ancho nav {
        margin-right: auto;
        margin-top: 15px;
        flex-direction: column;
    }

    header {
        height: 25vh;

    }

    article {
        width: 90%;
        padding-top: 25px;
        padding-bottom: 50px;
    }


    aside {
        grid-template-columns: 1fr;
        width: 90%;
        padding-bottom: 70px;
    }

    #a,
    #b,
    #c,
    #d,
    #e,
    #f {
        grid-column: 1;
        display: block;
    }

    #m,
    #g,
    #l,
    #q,
    #h,
    #n,
    #i,
    #ñ,
    #j,
    #o,
    #j,
    #o,
    #j,
    #k,
    #p {
        display: none;
    }

    aside img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }


    aside div {
        width: 95%;
        margin-left: auto;
        margin-right: auto;
    }

    .formulario {
        padding-top: 35px;
        width: 90%;

    }

    form {
        grid-template-columns: 1fr;
        width: 100%;
        padding-bottom: 50px;

    }

    .area {
        grid-column: 1;
    }

    .boton {
        grid-column: 1;
        width: 33%;
    }

    .pie {
        width: 90%;
        flex-direction: column;
        row-gap: 40px;
    }

    .pie div {
        width: 100%;
    }

}