*{box-sizing:border-box}

body{
  margin:0;
  font-family:Segoe UI,Arial,sans-serif;
  background:url("https://images.unsplash.com/photo-1529156069898-49953e39b3ac") center/cover fixed;
  color:white;
}

.container{
  max-width:1100px;
  margin:40px auto;
  background:rgba(0,0,0,.85);
  padding:40px;
  border-radius:20px;
}

h1,h2{
  text-align:center;
  color:#ffd700;
}

input,button{
  width:100%;
  padding:14px;
  margin-bottom:12px;
  border:none;
  border-radius:10px;
  font-size:16px;
}

button{
  background:#2ecc71;
  color:white;
  font-weight:bold;
  cursor:pointer;
}

.logout{
  background:#e74c3c;
  margin-top:20px;
}

.activities{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:20px;
}

.card{
  background:rgba(255,255,255,.12);
  padding:20px;
  border-radius:15px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.card h3{
  margin:0;
  color:#ffd700;
}

.card a{
  color:#00d4ff;
  text-decoration:none;
}

.reg{
  background:#27ae60;
}

.unreg{
  background:#c0392b;
}

/* APIE MANE */
.about-me{
  display:flex;
  gap:30px;
  margin-top:60px;
  padding:30px;
  background:rgba(0,0,0,.6);
  border-radius:20px;
  align-items:center;
}

.about-me img{
  width:200px;
  border-radius:20px;
  border:3px solid #ffd700;
}

@media(max-width:768px){
  .about-me{
    flex-direction:column;
    text-align:center;
  }
}