*{

font-family:'Times New Roman', Times, serif;
font-size: 20px;
text-shadow: 2px 0 black, -2px 0 black, 0 2px black, 0 -2px black,
             1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
color: white;


}

html{

    background-color: rgb(49, 66, 66);

}
/* Encabezado */
.encabezado1{

background-color:rgb(59, 104, 105);
padding:5px;
padding-left: 20px;
margin: 20px;

display: flex;
justify-content: space-between;


text-shadow: 2px 0 black, -2px 0 black, 0 2px black, 0 -2px black,
             1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
color: white;
}

#e1 {

background-color:rgb(59, 104, 105);
font-size: 130%;

}

#e2 {

background-color:rgb(59, 104, 105);
font-size: 90%;
font-style: italic;

}

.hbotones{

margin-right: 20px;
margin-top: 100px;
background-color:rgb(59, 104, 105);

}

a.linkboton1{

    text-decoration: none;
}


.boton1{

color: whitesmoke;
font-size: 90%;
border-radius: 6%;
background-color:#4d4f5f;

}

/* El Cuerpo */

html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 100% del alto de la ventana */
}


.base1 {

    background-color: rgb(59, 104, 105);
    
    
    flex-grow: 1; 
    
    
    margin-left: 20px;   
    margin-right: 20px;
    margin-bottom: 20px; 
    
    padding: 20px; 
}

#titbase {
    
    text-align: center;
}

#yo1 {

    width:390px;
    height:538px;
    float:right;
    margin-left:20px;
    margin-right:15px;

    border-style: solid;
    border-radius: 2%;
    border-color:darkgray
}

/* Extra */

ul {

    font-style: normal;

}

/* formulario de contacto */


.form-content {

    justify-content: center;
    justify-items: center;
    
    display:block; 
    margin:auto;
  
    background: linear-gradient(
        50deg,
        rgba(40,42,55,1) 50%,
        rgba(40,42,55,0.7)),
        url(imagenes/bg2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 10px;
    width: 1000px;
    border-radius: 25px;
}

.form-content h2 {


    font-size: 40px;
    margin-bottom: 25px;

}

form {

    display: flex;
    flex-direction: column;
    width: 50%;

}

label {

    font-size: 17px;
    color: #cfd6eb;
    margin-bottom: 10px;

}

input , textarea {

    padding: 17px 14px;
    background-color: #333646;
    border: 0;
    font-size: 15px;
    margin-bottom: 20px;
    border-radius: 10px;

}

:focus{

    outline: 1px solid #1E92E9;
}

.btn {

    background-color: #4d4f5f;
    width: 150px;
    align-self: flex-end;
    cursor: pointer;

}

.btn:hover{

    background-color: #6e7288;

}

@media(max-width:991px) {

    body {

        padding: 20px;

    }

    .form-content {

        width: 100%;

    }

    form {

        width: 100%

    }

}

/* Fuentes usadas:

Sombra en la letra: https://stackoverflow.com/questions/13426875/text-border-using-css-border-around-text

Formulario: https://www.youtube.com/watch?v=jZjHY6iA6PY&t=880s

*/