@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Handlee&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Capriola&display=swap');

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Ubuntu', sans-serif;
}

.main{
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-color: #121212;
}

.container{
  max-width: 1400px;
  margin: 0 auto;
}

.hero-section{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 5rem;
  padding: 3rem 0;
}

.hero-title{
  font-size: 5rem;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  transition: all .3s ease;
  user-select: none;
  font-family: 'Capriola', cursive;
  /* letter-spacing: 5px; */
}

.hero-title:hover{
  color: #ae00ff;
  text-shadow: 0 0 10px #ae00ff, 0 0 20px #ae00ff, 0 0 40px #ae00ff;
}

.card-list{
  width: 100%;
  height: 100%;
  /* background-color: red; */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 3rem;
}

.card-list .card{
  width: 300px;
  height: 420px;
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
  background: #232323;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  user-select: none;
}

.card-image{
  width: 100%;
  height: 10rem;
  overflow: hidden;
  border-radius: .8rem;
}

.card-image .card-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-content{
  width: 100%;
  padding: 1rem .5rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  gap: 7rem;
}

.card-content .text{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  gap: 1rem;
}

.card-content .text h3{
  font-size: 1.2rem;
  color: #ae00ff;
  font-weight: 700;
  text-transform: uppercase;
}
.card-content .text p{
  font-size: .8rem;
  color: #fff8;
}

#cardBtn{
  padding: 10px 15px;
  background-color: #ae00ff;
  border: none;
  border-radius: .5rem;
  font-size: .8rem;
  color: #fff;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: all .3s ease;
}

#cardBtn:active{
  transform: scale(0.96);
}

#cardBtn:hover{
  box-shadow: 0 0 10px #ae00ff, 0 0 20px #ae00ff, 0 0 30px #ae00ff;
  text-shadow: 0 0 2px #fff, 0 0 6px #fff;
}

.footer{
  width: 100%;
  height: 100%;
  background: #222;
}

.footer .container{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
}

.footer .container p{
  font-size: 1rem;
  color: #fff;
  font-family: 'Handlee', cursive;
}

.footer .container p a{
  text-decoration: none;
  color: #fff;
  font-family: "Handlee", cursive;
  transition: color .3s ease;
}

.footer .container p a:hover{
  color: #ae00ff;
}