/*Ejecutar en todo*/
* {
    box-sizing: border-box;
    }
/*Termina Ejecutar en todo*/

/*EMPIEZA LOGIN*/
/* Bordered form */
form {
    border: 3px solid #D8B4E2;
  }
  
  /* Full-width inputs */
  input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #D8B4E2;
    box-sizing: border-box;
  }
  
  /* Set a style for all buttons */
  button {
    background-color: rgb(33, 185, 84);
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
  }
  
  /* Add a hover effect for buttons */
  button:hover {
    opacity: 0.8;
  }
  
  
  /* Center the avatar image inside this container */
  .imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    
  }
  
  /* Add padding to containers */
  .container {
    padding: 16px;
    
  }
  
  /* The "Forgot password" text */
  span.psw {
    padding-top: 16px;
  }
  
  /* Change styles for span and cancel button on extra small screens */
  @media screen and (max-width: 300px) {
    span.psw {
      display: block;
      float: none;
    }
  }
/*TERMINA LOGIN*/



body {
font-family: cookie;
padding: 10px;
background: #F4ECF0;
}

/*EMPIEZA EL ENCABEZADO*/
/* Header/Blog Title */
.header {
top: 0;
left: 0;
width:100%;
padding:5px;
text-align: center;
background: linear-gradient(to right, #D8B4E2, #f2c1d1);
position:sticky;
position: relative;
}

.header h1 {
font-size: 50px;
}

.header img {
  width: 100;
  position: absolute;
  top: -15px;
  left: 15px;
}
/*TERMINAR EL ENCABEZADO*/

/*EMPIEZA LA BARRA DE NAVEGACION*/
/* Style the top navigation bar */
.topnav {
width: 100% ;
overflow: hidden;
background-color: #333;
}

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

/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/*TERMINA BARRA DE NAVEGACIÓN*/

/* 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: #f1f1f1;
padding-left: 20px;
}

/* Fake image */
.imgInicio {
background-color: #F4ECF0;
width: 70%;
height:40%;
padding: 20px;
}

/* Add a card effect for articles */
.card {
background: linear-gradient(45deg, #D8B4E2, #f2c1d1);
padding: 20px;
margin-top: 20px;
}

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

/* Footer */
.footer {
padding: 5px;
text-align: center;
background: #D8B4E2;
margin-top: 5px;
}

/* 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: 800px) {
.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: 400px) {
.topnav a {
    float: none;
    width: 100%;
}
}

.clickable {
  cursor: pointer;
  border: 3px solid transparent;
  transition: border-color 0.3s ease;
  display: inline-block;
  margin: 10px;
  width: 70%;
  border-radius: 50%;
}
.opcAvatar {
  margin-top: 20px;
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 90vw;
}

.opcAvatar img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 12px;
  cursor: pointer;
  border: 3px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.opcAvatar.visible {
  display: flex;
}