@import url('https://fonts.googleapis.com/css2?family=Overlock:ital@1&family=Roboto+Condensed:ital@0;1&display=swap');
/*ESPECIFICACIONES DE LETRA IMPORTADA DE GOOGLE FONTS*/
.overlock-regular-italic {
  font-family: "Overlock", sans-serif;
  font-weight: 400;
  font-style: italic;
}
.roboto-condensed {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
:root{
--ash-gray: #cad2c5ff;
--dark-slate-gray: #354f52ff;
--charcoal: #2f3e46ff;
}
body{
  margin: 0%;
  color: #cad2c5ff;
  /* background: linear-gradient(to left, #23045cd0, #422a68d8); */
  background: radial-gradient(circle at center, #8e2de2, #4a00e0, #1e3c72, #2a5298);
  font-family: "Roboto Condensed", sans-serif;
}

/* ESTILOS HEADER */
.header-container{
  display: flex;
  align-items: center;
  box-sizing: border-box;
  color: var(--ash-gray);
  margin: 0%;
  width: 100%;
  max-height: 100px;
  overflow: hidden;
}
.header-container img{
  margin: 0%;
  padding: 0%;
  max-height: 100px;

}

.d-flex{
  display: flex;
  width: 900px;
  height: 40px;
}

/* ESTILOS PRINCIPAL */
.principal{
display: flex;
flex-wrap: wrap;
}
main{
  flex-basis: 85%;
}
aside{
  padding: 10px;
  border-radius: 15px;
  flex-basis: 15%;
  color: var(--ash-gray);
  margin-top: 15px;
  /* background: linear-gradient(to right, #0f0129, #331c58); */
  background: radial-gradient(circle at center, #8e2de2, #4a00e0, #1e3c72, #2a5298);
}
.aside-body a{
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #cad2c5ff;
  font-size: 1rem;
  transition: transform 0.4s ease;
}
.aside-body :hover{
  background: radial-gradient(circle at 80% 70%, rgba(0, 225, 255, 0.473), transparent 50%);
  transform: scale(1.3);
  border-radius: 15px;
}
.titaside{
  size-adjust: 1.5rem;
}
.container-footer{
  display: flex;
  size-adjust: 1.5rem;
  color: #cad2c5ff;
  background: rgba(43, 42, 42, 0.705) ;
  justify-content: center;
}
/* ESTILOS NAVBAR */
.navbar{
  display: flex;
  justify-content: center;
  background: #04020a75;
  position: static;
  top: 0;
}
.navbar a{
  padding: 10px;
  text-decoration: none;
  color: #cad2c5ff;
  border-radius: 8px;
  transition: transform 0.4s ease;
}
.navbar a:hover{
  background: radial-gradient(circle at 80% 70%, rgba(0, 225, 255, 0.473), transparent 50%);
  transform: scale(1.3);
}
.btn{
  display: flex;
  justify-content: center;
  font-family: "Roboto Condensed", sans-serif;
  border-radius: 12px;
}
svg{
  color: var(--ash-gray);
}
/* ESTILOS CARROUSEL */
.carousel-inner{
  padding: 15px;
  width: 98%;
  object-fit: cover;
  max-height: 600px;
  overflow: hidden;
}
/* ESTILOS CARTAS */
.card-set{
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
}
.card{
  padding: 5px;
  text-decoration: none;
  color: #cad2c5ff;
  text-align: center;
  background: radial-gradient(circle at 80% 70%, rgba(83, 52, 196, 0.534), transparent 50%);
  overflow: hidden;
  border-radius: 15px;
  transition: transform 0.3s ease;
  object-fit: contain;
}
.card:hover{
  background: radial-gradient(circle at 80% 70%, rgba(0, 225, 255, 0.473), transparent 50%);
  transform: scale(1.1);
}
.card img{
  object-fit: cover;
  width: 100%;
  height: 350px;
}
.cardz{
  background: radial-gradient(circle at 80% 70%, rgba(83, 52, 196, 0.534), transparent 50%);
  font-size: 0.9rem;
  text-align: center;
  justify-content: center;
  color: var(--ash-gray);
  border-radius: 15px;
  height: 150px;
  width: auto;
  transition: transform 0.3s ease;
}
.cardz:hover{
  transform: scale(1.2);
  background: radial-gradient(circle at 80% 70%, rgba(0, 225, 255, 0.473), transparent 50%);
}
.cardz img{
  height: 150px;
  width: 300px;
  object-fit: cover;
}
.card-group{
  display: flex;
  flex-wrap: wrap; 
  width: 99%;
  object-fit: cover;
  justify-content: space-around;
  gap: 10px;
}
.card-y{
  border-radius: 15px;
  text-align: center;
  color: var(--ash-gray);
  background: radial-gradient(circle at 80% 70%, rgba(83, 52, 196, 0.534), transparent 50%);
  transition: transform 0.3s ease;
}
.card-y:hover{
  transform: scale(1.1);
  background: radial-gradient(circle at 80% 70%, rgba(0, 225, 255, 0.473), transparent 50%);
  }
.card-y img{
  width: 260px;
  height: 300px;
  object-fit: cover;
}
.card-img-top{
  display: flex;
  object-fit: cover;
  padding: 5px;
  border-radius: 15px;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.card-img-top:hover{
  transform: scale(1.1);
}
.sims{
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  border-radius: 15px;
  max-height: 700px;
}
.mainsims{
  display: flex;
  flex-direction: column;
  text-align: center;
  color: var(--ash-gray);
  padding: 15px;
  flex-basis: 70%;
  font-size: 1.5rem;
}
.asidesims{
  display: flex;
  flex-direction: column;
  order: 2;
  flex-basis: 30%;
  padding: 15px;
  font-size: 1.5rem;
}
.cards-group{
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  width: 99%;
  object-fit: cover;
  align-items:unset;
}
.sims-img{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.sims-img img{
  width: 400px;
  height: auto;
  border-radius: 15px;
}
.carta{
  background: radial-gradient(circle at 80% 70%, rgba(83, 52, 196, 0.534), transparent 50%);
  font-size: 0.9rem;
  text-align: center;
  justify-content: center;
  color: var(--ash-gray);
  object-fit: cover;
  border-radius: 15px;
  height: 450px;
  width: auto;
  transition: transform 0.3s ease;
}
.carta:hover{
  transform: scale(1.2);
  background: radial-gradient(circle at 80% 70%, rgba(0, 225, 255, 0.473), transparent 50%);
}
.carta img{
  height: 420px;
  width: 300px;
  object-fit: cover;
}
/* FORMULARIO */
.form{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px;
}

@media (max-width:900px){
  .navbar{
  flex-direction: column;
  position: unset;
  }
  .card{
    flex-direction: column;
    position: unset;
  }
  .aside-body{
  display: none;
  }
  .card-body{
    overflow: hidden;
  }
  .carousel-inner{
  object-fit: contain;
  overflow: hidden;
  } 
}