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

/* BODY */
body{
  background: linear-gradient(135deg, #1f1c2c, #928dab);
  color:white;
  overflow-x:hidden;
}

/* CONTAINER */
.container{
  max-width:900px;
  width:95%;
  margin:50px auto;
  padding:30px;
  border-radius:15px;

  background: rgba(0,0,0,0.9);
  backdrop-filter: blur(12px);

  box-shadow: 0 0 20px rgba(0,255,200,0.3);
  animation: fadeIn 0.6s ease;
}

/* HEADING */
h1{
  text-align:center;
  margin-bottom:20px;
  color:#00ffd5;
  text-shadow:0 0 8px #00ffd5;
}

/* TEXT */
p{
  font-size:15px;
  line-height:1.7;
  color:white;
  margin-bottom:12px;
}

/* FOOTER */
.footer{
  text-align:center;
  padding:20px;
}

.footer a{
  color:#00ffd5;
  margin:8px;
  text-decoration:none;
  position:relative;
  font-size:14px;
}

/* underline animation */
.footer a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-3px;
  width:0;
  height:2px;
  background:#00ffd5;
  transition:0.3s;
}

.footer a:hover::after{
  width:100%;
}

/* LOADER */
.loader{
  position:fixed;
  width:100%;
  height:100%;
  background:#000;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;
}

.loader div{
  width:55px;
  height:55px;
  border:5px solid #00ffd5;
  border-top:5px solid transparent;
  border-radius:50%;
  animation: spin 1s linear infinite;
}

/* ANIMATIONS */
@keyframes spin{
  100%{ transform: rotate(360deg); }
}

@keyframes fadeIn{
  from{
    opacity:0;
    transform: translateY(20px);
  }
  to{
    opacity:1;
    transform: translateY(0);
  }
}

/* PAGE TRANSITION */
.fade-out{
  opacity:0;
  transition:0.4s;
}

/* MOBILE RESPONSIVE */
@media(max-width:600px){

  .container{
    margin:25px auto;
    padding:20px;
  }

  h1{
    font-size:20px;
  }

  p{
    font-size:14px;
  }

}

.loader{
  position:fixed;
  width:100%;
  height:100%;
  background:#000;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;
  transition:0.5s ease;
}