body /*estilo BODY*/
{
  font-family: Arial;
  background-color: lightgrey;
  max-width: 100%;
}

header /*estilo HEADER'*/
{
  background-color: #7F636E;
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: white;
}

h1 /*estilo H1*/
{
  display: block;
  padding: 13px;
  text-decoration: none;
  background-color: #d6da70;
  width: 97.3%;
}

h3 /*estilo H3*/
{
    text-align: left;
    margin: 30px;
}

ul /*etilo de la tabla con los links a otras paginas*/ 
{
  list-style-type: none;
  width: 125px;
}

li a /*estilo de los links a otras paginas*/
{
  display: block;
  padding: 8px;
  text-decoration: none; /*que los links no esten underlined*/
  background-color:#55868C;
  color: white;
  
}
li :hover
{
  opacity: 0.6;
}

article /*estilo donde va la info de lo que contiene la pagina*/
{
  float: left;
  width: 85%;
  background-color:#CACAAA;
  height: 364px;
  text-align: center;
}

nav /*estilo del espacio conde estan los links a las diferentes paginas*/
{
  float: left;
  width: 15%;
  height: 364px;
  background:#C8AB83;
}

@media (max-width: 600px) /*manera de poner el cuadrado de los links a otras cosas de la pagina y donde esta la info en la misma linea*/
{
  nav, article
  {
    width: 100%;
    height: auto;
  }
}

table /*etilo de la tabla*/
{
    font-family: arial;
    border-collapse: collapse;
    margin-left: 60%;
    transform: translateX(-60%);
}

td, th /*estilo de la tabla*/
{
    border: 1px solid grey;
    padding: 12px;
    right: 2%;
}

footer /*estilo de la parte de abajo 'Other Stuff'*/
{
  background-color: #EEC584;
  padding: 10px;
  text-align: center;
  color: white;
}

section::after /*rellena el espacio q falta entre el article y el nav*/
{
  content: "";
  display: table;
  clear: both;
}

 
#tabla2{ /*Boton 1*/
  position: absolute;
  transform: translateX(-70px);
  top:370px;
  cursor: pointer;
  display:none;  
}

button{ /*Estilo boton*/
  padding: 15px;
  position: absolute;
  top:280px;
  right: 43%;
  cursor: pointer;
}

.button2{
  top:420px
}

#tabla1{ /*Estilo tabla de boton 1*/
  display:none;
  width: 145%;
  align-items: right;
  margin-top: 40px;
  right: auto;
}