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

/* BACKGROUND ANIMATION */
body {
  display:flex;
  background: linear-gradient(270deg,#fbc2eb,#a6c1ee,#fbc2eb);
  background-size:600% 600%;
  animation:bg 10s ease infinite;
}

@keyframes bg {
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* SIDEBAR */
.sidebar {
  width:220px;
  height:100vh;
  background:#fff;
  position:fixed;
  left:0;
  top:0;
  padding:20px;
  box-shadow:2px 0 10px rgba(0,0,0,0.1);
}

.sidebar h2 {
  margin-bottom:20px;
}

.sidebar a {
  display:block;
  padding:12px;
  margin:8px 0;
  border-radius:10px;
  color:#333;
  text-decoration:none;
  transition:0.3s;
}

.sidebar a i {
  margin-right:8px;
}

.sidebar a:hover {
  background:#ff7eb3;
  color:#fff;
}

/* MAIN */
.main {
  margin-left:240px;
  width:100%;
}

/* TOPBAR */
.topbar {
  background:#fff;
  padding:15px;
  text-align:center;
  font-weight:bold;
  box-shadow:0 2px 10px rgba(0,0,0,0.1);
}

/* CONTENT */
.container {
  padding:15px;
}

/* TITLE */
.title {
  text-align:center;
  margin-bottom:10px;
}

/* BALANCE */
.balance-box {
  background:#fff;
  padding:15px;
  border-radius:12px;
  text-align:center;
  font-weight:bold;
  margin-bottom:15px;
  box-shadow:0 3px 10px rgba(0,0,0,0.1);
}

/* GRID */
.menu-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:15px;
}

/* CARD */
.menu-card {
  background:#fff;
  padding:20px;
  border-radius:15px;
  text-align:center;
  color:#000;
  box-shadow:0 5px 15px rgba(0,0,0,0.1);
  transition:0.3s;
}

.menu-card i {
  font-size:30px;
  margin-bottom:10px;
  color:#ff5e78;
}

.menu-card:hover {
  transform:translateY(-5px);
}

/* BUTTON MENU */
.menu-btn {
  display:none;
  position:fixed;
  top:15px;
  left:15px;
  background:#ff7eb3;
  color:#fff;
  padding:10px;
  border-radius:10px;
  cursor:pointer;
}

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

  .sidebar {
    left:-220px;
    transition:0.3s;
  }

  .sidebar.active {
    left:0;
  }

  .main {
    margin-left:0;
  }

  .menu-grid {
    grid-template-columns:1fr;
  }

  .menu-btn {
    display:block;
  }
}