*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --emoji-font-family: "Apple Color Emoji", "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol";
    --heading-font: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --body-font: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --heading-color: oklch(60% 29% 227deg);
    --subheading-color: oklch(50% 24% 228deg);
}

@view-transition {
  navigation: auto;
}

::view-transition-new(root) {
  animation: 0.3s ease-in both make-an-entrance;
}

html {
    height: 100%;
    overflow: hidden;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: block;
    overflow: hidden;
    overscroll-behavior-y: none;
    background-color: oklch(19% 0% 68deg);
}

main {
    height: 100%;
    padding: 1rem 0 0;
    display: grid;
    place-items: center;
    justify-items: center;
}

header {
    display: grid;
    place-items: center;
    justify-items: center;
}

.centre-container {
    padding: 1.5rem 2rem;
    display: grid;
    place-items: center;
    justify-items: center;
    grid-auto-flow: column;
    gap: 2rem;
    background-color: oklch(23% 0% 68deg);
}

h1, h2 {
    font-family: var(--heading-font);
}

h1 {
    margin: 0 0 1rem;
    color: var(--heading-color);
}

h2 {
    color: var(--subheading-color);
}

.profile-picture {
    width: 220px;
    height: 220px;
    border-radius: 110px;
}

@keyframes make-an-entrance {
    from {
        opacity: .1;
    }
    to {
        opacity: 1;
    }
}