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

body {
min-height: 100vh;
background:
radial-gradient(circle at top left, #ff9bd7, transparent 35%),
radial-gradient(circle at bottom right, #8d7aff, transparent 35%),
#151321;

color: white;

}

.app {
width: 100%;
max-width: 520px;
margin: auto;
padding: 25px 18px;
}

/* PROFILE */

.profile {
text-align: center;
padding: 15px;
}

.avatar {
width: 85px;
height: 85px;

margin: auto;

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

font-size: 45px;

border-radius: 50%;

background: rgba(255,255,255,.15);

border: 2px solid rgba(255,255,255,.3);

box-shadow:
    0 10px 35px rgba(0,0,0,.35);

}

.profile h1 {
margin-top: 15px;
font-size: 26px;
}

.profile p {
margin-top: 5px;
opacity: .65;
}

.status {
display: inline-block;

margin-top: 12px;

padding: 6px 12px;

border-radius: 20px;

background: rgba(0,255,120,.12);

font-size: 12px;

}

/* WELCOME */

.welcome {
margin-top: 15px;

padding: 18px;

border-radius: 22px;

background: rgba(255,255,255,.10);

border: 1px solid rgba(255,255,255,.12);

backdrop-filter: blur(12px);

}

.welcome h2 {
font-size: 20px;
}

.welcome p {
margin-top: 7px;
opacity: .7;
font-size: 14px;
}

/* MENU */

.menu {
display: grid;

grid-template-columns: 1fr 1fr;

gap: 14px;

margin-top: 18px;

}

.menu-card {
border: none;

min-height: 135px;

padding: 18px;

border-radius: 22px;

color: white;

text-align: left;

cursor: pointer;

background: rgba(255,255,255,.10);

border: 1px solid rgba(255,255,255,.12);

backdrop-filter: blur(12px);

box-shadow: 0 8px 25px rgba(0,0,0,.18);

transition: .2s;

}

.menu-card:active {
transform: scale(.94);
}

.menu-card span {
display: block;

font-size: 35px;

margin-bottom: 12px;

}

.menu-card b {
display: block;

font-size: 17px;

}

.menu-card small {
display: block;

margin-top: 5px;

opacity: .65;

font-size: 11px;

}

/* ACCENTS */

.pink {
box-shadow: inset 0 0 35px rgba(255,100,190,.12);
}

.purple {
box-shadow: inset 0 0 35px rgba(160,100,255,.12);
}

.blue {
box-shadow: inset 0 0 35px rgba(70,160,255,.12);
}

.orange {
box-shadow: inset 0 0 35px rgba(255,160,70,.12);
}

/* FOOTER */

footer {
text-align: center;

margin-top: 30px;

opacity: .45;

font-size: 12px;

}