/* 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." */

/*barra superior 
/* Add a black background color to the top navigation */
.topnav {
  background-color: #313831;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #49e963;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  transition: all 1s ease;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #b3d6ff;
  color: #313831;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #49e963;
  color: #313831;
}

body {
  background-color: #11302a;
  color: #f9ffb3;
  font-family: exothin;
  font-weight: bold;
  font-size: 20px;
  margin-left: 80px;
}

.cuerpo p{
  border: 1px #f9ffb3;
  padding: 1px;
}

.cuerpo a{
  background-color: #313831;
  color:#f9ffb3 ; 
    text-decoration: none;
  padding: 5px 5px 5px 7px;
  border-left: solid 5px #49e963;
  transition: all 5ms ease;
  }
.cuerpo a:hover{
  background-color:#49e963;
  text-decoration: none;
  color: #313831;
  padding: 5px 5px 5px 20px;
  border-radius: 5px;;
  }
.cuerpo h3{
  background-color:#0d2c26;
  color : #f9ffb3;
  align-self: center;
  border-left: solid 5px #49e963;
  border-right:solid 5px #49e963;
  transition: all 1s ease; 
  margin: 70px;
}
.cuerpo h3:hover{
   color:#313831;
  background-color : #49e963;
} 

.marquesina{            /* Start off the right edge */
            transform: translateX(100%);
            /* Animate to the left */
            animation: scroll-left 20s linear infinite;
  
}
@keyframes scroll-left {
            0% {
                transform: translateX(100%);
            }

            100% {
                transform: translateX(-100%);
            }
}
  
.inferior{
  overflow: hidden;
  background-color: #313831;
  position: fixed;
  bottom: 0;
  width: 100%;
  display: inline-block;
}
  
.inferior a{
  background-color: #212821;
  color:#b3d6ff ; 
    text-decoration: none;
  padding: 5px 5px 5px 7px;
  border-left: solid 5px #49e963;
  transition: all 1s ease;
  }
.inferior a:hover{
  background-color:#49e963;
  text-decoration: none;
  color: #313831;
  padding: 5px 5px 5px 20px;
  border-radius: 5px;;
  }
  
  /*

  colores a cambiar 
  fondo #11302a
  texto #f9ffb3
  
  barra de navegacion 
  enfoque #49e963
  fondo #313831
  sobre #b3d6ff
  
  otros enfoques
  fondo #313831
  texto #f9ffb3
  emfoque #b3d6ff
  texto enfoques #8aa259
  
  enlaces
  fondo #f8f9e4
  texto y border #49e963
  
  otros enlaces buscar colores
  
  */