:root {
    font-family: sans-serif;

    --color-background: hsl(138.65deg 100% 90%);
    --color-accent: hsl(6.18deg 100% 71.56%);
    --color-green: hsl(142.72deg 64.27% 45%);

    --transition-duration: 100ms;
    --transition-duration-slow: 250ms;
}

html,
body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

* {
    box-sizing: border-box
}

body {
    background: var(--color-background);
    color: var(--color-green);
    display: grid;
    place-items: center;
}

main {
    display: flex;
    justify-content: center;
    align-items: baseline;
    font-weight: bold;
    font-size: clamp(2rem, 12vw, 6rem);
    cursor: default;

    .name {
        display: flex;
    }

    .ours {
        transition: color var(--transition-duration);
    }

    #and {
        padding: 0 0.25em;
        transition:
            opacity var(--transition-duration-slow),
            max-width var(--transition-duration-slow),
            padding var(--transition-duration-slow);
        max-width: 2ch;
    }

    .mine {
        display: inline-block;
        transition:
            opacity var(--transition-duration-slow),
            max-width var(--transition-duration-slow);
        max-width: 3ch;
        overflow: hidden;
    }

    &:hover {
        .ours {
            color: var(--color-accent)
        }

        #and {
            opacity: 0;
            max-width: 0;
            padding: 0;
        }

        .mine {
            opacity: 0;
            max-width: 0;
        }
    }
}