body {
  background: #0f0f0f;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
}

.container {
  max-width: 500px;
  width: 100%;
  text-align: center;
}

.image-container img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-bottom: 1rem;
}

h1 {
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
}

h4 {
  color: #ccc;
  font-weight: 400;
  margin-bottom: 2rem;
}

/*.tile {*/
/*  background: #1a1a1a;*/
/*  display: flex;*/
/*  align-items: center;*/
/*  gap: 1rem;*/
/*  text-decoration: none;*/
/*  color: #fff;*/
/*  border-radius: 12px;*/
/*  padding: 1rem;*/
/*  color: #fff;C*/
/*  transition: background 0.2s ease, transform 0.2s ease;*/
/*}*/
.tile {
    width: 100%;
    background: #1a1a1a;
    color: #fff;
    margin: 7px;
    color: #fff;
    transition: background 0.2s ease, transform 0.2s ease;
    border-radius: 12px;
    display: flex;
    align-items: center;        /* keep vertical alignment */
    justify-content: flex-start; /* text starts from left */
    padding: 1rem;          /* add some inner space */
    gap: 1rem;                   /* space between icon, text, button */
}

.tile p {
    font-size: 1rem;;                     /* text takes available space */
    text-align: left;             /* align text to the left */
    flex: 1;
    /*margin: 0;                  */
    /*font-size: 16px;             */
}

.tile:hover {
  background: #2a2a2a;
  transform: translateY(-2px);
}

.icon {
  width: 32px;
  height: 32px;
}

.icon svg {
  width: 100%;
  height: 100%;
  fill: white;
}

/*.tile p {*/
/*  font-size: 1rem;*/
/*  text-align: left;*/
/*  flex: 1;*/
/*}*/