body {font-family: Arial, Helvetica, sans-serif;}
* {
  box-sizing: border-box;
  background-color: black;
  color:white;
  }

/* Full-width input fields */
input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
  color: black;
}

input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
  
}

/* Set a style for all buttons */
button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

button:hover {
  opacity:1;
}

/* Extra styles for the cancel button */
.cancelbtn {
  padding: 14px 20px;
  background-color: #f44336;
}

/* Float cancel and signup buttons and add an equal width */
.cancelbtn, .signupbtn {
  float: left;
  width: 50%;
}

/* Add padding to container elements */
.container {
  width: 100%;
  padding: 16px;
}

/* Clear floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* Change styles for cancel button and signup button on extra small screens */

@media screen and (max-width: 300px) {
  .cancelbtn, .signupbtn {
     width: 100%;
  }
  
}

.header {
  background-color: #003366;
  padding: 30px;
  margin-bottom: 10px;
  border-radius: 10px;
}
#logo {
    max-width:100%;
    max-height:100%;
    display: block;
    background-color:  hsla(0, 0%, 0%, 0);
    filter: drop-shadow(11px 7px 4px #000);
}
#logo:hover{
  transform: scale(1.05, 1.05);
}
.topnav {
    overflow: hidden;
    background-color: #141f1f;
    margin-bottom: 10px;
    border-radius: 10px;
  }
  
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    background-color: #141f1f;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color:#141f1f;
  }
  
  .topnav a.active {
    background-color: #003366;
    color: white;
  }
  
  .topnav .icon {
    display: none;
    background-color: #141f1f;
  }
  

  
  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }
  .footer {
  grid-area: footer;
  background-color: #003366;
  color: white;
  padding: 10px;
  text-align: center;
  border-radius: 10px;
  margin-top: 10px;
  
}

.azul{
  background-color: #003366;
}

.formprin{
    border-radius: 10px;
    border:1px solid;
    padding: 2px;
  }