@import url(https://fonts.googleapis.com/css?family=Sigmar+One);


body {
  font-family: Arial, sans-serif;
	background: #59b9e6;
	color: #000000;
	overflow: hidden;
}

h1 {
	transform-origin: 50% 50%;
	font-size: 40px;
	font-family: 'Sigmar One', cursive;
	cursor: pointer;
	z-index: -1000;
	position: absolute;
	top: -20px;
	text-align: center;
	width: 100%;
}

.topBtn {
  float: right;
  margin-top: 10px;
  text-align: right;
}
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

 .card {
     display: inline-block;
     margin: 10px;
     padding: 20px;
     background-color: #f0f0f0;
     border-radius: 10px;
     font-size: 24px;
     font-weight: bold;
     text-align: center;
}
 .selectedCard {
     background-color: #fff3c1;
}

#container-vote {
  display: left;
}

#cards {
  flex: 1;
}

.input-container-vote {
  margin-left: 10px;
}

 .container {
     display: flex;
     flex-wrap: wrap;
     justify-content: left;
     align-items: left;
     margin: 20px;
}
 .avatar {
     background-color: white;
     border-radius: 50%;
     width: 50px;
     height: 50px;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-right: 10px;
}
 .name, .value {
     font-size: 18px;
     margin: 5px 0;
}
 .name {
     font-weight: bold;
}
 .input-container {
     display: flex;
     margin: 20px;
}
 .input-container input[type="text"], .input-container input[type="number"] {
     padding: 10px;
     font-size: 18px;
     margin-right: 10px;
     border-radius: 5px;
     border: none;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
     flex: 1;
}
 .input-container button {
     background-color: #007bff;
     color: #fff;
     font-size: 18px;
     padding: 10px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
 @media screen and (max-width: 768px) {
     .container {
         flex-direction: column;
    }
}
 
 /* Estilos del modal */
.modal {
  display: none; /* Ocultamos el modal por defecto */
  position: fixed; /* Permite que el modal flote sobre la página */
  z-index: 1; /* Se muestra por encima de todos los demás elementos */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Añadimos scroll si el contenido del modal es muy grande */
  background-color: rgba(0, 0, 0, 0.4); /* Fondo semitransparente para el modal */
}

/* Estilos del contenido del modal */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* Alinea el contenido en el centro del modal */
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* Estilos del botón de cierre del modal */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

/* Estilos del botón de cierre del modal al pasar el ratón por encima */
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


#list-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

#list-container .avatar {
  overflow: hidden;
  padding: 2rem;
  margin: 0rem;
  border-radius: 20px;
  background: linear-gradient(
    120deg,
    rgba(131, 199, 255, 0.5),
    rgba(95, 230, 190, 0.2)
  );
}
#list-container .avatar img {
  width: 100px;
  height: 100px;
  border-radius: 20px;
  background: white;
}

#list-container .avatar:hover {
  background: linear-gradient(120deg, rgb(131, 199, 255), rgb(95, 230, 190));
}

footer{
  color: #f1e4e4;
}