/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
background-color:#55B9C4;
border: 10px solid white;
padding: 50px;
margin: 100px;
font-family:arial;

}
h1 {
font-family:verdana;
font-size:200%;
color:yellow;

}
p {
font-family:arial;
color:white;

}

a:link {
  color: white;
  background-color: transparent;
  text-decoration: none;

}

a:visited {
  color: grey;
  background-color: transparent;
  text-decoration: none;

}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;

}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;

}

th {

  border-radius: 10px;
  border-collapse: collapse;
  background-color: #0B615E;
  color: white;
  border-style: dotted;
  border-color: white;
}
td {
  border-radius: 10px;
  border-collapse: collapse;

}

.grid-container {
  display: grid;
  grid-template-columns: 32% 36% 32%;
  margin:1px;

}
.footer {
  display: grid;
  grid-template-columns: 20% 60% 20%;
  margin:1px;
  text-align: center;
}
.barra {
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
  border-radius: 10px;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
}
.tabla1 {
tr:hover {background-color: #D6EEEE;}
        }

.boton {
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
  border-radius: 10px;
  width: 50%;
}

li {
  float: left;
  border-right: 1px solid #bbb;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
}
.active {
  background-color: #04AA6D;
}

.barra2 {
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: blue;
  border-radius: 10px;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
}