/*centramos el titulo*/
h1, p {
    text-align: center; /*centramos*/
    margin: 1em auto; /*1em->vertical y auto->horizontal*/
}

/*selector de ID*/
#title {
    color: azure;
    font-family: 'Courier New', Courier, monospace;
    font-size: 45px;
    font-weight: bold;  /*texto en negrita*/
    /*auto es para que este centrado a los costados dentro de su elemento contenedor*/
    margin: 50px auto 20px auto;    
}

#description {
    color: antiquewhite;
    font-family: monospace;
    font-size: larger;  /*tamaño del texto (larger: más grande)*/
    /*damos un margen a cada costado de mi subtitulo*/
    margin: 0px auto 40px auto;
}

/*trabajamos con el body*/
body {
    background-color: #4b5092;
    font-family: serif;
    font-size: 20px;
    width: 100%;
    height: 100vh;
    margin: 0; /*nos deshacemos de la barra horizontal*/
    color: azure;
    font-weight: 500;   /*ancho de la letra*/
    /*
    background-image: url(img/imagen-de-fondo2.jpg);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    */
}

div {
    background-color: rgb(194, 150, 92);
    opacity: 0.8;
    width: 60vw;
    height: 1025px;
    margin: 0 auto; /*centramos el div*/
    /*CAMBIOS...*/
    display: flex;
    justify-items: center;
    align-items: center;
    padding-left: 20px;
}

/*selector de tipo*/
form {
    margin: 0 auto; /*centramos el form*/
    max-width: 500px;
    min-width: 300px;
    width: 60vw;
    padding: 0 0 2em 0; /*le damos un padding en la parte inferior al form 
    para que el boton de envio no este pegado a su elemento padre (body)*/
}

/*hacemos que los elementos label, input, y select sean de tipo bloque*/
label, input, select {
    display: block;
    margin: 0.5rem 0; /*le damos un margen en el relleno vertical para separarlos un poco*/
}

/*selectores de clase*/
.radioLinea, .boxLinea {
    display: inline;    /*hacemos que los inputs de tipo radio y checkbox sean inline(elementos en linea)*/
    margin-top: 0px;
}

/*selector de atributo para dar una separacion de los ultimos inputs de tipo radio y
checkbox*/
input[value="segundo"], input[value="3"] {
    margin-bottom: 25px;
}

/*selectores ID para los inputs*/
#name, #email, #number {
    /*width: 100%;*/
    width: 500px;
    height: 35px;
    border-radius: 0.3rem;
    margin-bottom: 25px;    /*despues de cada input damos un margen para separarlos*/
    font-size: medium;
    margin-right: 50px;
    min-width: 200px;
}

/*selector de ID*/
#name-label {
    padding-top: 40px; /*agregamos un padding en la parte superior para separarlo un poco de
    su contenedor padre (form)*/
}

/*selector de atributo para mi elemento select*/
/*NOTA: quizas sea por el navegador pero esto lo hice aparte con la finalidad que los
inputs de id name, email, number y dropdown esten del mismo tamaño. En el navegador
de freeCodeCamp no es necesario hacerlo aparte, sino juntos.*/
select[id="dropdown"] {
    width: 505px;
    height: 40px;
    border-radius: 0.3rem;
    margin-bottom: 25px;
    font-size: medium;
    color: rgb(114, 113, 113);
}

textarea {
    width: 500px;
    height: 150px;
    margin-bottom: 10px;  /*un margen inferior para separar el area de texto del boton*/
    font-size: large;   /*establecemos el tamaño de letra del texto que va dentro del area*/
    border-radius: 0.1rem;  /*damos un ligero borde al area de texto*/
}

/*configuramos el boton de envio*/
input[type="submit"]{
    display: block;
    width: 500px;
    /*centramos el boton de envio, dandole un margen de 1em al relleno vertical,
    y un margen auto al relleno horizontal*/
    margin: 1em auto;
    min-width: 300px;
    height: 2.5em; /*tamaño del boton de envio*/
    font-size: 1.3rem; /*tamaño de letra*/
    background-color: rgba(146, 195, 197, 0.842);
    border-color: white;
    color: azure;
    font-weight: bold;
    cursor: pointer; /*al pasar el puntero sobre el elemento aparede el dedo*/
}

/*le damos un efecto al boton de envio usando un hover*/
input[type="submit"]:hover {
    color: #fff;
    background-color: darkcyan;
}

/*agregamos un ancho maximo a los inputs*/
.entrada {
    max-width: 55vw;
}