* {
margin: 0;
padding: 0;
}

body {
font-family: "Lexend", sans-serif;
background: #F5DEB3;
}

.page-wrapper {
margin: 0 auto;
max-width: 700px;
}

.content {
margin-top: 16px;
padding: 16px;
}

a {
text-decoration: none;
font-family: "Lexend", sans-serif;
}

a:hover {
text-decoration: underline;
}

nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
background: #D2B48C;
box-shadow: 4px 4px  rgba(0, 0, 0, 0.5);
--webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
margin: 1rem;
position: sticky;
top: 1rem;

}

.status-card {
background: #D2B48C;
box-shadow: 4px 4px  rgba(0, 0, 0, 0.5);
margin: 1rem;
padding: 16px;
display: flex;
align-items: center;
gap: 16px;
}

.avatar {
width: 70px;
height: 70px;
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.5)
}

.user-info h3 {
margin: 0;
}

.user-info p {
margin: 4px 0;
}

.title h1 {
font-size: 20px;
}

.title a {
text-decoration: none;
color: inherit;
}

.spacing-4 {
margin-top: 4px;
}

.spacing-8 {
margin-top: 8px;
}

.spacing-16 {
margin-top: 16px;
}

.spacing-32 {
margin-top: 32px;
}

.spacing-64 {
margin-top: 64px;
}

.button-container {
display: flex;
margin: 1rem;
gap: 16px;
}

.button-container button {
flex: 1;
border: none;
padding: 8px;
background: #D2B48C;
box-shadow: 4px 4px  rgba(0, 0, 0, 0.5);
color: black;
}

.responsive-image {
max-width: 100%;
height: auto;
}

.copyright-footer {
text-align: center;
font-size: 0.8em;
color: rgba(0, 0, 0, 0.5);
}