body {
    width: 100%;
background:linear-gradient(rgb(233, 238, 219) , rgb(255, 255, 255));
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
 Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 
 opacity: 1;
 transition: all ease-in 300ms;
 

}

.body{
opacity: 0;
margin-top: 15px;

}

main{
margin-left: 200px;
}

.logo{
width: 150px;
height: 40px;
border-radius: 15px;
object-fit: cover;
}

.logo2{
padding-left: 20px;

}



.ciudad {
display: flex;
gap: 10px;
width: 890px;
padding-left: 10px;
margin-left: 20px;

background:linear-gradient(rgb(54, 54, 215),rgb(49, 100, 239));
border: dotted blueviolet 2px;
border-radius: 15px;
}


.documentos{
 background:linear-gradient(rgb(54, 54, 215),rgb(49, 100, 239));
width: 850px;
display: flex;
gap: 15px;
justify-content: center;
margin-left: 20px;
padding-right: 50px;
border-radius: 10px;
font-size: larger;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 
Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.documentos_2{
display: flex;

gap: 40px;
}




ul li a:active{
color: aqua;

}

ul li:hover{
background-color: rgb(84, 110, 225);
transition: all ease 500ms;
border-radius: 15px;
}

header{
width: 900px;
background:linear-gradient(rgb(54, 54, 215),rgb(49, 100, 239));
border-radius: 15px;
margin-bottom: 10px;
margin-left: 21px;


}


.header h1, header p {
padding-left: 10px;
color: blanchedalmond;
width: auto;
}

#container{
    width: 100%;
    min-width: 500px;
display: flex;
flex-direction: column;
gap: 20px;
margin-left: 20px;
max-width: 500px;



}
.contenedor_puentes{
width: 200%;   
display: flex;
flex-direction: column;
position: relative;
height: 250px;
background-color: rgb(197, 238, 75);
border: solid black 1px;
border-radius: 5px;
padding-left: 20px;
font-size: 20px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 
'Helvetica Neue', sans-serif;

}

.contenedor_puentes_info{
display: flex;
flex-direction: row;
gap:48px;

position: absolute;
top: 90px;

}

div #main_puentes {
display: flex;
flex-direction: row;
}

.master{
display: flex;
flex-direction: row;
}

.titulo{
    display: flex;
position: relative;
font-size: 25px;

}


.titulo small{
position: absolute;
top: 50px;

}

.nombre_puente{
font-weight: bolder;
}

nav{
    width:100% ;
    
}


nav ul{
display: flex;
gap: 20px;
list-style: none;
background-color: rgba(208, 255, 0, 0.896);
height: 40px;
justify-content: center;

}

ul li {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 
'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 20px;
padding-top: 2px ;

}

a{

text-decoration: none;
color: black;


}

.icono{
    position: relative;
    top: 18px;
    width: 70px;
    height: 70px;
    object-fit:contain;
    padding-left: 15px;
}



.logo2{
   
width: 57px;
height: 57px;

}

.logo4{
    position: relative;
    top: 18px;
width: 57px;
height: 57px;
padding-left: 15px;
}

.informacion{
width: 290px;
height: 108px;
display: flex;
flex-direction: row;
gap: 30px;
background-color: rgb(221, 228, 14);
border-radius: 20px;
border: solid 2px rgb(130, 243, 11);

}

.letras{
display: flex;
flex-direction: column;
position: relative;
min-width: 100px;


}

.lineas_abiertas{
    position: relative;
    top: -30px;
    
}

.lineas_abiertas2{
position: relative;
top: -10px;
}

.boton_camara{
position: absolute;
top: 25px;
right: 25px;
border: dotted rgba(8, 8, 8, 0.508);
display: flex;
gap: 5px;
transition: all ease-out 400ms;
}

.boton_camara:hover{
background-color: rgb(240, 36, 36);
border: dotted rgba(245, 32, 32, 0.508);
display: flex;
gap: 15px;
cursor: pointer;
}

.logo3{
width: 20px;
}

.display {
    width: 53.78%;
    
    
    position: absolute;
    top: 75%;
    left: 20%;
    z-index: 1;
    background-color: rgb(234, 222, 222);
    border-radius: 20px;
    
}

.hidden{
    display: none;

}

.show{
background-color: rgb(88, 156, 224);
filter: blur(10px);
transition: all ease-in 170ms;
}

#boton_cerrar_display{
display: flex;
flex-direction: row;
justify-content: space-between;
}

#boton_cerrar_display h2{
 padding-left: 10px;
}

 .boton_cerrar_display{
margin-right: 20px;
margin-top: 25px;
font-size: 20px;
cursor: pointer;
background: rgb(243, 145, 145);
border-radius: 5px;
width: 15px;
align-items: center;
font-weight: bolder;

}

.boton_cerrar_display:hover {
background: rgb(84, 81, 81);
transition: all ease 200ms;
}


#fecha_container{
width:100%;
 height: 40px;
background-color: rgb(44, 49, 44);
color:white;
font-family:  'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position: relative;
cursor: pointer;
}

#fecha{
position: absolute;
left: 85px;
top: -7px;
font-size: 17px;
}

.hora{   
     color: rgb(49, 46, 46);
margin-top: 26px;
margin-right: 80px;
}

.calendar{
width: 30px;
padding-left: 45px;
padding-top: 5px;
}

footer{
    min-width:480px;
    display: flex;
    gap: 30px;
    
    background-color: rgb(102, 85, 231);
color: aliceblue;
padding-left: 10px;
}

footer img{

width: 50px;
height: 50px;
}


    






@media screen and (min-width: 801px) and (max-width: 1250px){

 body{
    
background:linear-gradient(rgb(177, 232, 26) , rgb(225, 139, 54));


}

nav{
    width:700px;
    
} 

main{
margin-left: 0px;
}

header{
    
    width: 700px;
}

nav ul {
height: 60px;
}

.ciudad{
display: flex;
flex-direction: column;
width: 700px;

}

.ciudad_reloj{
color: aqua;
margin-top: -15px;

}

.contenedor_puentes_info{
display: flex;
flex-direction: column;
gap: 2px;
}



.contenedor_puentes{
    display: flex;
    flex-direction: column;
    width: 700px;
    height: 500px;

}


.documentos{
    display: flex;
    flex-direction: column;
    width: 660px;
}

.hr{
    display: none;

}



.display { 
    width: 95%;
    
    top: 100%;   
    left: 150px;
    z-index: 1;
    background-color: rgb(234, 222, 222);
    border-radius: 20px;
    max-width:550px;
    
    

}

.display h2 {
margin-left: 10px;
}

}





@media screen and (min-width:1px )and (max-width: 800px) {
    
    

 body{
    
background:linear-gradient(rgb(177, 232, 26) , rgb(225, 139, 54));


}


main{
    
margin-left: 0;
}

#fecha_container{
    
    width: 100%;
}

nav{
    width:100%;
}

header{
    
    width: 98%;
    margin-left: 5px;
}

nav ul {
height: 60px;
}

.ciudad{
display: flex;
flex-direction: column;
width: 95%;
margin-left: 5px;
padding-right: 0;
gap:0;

}

.ciudad_reloj{
color: aqua;
margin-top: -15px;

}

.contenedor_puentes_info{
display: flex;
flex-direction: column;
gap: 2px;

}

#container{
    width: 100%;
    margin-left: 5px;
}


.contenedor_puentes{
    display: flex;
    flex-direction: column;
    width: 75.9%;
    height: 500px;
    margin-left: 2px;
    

}


.documentos{
    display: flex;
    flex-direction: column;
    width: 98%;
    margin-left: 5px;
    padding-right: 0px;
}

.hr{
    display: none;

}



.display { 
    width: 98%;
    
    top: 100%;   
    left: 5px;
    z-index: 1;
    background-color: rgb(234, 222, 222);
    border-radius: 20px;
    
    

}

.boton_camara{
    
    top: 10px;
}

.display h2 {
margin-left: 10px;
}


}