:root {
    --step--2: clamp(0.625rem, 0.7185rem + -0.1207vw, 0.6944rem);
    --step--1: clamp(0.8331rem, 0.8155rem + 0.088vw, 0.8838rem);
    --step-0: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
    --step-1: clamp(1.2rem, 1.0026rem + 0.987vw, 1.7675rem);
    --step-2: clamp(1.44rem, 1.0715rem + 1.8424vw, 2.4994rem);
    --step-3: clamp(1.7281rem, 1.1001rem + 3.1402vw, 3.5338rem);
    --step-4: clamp(2.0738rem, 1.057rem + 5.0837vw, 4.9969rem);
    --step-5: clamp(2.4881rem, 0.896rem + 7.9609vw, 7.0656rem);
  }
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-family: 'IBM Plex Sans', sans-serif;
    justify-content: center;
    align-items: center;
}

img {
    display: block;
    width: 256px;
    border-radius: 50%;
    object-fit: cover;
}

p {
    color: #333;
}

h1 {
    color: #333;
    font-size: var(--step-3);
    margin: 0;
}

#socials {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--step-0);
}

#socials a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #333;
    margin: 0 1rem;
}

#socials svg {
    margin: 0 8px;
    color: #333;
    transition: color 0.5s ease-in-out;
}

#socials svg:hover {
    color: #000;
}