/* ===== Estilo general > main ===== */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color:dimgrey;
  color: white;
}




/* ===== Main Content ===== */

.main_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  gap: 30px;
}

.main_header,
.main_container,
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
}

.main_header h1 {
  display: flex;
  font-size: clamp(20px, 10vw, 70px);
  flex-direction: row;
  justify-content: center;
}

  .main_container img {
    max-width: 800px;
    max-height: 700px;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

/* ===== Context Menu ===== */
.context-menu {
  color: white; 
  min-width: 480px;
  height: 90%;
  background-color: #8d8d8d;
  border-radius: 10px;
  margin: 10px;
  padding: 10px;
}

/* ===== Botones ===== */

.btn {
  background: #5a39ff57;
  border: 2px solid #5a39ff;
  color: white;
  font-size: 15px;
  padding: 1px 4px;
  border-radius: 6px;
  cursor: pointer;
}

  .btn:hover {
    background: #6c4fff21;
    border: 2px solid #6c4fff;
  }

.btn.main_btn {
  align-items: center;
}

.clickable {
  cursor: pointer;
}

/* CARDS */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
}

.card { 
  background: var(--card-bg);
  padding: 20px;
  border-radius: 20px;

  flex: 1 1;
  max-width: 400px;
  min-width: 280px;
}
  .card h2 {  
    font-size:24px; 
    display:inline
  }

  .card h3 { 
    display:inline;
    padding-left: 30px;
  }

  .card p { 
    margin: 0px;
  }

  .card img { 
    width: 100px;
    height: 100px;
    border-radius: 20px;
  }


  .card a { 
    color:aquamarine;
  }
    .card a:visited {
      color:aquamarine
    }


/* === Extras === */

.loader {
  width: 48px;
  height: 48px;
  border: 5px solid #ffffff33;
  border-top: 5px solid #5a39ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}