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

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #f5f5f5;
  /* use min-height and dvh for better mobile support */
  min-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* add safe area padding for iOS devices */
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.circles {
  display: flex;
  /* prevent wrapping, keep circles in one row */
  flex-wrap: nowrap;
  gap: 16px;
  padding: 50px;
}

.circle {
  flex-shrink: 0;
  width: 75px;
  height: 75px;
  border-radius: 50%;
}

/* responsive circles for smaller screens */
@media (max-width: 500px) {
  .circles {
    padding: 30px 20px;
    gap: 0;
    /* evenly space circles across full width */
    justify-content: space-between;
  }
  .circle {
    /* larger circles sized to fill width with even spacing */
    width: 80px;
    height: 80px;
  }
  .contact {
    padding: 30px 20px;
    /* reduce bottom padding to lower text */
    padding-bottom: calc(25px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 380px) {
  .circles {
    padding: 20px 15px;
    gap: 0;
    /* evenly space circles across full width */
    justify-content: space-between;
  }
  .circle {
    /* larger circles for very small screens */
    width: 70px;
    height: 70px;
  }
  .contact {
    padding: 20px 15px;
    /* reduce bottom padding to lower text */
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

.circle-1 {
  background-color: #d9d9d9;
}

.circle-2 {
  background-color: #999999;
}

.circle-3 {
  background-color: #666666;
}

.circle-4 {
  background-color: #000000;
}

/* Contact info positioned at bottom left */
.contact {
  padding: 50px;
  /* add extra bottom padding using calc with safe area */
  padding-bottom: calc(50px + env(safe-area-inset-bottom, 10px));
}

.twitter {
  font-size: 14px;
  color: #666666;
  margin-bottom: 8px;
}

.email {
  font-size: 14px;
  color: #666666;
}