@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}

@keyframes animStarFast {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-3000px);
  }
}

@keyframes animStarSlow {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-1000px);
  }
}

html {
  height: 100%;
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
  overflow: hidden;
}

#stars, #stars2, #stars3 {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
}

#stars {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 
    100px 100px #FFF, 200px 200px #FFF, 300px 300px #FFF, 400px 400px #FFF, 500px 500px #FFF,
    600px 600px #FFF, 700px 700px #FFF, 800px 800px #FFF, 900px 900px #FFF, 1000px 1000px #FFF,
    1100px 1100px #FFF, 1200px 1200px #FFF, 1300px 1300px #FFF, 1400px 1400px #FFF, 1500px 1500px #FFF,
    1600px 1600px #FFF, 1700px 1700px #FFF, 1800px 1800px #FFF, 1900px 1900px #FFF, 2000px 2000px #FFF,
    2100px 2100px #FFF, 2200px 2200px #FFF, 2300px 2300px #FFF, 2400px 2400px #FFF, 2500px 2500px #FFF,
    2600px 2600px #FFF, 2700px 2700px #FFF, 2800px 2800px #FFF, 2900px 2900px #FFF, 3000px 3000px #FFF;
  animation: animStar 25s linear infinite;
}

#stars:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 
    100px 100px #FFF, 200px 200px #FFF, 300px 300px #FFF, 400px 400px #FFF, 500px 500px #FFF,
    600px 600px #FFF, 700px 700px #FFF, 800px 800px #FFF, 900px 900px #FFF, 1000px 1000px #FFF,
    1100px 1100px #FFF, 1200px 1200px #FFF, 1300px 1300px #FFF, 1400px 1400px #FFF, 1500px 1500px #FFF,
    1600px 1600px #FFF, 1700px 1700px #FFF, 1800px 1800px #FFF, 1900px 1900px #FFF, 2000px 2000px #FFF,
    2100px 2100px #FFF, 2200px 2200px #FFF, 2300px 2300px #FFF, 2400px 2400px #FFF, 2500px 2500px #FFF,
    2600px 2600px #FFF, 2700px 2700px #FFF, 2800px 2800px #FFF, 2900px 2900px #FFF, 3000px 3000px #FFF;
}

#stars2 {
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 
    200px 200px #FFF, 400px 400px #FFF, 600px 600px #FFF, 800px 800px #FFF, 1000px 1000px #FFF,
    1200px 1200px #FFF, 1400px 1400px #FFF, 1600px 1600px #FFF, 1800px 1800px #FFF, 2000px 2000px #FFF,
    2200px 2200px #FFF, 2400px 2400px #FFF, 2600px 2600px #FFF, 2800px 2800px #FFF, 3000px 3000px #FFF,
    3200px 3200px #FFF, 3400px 3400px #FFF, 3600px 3600px #FFF, 3800px 3800px #FFF, 4000px 4000px #FFF,
    4200px 4200px #FFF, 4400px 4400px #FFF, 4600px 4600px #FFF, 4800px 4800px #FFF, 5000px 5000px #FFF,
    5200px 5200px #FFF, 5400px 5400px #FFF, 5600px 5600px #FFF, 5800px 5800px #FFF, 6000px 6000px #FFF;
  animation: animStarSlow 50s linear infinite;
}

#stars2:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 
    200px 200px #FFF, 400px 400px #FFF, 600px 600px #FFF, 800px 800px #FFF, 1000px 1000px #FFF,
    1200px 1200px #FFF, 1400px 1400px #FFF, 1600px 1600px #FFF, 1800px 1800px #FFF, 2000px 2000px #FFF,
    2200px 2200px #FFF, 2400px 2400px #FFF, 2600px 2600px #FFF, 2800px 2800px #FFF, 3000px 3000px #FFF,
    3200px 3200px #FFF, 3400px 3400px #FFF, 3600px 3600px #FFF, 3800px 3800px #FFF, 4000px 4000px #FFF,
    4200px 4200px #FFF, 4400px 4400px #FFF, 4600px 4600px #FFF, 4800px 4800px #FFF, 5000px 5000px #FFF,
    5200px 5200px #FFF, 5400px 5400px #FFF, 5600px 5600px #FFF, 5800px 5800px #FFF, 6000px 6000px #FFF;
}

#stars3 {
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 
    300px 300px #FFF, 600px 600px #FFF, 900px 900px #FFF, 1200px 1200px #FFF, 1500px 1500px #FFF,
    1800px 1800px #FFF, 2100px 2100px #FFF, 2400px 2400px #FFF, 2700px 2700px #FFF, 3000px 3000px #FFF,
    3300px 3300px #FFF, 3600px 3600px #FFF, 3900px 3900px #FFF, 4200px 4200px #FFF, 4500px 4500px #FFF,
    4800px 4800px #FFF, 5100px 5100px #FFF, 5400px 5400px #FFF, 5700px 5700px #FFF, 6000px 6000px #FFF,
    6300px 6300px #FFF, 6600px 6600px #FFF, 6900px 6900px #FFF, 7200px 7200px #FFF, 7500px 7500px #FFF,
    7800px 7800px #FFF, 8100px 8100px #FFF, 8400px 8400px #FFF, 8700px 8700px #FFF, 9000px 9000px #FFF;
  animation: animStarFast 100s linear infinite;
}

#stars3:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 
    300px 300px #FFF, 600px 600px #FFF, 900px 900px #FFF, 1200px 1200px #FFF, 1500px 1500px #FFF,
    1800px 1800px #FFF, 2100px 2100px #FFF, 2400px 2400px #FFF, 2700px 2700px #FFF, 3000px 3000px #FFF,
    3300px 3300px #FFF, 3600px 3600px #FFF, 3900px 3900px #FFF, 4200px 4200px #FFF, 4500px 4500px #FFF,
    4800px 4800px #FFF, 5100px 5100px #FFF, 5400px 5400px #FFF, 5700px 5700px #FFF, 6000px 6000px #FFF,
    6300px 6300px #FFF, 6600px 6600px #FFF, 6900px 6900px #FFF, 7200px 7200px #FFF, 7500px 7500px #FFF,
    7800px 7800px #FFF, 8100px 8100px #FFF, 8400px 8400px #FFF, 8700px 8700px #FFF, 9000px 9000px #FFF;
}

#title {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  color: #FFF;
  text-align: center;
  font-family: 'lato', sans-serif;
  font-weight: 300;
  font-size: 50px;
  letter-spacing: 10px;
  margin-top: -60px;
  padding-left: 10px;
}

#title span {
  background: -webkit-linear-gradient(white, #38495a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
    text-align: center;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.header {
    padding: 50px 20px 20px;
}

.header h1 {
    font-size: 3rem;
    margin-bottom: 10px;
}

.subtitle {
    font-size: 1.2rem;
    color: #aaa;
}

.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.main h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    width: 90%;
    max-width: 1000px;
}

.card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 20px;
    text-decoration: none;
    color: #fff;
    font-size: 1.2rem;
    transition: 0.3s;
}

.card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.footer {
    padding: 20px;
    font-size: 0.9rem;
    color: #777;
}

main.post {
  max-width: 800px;
  margin: 50px auto;
  background: rgba(0, 0, 0, 0.6);
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
  color: white;
}

main.post h2 {
  margin-top: 30px;
  font-size: 2rem;
  border-bottom: 2px solid #fff;
  padding-bottom: 5px;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin-top: 20px;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.back-button {
  display: inline-block;
  margin-top: 30px;
  padding: 10px 20px;
  background: #ffffff20;
  color: white;
  text-decoration: none;
  border-radius: 10px;
  transition: background 0.3s;
}

.back-button:hover {
  background: #ffffff40;
}