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

body {
    --gap: 1em;
    --max-width: 36rem;
    --font-size: 1.25rem;
    --font-size-small: .95rem;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: var(--font-size);
    background-color: hsl(147, 100%, 74%);
    margin: calc(var(--gap) * 4) 0 calc(var(--gap) * 4);
    padding: 0;
    color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    line-height: 1.5;
    overflow-wrap: break-word;

    & > * {
        width: calc(96vw - 2rem);
        max-width: var(--max-width);
    }
}

a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid #0004;

    &:hover {
        color: inherit;
        border-bottom: 1px solid #000F;
    }
}

.about {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    border: 1px solid #0004;
    border-radius: .2em;
    box-shadow: 1px 1px 1px #0004;
    max-width: calc(var(--max-width) + var(--gap) * 2 * 1.5);
    padding: calc(var(--gap) * 0.75) calc(var(--gap) * 1.5);
    font-size: var(--font-size-small);
}

.publication-date {
    color: #0008;
    font-size: var(--font-size-small);
}

.go-home {
    color: #0008;
    font-size: var(--font-size-small);
}