@charset "utf-8";
/* CSS Document */
body{
	margin: 10 auto;	
	background-image: url("image3.jpg");
	background-size: cover; /* Resize the background image to cover the entire container */
	width: 100%;
}

p{
	padding-left: 10px;
	padding-right: 10px;
	font-size: 20;
	color: black;
}

#updatesIndex{
	color: black;
	font-size: 15;
}

center{
	color: black;
}

#stylePadding{
	padding-left: 10px;
}

#iau_name_objeto{
	border-radius: 10px;
	padding-left: 5px;
}


#head-box {
	height: 40px;
	width: 100%;
	background-color: #666;
	background-image: url("universe.jpg");
	color: white;
	font-size: 2em;
	font-family: arial;
	padding-top: 70px;
	padding-right: 10px;
	text-align:right;
}
#box-left{
	width: 10%;
	text-align: left;
	float: left;
	font-family: arial;
	/*padding:5px auto;*/
}
/* ESTILO DEL MENÚ */
#menu { 
	/*width: 100%; */
	border-bottom: solid #5cc4ff 1px; 
	position:relative;
	display: grid;
	opacity: 0.8;
}
#menu div { /* Líneas que dividen las opciones del menú */
	border-top: solid #5cc4ff 1px; 
	border-bottom: solid #5cc4ff 1px;
	border-left: solid #5cc4ff 1px;
	border-right: solid #5cc4ff 1px; 
	background: #c2e9ff; 
}

#menu a { /* Texto del menú principal */ 
	padding-left: 10px; 
	color: #00598c; 
	font-weight: 700; 
	display: block; 
	width: 100%; 
	font-size: 15px; 
	text-align: left;

}
#menu a:hover { /* Comportamiento cuando situas el ratón encima */
	background: #d1eeff; 
}
#menu ul { 
	margin: 0px; 
	padding: 0; 
	font-size: 0.9em; 
	background: #f0faff; 
	overflow: hidden; 
}
#menu li { 
	list-style: none; 
	font-size: 0.8em; 
	padding: 0;
 }
#menu li a { 
	padding-left: 25px; 
	width: 100%; 
}

#data-box ul{
	list-style-type: square;
}

#data-box ul li a{
	text-decoration: none;
	color:blue;
}
#data-box ul li a:hover{
	color:blue;
}
#data-box ul li ul{
	list-style-type: disc;
}
#new_magnitudes{
    border: 1px black solid;
    font-family: arial;
    font-size: 10px;
}
#new_magnitudes tr td {
    font-size: 10px;
}
table #data_magnitudes{
    font-family: arial;
    font-size: 10px;
}
.boton{
	background-color: #5cc4ff;
	color: black;
	font-size: small;
	border: 2px black solid;
}

 /* TABLES */

 #infoTables{
	border:3px black solid;
	border-color: black;
	margin-left: auto;
	margin-right: auto;
 }
 #firstRowTable{
	background:#00598c;
	color:white; 
	padding-left: 5px; 
	padding-right: 5px; 
	padding-top: 5px; 
	padding-bottom: 5px; 
	text-align: center; 
	border: 3px black solid;
	font-weight: bold;
 }

 #titlesTable{
	background:#5cc4ff;
	color:black;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: 1px black solid;
	text-align: center;
	font-weight: bold;
 }

 #restOfCells{
	color:black;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: 1px solid black;
	text-align: center;
 }

 #restOfCellsInfo{
	color:black;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: 1px solid black;
	text-align: left;
 }


/* TEXTO DE LA WEB RESPONSIVE */ 

.jumbotron {	
	background-color: #fff;
	opacity: 0.6;
	color: #fff;
	background-size: cover; /* Resize the background image to cover the entire container */
	padding: 100px 25px 50px;
    font-family: Montserrat, sans-serif;
  }

#body{
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
}

#principal {
	width: 85%;
	background-color: white;
	opacity: 0.8;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 15px;
	overflow-x: scroll;
}

#sidebar {
	width: 15%;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	background-color: gray;
	opacity: 0.8;
}

#principal2 {
	width: 85%;
	background-color: #fff;
	opacity: 0.6;
	padding-left: 10px;
	font-size: 15px;
}

#sidebar2 {
	width: 15%;
	padding-bottom: 100px;
	background-color: #fff;
	opacity: 0.6;
	text-align: center;
	align-items: center;
}

@media  screen and (max-width: 800px) {
	
	.jumbotron{
		width:max-content;
	}

	#body{
		display: flex;
        flex-direction: column;
        flex-wrap: wrap;
		width:fit-content;}

    #Principal{
        width: fit-content;
    }
    #Sidebar{
        width: 100%;
    }
}

#nameInfo{ /* Título de la página con la información */
	font-size: 50px;
	font-weight: bolder;
	text-align: center;
	text-decoration: underline;
}

#completeName{ /* Nombre completo de la estrella */
	font-size: 20px;
	font-weight: bolder;
	text-decoration: underline;
}