* {
    box-sizing: border-box;
  }

  body {
    font-family: 'Courier New', Courier, monospace;
    padding: 0.625rem ;
    background: #000000;
  }
  .header {
    padding: 1.875rem;
    text-align: center;
    background: #000000;
  }
  .header h1{
    font-size: 3.12rem;
    color: #ddd;
  }

  .header h1 {
    font-size: 3.12rem;
  }
/*menu desplegable*/
a {
  text-decoration: none;
}

nav {
  font-family: monospace;
}

ul {
  background: #333(0, 0, 0);
  list-style: none;
  margin: 0;
  padding-left: 0;
}

li {
  color: #fff;
  background: #333(0, 0, 0);
  display: block;
  float: left;
  padding: 1rem;
  position: relative;
  text-decoration: none;
  transition-duration: 0.5s;
}
  
li a {
  color: #fff;
}

li:hover,
li:focus-within {
  background: #333;
  cursor: pointer;
}

li:focus-within a {
  outline: none;
}

ul li ul {
  background: rgb(0, 0, 0);
  visibility: hidden;
  opacity: 0;
  min-width: 5rem;
  position: absolute;
  transition: all 0.5s ease;
  margin-top: 1rem;
  left: 0;
  display: none;
}

ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover,
ul li ul:focus {
   visibility: visible;
   opacity: 1;
   display: block;
}

ul li ul li {
  clear: both;
  width: 100%;
}
/**/


  /* Style the top navigation bar */
.topnav {
    overflow: hidden;
    background-color: #333;
  }

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 0.8rem 1rem;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
}

/* Right column */
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #020202;
  padding-left: 1.25rem;
}

/* Fake image */
.fakeimg {
  background-color: rgb(255, 255, 255);
  width: auto;
  padding: 1.25rem;
}

/* Add a card effect for articles */
.card {
  background-color: white;
  padding: 1.25rem;
  margin-top: 1.25rem;
}

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

/*gallery*/
div.gallery {
    border: 1px solid #ccc;
  }
  
  div.gallery:hover {
    border: 0.06rem solid rgb(68, 68, 68);
  }
  
  div.gallery img {
    width: 100%;
    height: auto;
  }
  
  div.desc {
    padding: 0.9rem;
    text-align: center;
  }
  
  * {
    box-sizing: border-box;
  }
  
  .responsive {
    padding: 0 0.375rem;
    float: left;
    width: 24.99999%;
  }
  
  @media only screen and (max-width: 700px) {
    .responsive {
      width: 49.99999%;
      margin: 0.375rem 0;
    }
  }
  
  @media only screen and (max-width: 500px) {
    .responsive {
      width: 100%;
    }
  }
  
  .clearfix:after {
    content: "";
    display: table;
    clear: both;
  }
.retratos h2 {
    font-size: 1.25rem;
    color: rgb(255, 255, 255);
}

/* Footer */
.footer {
  padding: 1.25rem;
  text-align:justify;
  background: rgb(0, 0, 0);
  margin-top: 1.25rem;
}

.footer h2{
    font-size: 1.25rem;
    color: #ddd;
}


/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 50rem) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 25rem) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
/*formulario*/

body{
  height: 100%; 
  font-family:'Courier New', Courier, monospace;
  background-color: #000000; 
}


.contact_form{  
  width: 28.75rem; 
  height: auto;
  margin: 5rem auto;
  border-radius: 0.625rem;  
  padding-top: 1.87rem;
  padding-bottom: 1.25rem;  
  background-color: #fbfbfb; 
  padding-left: 1.87rem; 
}


input{
  background-color: #fbfbfb; 
  width: 25.5rem; 
  height: 2.5rem; 
  border-radius: 0.31rem;  
  border-style: solid; 
  border-width: 0.06rem; 
  border-color: #000000; 
  margin-top: 0.6rem;  
  padding-left: 0.62rem;
  margin-bottom: 1.25rem; 
}


textarea{
  background-color: #fbfbfb; 
  width: 25.5rem; 
  height: 9.37rem; 
  border-radius: 0.31rem;  
  border-style: solid; 
  border-width: 0.06rem; 
  border-color: #000000; 
  margin-top: 0.625rem;  
  padding-left: 0.625rem;
  margin-bottom: 1.25rem; 
  padding-top: 0.93rem; 
}


label{
  display: block; 
  float: center;  
}


button{
  height: 2.81rem; 
  padding-left: 0.31rem;
  padding-right: 0.31rem;   
  margin-bottom: 1.25rem; 
  margin-top: 0.625rem;   
  text-transform: uppercase;
  background-color: #000000; 
  border-color: #000000; 
  border-style: solid; 
  border-radius: 0.625rem;  
  width: 26.25rem;   
  cursor: pointer;
}


button p{
  color: #fff; 
}


span{
  color: #000000; 
}


.aviso{
  font-size: 0.8rem;  
  color: #0e0e0e;  
}


.formulario h1{
  font-size: 2.43rem;  
  text-align: letf; 
  padding-bottom: 1.25rem; 
  color: #000000;
}


.formulario h3{
  font-size: 1rem; 
  padding-bottom: 1.8rem;
  color: #0e0e0e;   
}


.p{
  font-size: 0.8rem; 
  color: #0e0e0e; 
}


::-webkit-input-placeholder {
 color: #a8a8a8;
}


::-webkit-textarea-placeholder {
 color: #a8a8a8;
}


.formulario input:focus{
  outline:0;
  border: 1px solid #000000;
}


.formulario textarea:focus{
  outline:0;
  border: 1px solid #000000;
}

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

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

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

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #000000;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

.color-properties {
  color: white;
  background-color: #000000;
}