body {
    background-color: #18181b; /* Fondo oscuro */
    background-image: url('./topography.svg');
    color: #fff; /* Texto blanco */
    font-family: Arial, sans-serif;
    margin: 0% 15%; /* Márgenes laterales */
    padding: 0;
}

header, nav, main, footer {
    padding: 20px;
}

h1, h2, h3 {
    color: #ff5900; /* Títulos en naranjado */
}

nav ul {
    list-style: none;
    padding: 0%;
    margin: 0%;
}

nav li {
    display: inline-block;
    background-color: #18181b;
    border: 1px solid transparent;
    border-radius: .75rem;
    box-sizing: content-box;
    color: #FFFFFF;
    cursor: pointer;
    flex: 0 0 auto;
    font-family: "Inter var",ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5rem;
    padding: .75rem 1.2rem;
    text-align: center;
    text-decoration: none #80746b solid;
    text-decoration-thickness: auto;
    transition-duration: .2s;
    transition-property: background-color,border-color,color,fill,stroke;
    transition-timing-function: cubic-bezier(.4, 0, 0.2, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

nav li:hover {
    background-color: #514037;
}

nav li:focus {
    box-shadow: none;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

@media (min-width: 768px) {
    nav li {
    padding: .75rem 1.5rem;
    }
}

nav a {
    color: #fff; /* Enlaces en blanco */
    text-decoration: none;
}
nav li.active {
    background-color: #555; /* Color de fondo para el botón activo */
}

/* Estilos específicos para la página de Términos y Condiciones */
main {
    background-color: #444; /* Fondo para el contenido de la página */
    padding: 20px;
    border-radius: 20px;
}

.terms {
    background-color: #555; /* Fondo para cada sección de términos */
    color: #fff;
    padding: 10px;
    margin-bottom: 10px;
}

.terms h3 {
    font-weight: bold;
}

.terms p {
    margin: 0;
}

.terms-title {
    font-weight: bold;
}

.terms-text {
    font-style: italic;
}

.buttons-inicio {
    display: flex;
    justify-content: center;
}

/* Estilos para el botón de invitación */
.invite-button {
  display: flex;
  align-items: center;
  margin: auto;
  appearance: none;
  background-color: #fdfcfc;
  border-radius: 15px;
  border-width: 10%;
  box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
  box-sizing: border-box;
  color: #36395A;
  cursor: pointer;
  font-family: cursive;
  font: bold;
  height: 48px;
  list-style: none;
  overflow: hidden;
  padding: 3%;
  text-align: center;
  text-decoration: none;
  transition: box-shadow .15s,transform .15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: initial;
  font-size: 25px;
  justify-content: center;
}

.invite-button:focus {
  box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}

.invite-button:hover {
  box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
  transform: translateY(-2px);
}

.invite-button:active {
  box-shadow: #D6D6E7 0 3px 7px inset;
  transform: translateY(2px);
}

/* Botones categorias */
.Button-categories {
    /* Estilos para los botones de categorías */
    display: inline-block;
    padding: 10px 10px 10px 10px;
    border-radius: 10px;
    background-color: #ff6f3be9;
    margin: 1%;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.Button-categories:hover {
    background-color: #ff4500;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
}

.Button-categories.active-button {
    background-color: #a43900;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
}

@media screen and (min-width: 768px) {
    .buttons-inicio {
      display: flex;
      flex-direction: row;
    }
  }
  
  /* Estilos para teléfonos y pantallas más pequeñas */
@media screen and (max-width: 767px) {
    .buttons-inicio {
      display: flex;
      flex-direction: column;
    }
  }

.category-content {
    display: none;
}

/* Comandos listas */
.cmds-li {
    display: inline-flex;
    width: auto;
    font-size: 16px;
    background: transparent;
    border: none;
    position: relative;
    color: #f0f0f0;
    cursor: pointer;
    z-index: 1;
    padding: 16px;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    margin: 5px ;
}

.cmds-li:after,
.cmds-li:before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -99999;
    transition: all .4s;
}

.cmds-li:before {
    transform: translate(0%, 0%);
    width: 100%;
    height: 100%;
    background: #28282d;
    border-radius: 10px;
}

.cmds-li:after {
    transform: translate(10px, 10px);
    width: 35px;
    height: 35px;
    background: #ffffff15;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 50px;
}

.cmds-li:hover:before {
    transform: translate(5%, 20%);
    width: 110%;
    height: 110%;
}

.cmds-li:hover:after {
    border-radius: 10px;
    transform: translate(0, 10);
    width: 100%;
    height: 100%;
}

.cmds-li:active:after {
    transition: 0s;
    transform: translate(0, 5%);
}

/* Estilo para la sección de detalles de comando */
.cmd-details {
    background-color: #18181b;
    padding: 20px 20px;
    border-radius: 10px;
    display: none;
    position: relative;
    top: 10px;
    left: auto;
    right: auto;
    width: auto; /* Ajusta el ancho según tus preferencias */
    height: auto; /* Ocupa la altura completa del viewport */
    margin: 20px;
}

.cmds-li.active {
    background-color: #18181b; /* Cambia el color de fondo para el comando activo */
    position: relative;
    border-radius: 10px;
    width: auto;
    
}

.cmds-li.active:before,
.cmds-li.active:after {
    display: none; /* Oculta el efecto del hover para el comando activo */
}

.cmds-li.active:focus + .cmd-details {
    display: block; /* Muestra los detalles cuando el comando activo está enfocado */
}

.dep-content {
    display: inline-flex;
    justify-content: flex-start;
    margin-inline: 3%;
    
}

.cards-buttons {
    display: grid;
    justify-content: space-between;
    gap: initial;
    background-color: #202020;
    margin-inline: 1.5%;
    margin-block: 10px;
    border-radius: 20px;
    align-items: end;
    padding: auto;
}

.content-cards {
    display: flexbox;
    margin: 20px;
    justify-items: self-end;
    border-radius: 10px;
}