body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #503D44;
    font-family: 'Dosis', sans-serif;
    color: #012012;
    font-size: 28px;
}

h2 {
  text-transform: uppercase;
  font-size: 178px;
  color: rgba(0, 0, 0, .25);
  position: absolute;
  top: -64px;
  left: -14%;
  z-index: 0;
  margin: 0;
  text-shadow: 5px 3px white;
}
h3 {
  margin-top: 5px;
}

.container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100vh 100vh; /* Each row takes 100% of the viewport height */
}

.logo {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.content-box {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}

.card {
    width: 40%; /* Card is 50% of its container's width */
    margin: auto; /* Centers the card horizontally and adds equal top and bottom margins */
    text-align: center;
    border: none;
    border-radius: 20px;
    background-color: #FFEEEF;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1);
    padding: 20px 40px;
}

.user-level, .user-gold, .user-health, .user-experience, .tasks {
    margin-bottom: 25px; /* Space between sections */
}
.user-profile {
    position: relative;
    margin-bottom: 5px;
}

.avatarimg {
  width: 125px;
  border-radius: 10px;
}

.progress-bar {
    width: 100%;
    background-color: rgba(0,0,0,0.2); /* Background of the progress bar */
    border-radius: 5px; /* Rounded corners for progress bar */
}

.progress-bar .progress {
    height: 10px;
    background-color: #f74e52; /* Color of the progress indicator */
    border-radius: 5px; /* Rounded corners for progress */
}

.progress-bar .progress.expe {
    background-color: #ffbe5d;
}

.tasks {
    display: flex;
    justify-content: space-between;
}

.tasks .dailies, .tasks .todos {
    flex-basis: 48%; /* Adjust the width as needed */
    text-align: center;
}
.tasks-img {
  height: 20px;
  padding-top: 10px;
}

#box1 {
  background-color: #F84E8C;
}
#box2 {
  background-color: #0075A3;
}
#box3 {
  background-color: #00A383;
}
#box4 {
  background-color: #503D44;
}

/* Responsive for tablet and smaller devices */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-rows: 100vh 100vh 100vh 100vh;
    }
}