*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{

  font-family:Arial, sans-serif;

  background:
  linear-gradient(
    rgba(0,0,0,0.45),
    rgba(0,0,0,0.45)
  ),

  url('/24552010155/images/luar.jpg');

  background-size:cover;
  background-position:center;

  min-height:100vh;

  display:flex;
  justify-content:center;
  align-items:center;

  color:white;
}

.container{

  text-align:center;

  backdrop-filter:blur(8px);

  background:rgba(255,255,255,0.08);

  padding:60px 40px;

  border-radius:30px;

  width:90%;
  max-width:900px;
}

h1{

  font-size:55px;

  margin-bottom:15px;

  font-family:Georgia, serif;
}

p{

  margin-bottom:45px;

  font-size:18px;

  color:#ddd;

  line-height:1.7;
}

.menu{

  display:flex;

  gap:25px;

  flex-wrap:wrap;

  justify-content:center;
}

.card{

  flex:1;

  min-width:220px;

  background:rgba(255,255,255,0.12);

  padding:40px 20px;

  border-radius:25px;

  transition:0.4s ease;

  text-decoration:none;

  color:white;
}

.card:hover{

  transform:
  translateY(-10px)
  scale(1.03);

  background:rgba(255,255,255,0.2);
}

.card h2{

  font-size:34px;

  margin-bottom:12px;
}

.card p{

  font-size:15px;

  margin:0;

  color:#eee;
}

.task-list{

  margin-top:50px;

  display:flex;

  flex-direction:column;

  gap:15px;
}

.task-item{

  background:rgba(255,255,255,0.08);

  padding:18px;

  border-radius:18px;

  text-decoration:none;

  color:white;

  transition:0.3s;
}

.task-item:hover{

  background:rgba(255,255,255,0.16);

  transform:translateX(5px);
}

.empty{

  background:rgba(255,255,255,0.08);

  padding:18px;

  border-radius:18px;

  color:#ddd;
}

@media(max-width:768px){

  h1{

    font-size:42px;
  }

  .menu{

    flex-direction:column;
  }
}