header, main, footer {width: 100;}
html{scroll-behavior: smooth;}
/*  @import url(estilonav.css);*/

nav{
position: relative;
width: 100%;
height: 85px;
background-color:green;
font-size: 20px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin-bottom: 0px;
}

#logo{
display:inline-block;
width: 120px;
height: 85px;    
background-color:white;
border: none;
margin-right: -7px;
}

#logo img{
width: 100%;
height: 100%; 
}

nav ul{
position: absolute;
top: 0px;
right: 50px;
list-style: none;
margin: 0;
padding: 0;
}

nav ul li{
width: 200px;
height: 50px;
color:darkgreen;
background-color:darksalmon;
display:inline-block;
text-align: center;
line-height: 50px;
}

nav ul li:hover{background-color:aqua;}
nav a:hover{color:blue;text-decoration: none;}

header h1, h2{
color: black;
background-color: white;
text-align: center;
}

hr{width: 80%};

main{
position: relative;
background-color: white;}

.contenedor{
width:100%;
margin:0;
display:flex;
justify-content:center}

#depto {
position: relative;
margin: 0;
width: 250px;
height: 250px;
background-color: aqua;
display: flex;
justify-content: center;
border: 2px solid pink;
}

header{
position: relative;
height: 200px;
background-color: blue;
}

header img{
position: absolute;
width: 100%;
height: 200px;
object-fit: cover;
}

#depto img{
position: absolute;
width:100%;
height: 100%;
}

#depto p{
position:absolute;
bottom: 5px;
height: 30px;
width: 100%;
text-align: center;
font-size: 20px;
color: white;
background-color: rgb(255, 0, 0, 0.8);}

header p{
position: absolute;
bottom: 10px;
margin: 0;    
width: 100%;
text-align: center;
font-size: 20px;
color: black;
background-color: white;}

header h1{
position: absolute;
bottom: 80px;
margin: 0;    
width: 100%;
font-size: 50px;
text-align: center;
color: black;
background-color: white;
}

#depto p:hover{background-color:blueviolet;}
#depto p a:hover{color:blue;text-decoration: none;}
#boton p a:hover{color:blue;text-decoration: none;}

a{text-decoration: none; color: white;}

iframe{
display: block;
margin: 0 auto;
width: 100%;
height: 500px;    
border: 2px solid palevioletred;}

label, input {display: block;}
input, option, select{
width: 250px;
height: 40px;
margin-bottom: 20px;
}

textarea{
width: 250px;
height: 150px;
margin-bottom: 20px;
}

input:focus{background-color: gray;}

footer{
height: 100px;
background-color:green;
}

#boton{
display: flex;
margin: 0 auto;
width: 300px;
height: 100px;
justify-content: center;
align-items: center;
background-color:blueviolet;    
}

#boton p{font-size: 20px; color: white;}

table{
width: 50%;
margin: 0 auto;}

th, td  {
text-align:center;
}

th{
padding: 10px;
background-color: yellow;    
}

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
