/* Styling for the <header> and it's children. */

header {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    fill: #aaa;
    font-size: 30px;
}

header a {
    padding: 0.25em;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
}

header span,
header svg {
    transition: 200ms;
}

header svg {
    fill: inherit;
}

header a:hover {
    color: red;
    fill: red;
}

header > :hover svg:nth-child(1) {
    transform: rotate(-25deg);
}