.header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5rem;
    width: 100%;
    flex-grow: 1;

    .logo {
        margin: 0;
        height: 17rem;
        cursor: pointer;

        img {
            display: block;
            height: 100%;
        }
    }

    .menu {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: auto;
        gap: 3rem;
    }
}

.floating-button {
    --x: 0;
    --y: 0;
    position: absolute;
    top: calc(var(--y) * 1px);
    left: calc(var(--x) * 1px);
    margin: 0;
    padding: .25rem;
    border: none;
    border-radius: .125rem 50% 50% 50%;
    background: transparent;
    color: #FEE;
    border: 3px solid currentColor;
    cursor: pointer;
    img, .icon {
        display: block;
        width: 2.5rem;
        height: 2.5rem;
    }
}

.big-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    width: 8rem;
    height: 8rem;
    padding: 0;
    font-size: 1.25rem;
    font-weight: 500;
    border: none;
    border-radius: 1rem;
    background: var(--global-background);
    color: white;
    cursor: pointer;

    img, .icon {
        display: block;
        width: 4rem;
        height: 4rem;
    }

    &:focus {
        outline: 2px solid #f73d62;
        outline-offset: 2px;
    }
}

.open .header {
    flex-direction: row;
    justify-content: space-between;
    height: auto;
    flex-grow: 0;

    .logo {
        height: 6.0625rem;
    }

    .menu {
        gap: 2rem;
    }

    .floating-button {
        border: 2px solid currentColor;
        img, .icon {
            width: 2rem;
            height: 2rem;
        }
    }

    .big-button {
        width: 6rem;
        height: 6rem;
        border-radius: .75rem;
        font-size: 1rem;

        img, .icon {
            width: 3rem;
            height: 3rem;
        }
    }
}

.transition .header {
    .logo {
        transition: 500ms filter ease;
    }
    .menu {
        transition: 500ms gap ease;
    }

    .floating-button {
        transition: 500ms border ease;
        img, .icon {
            transition:
                500ms width ease,
                500ms height ease;
        }
    }

    .big-button {
        transition: 500ms all ease;

        img, .icon {
            transition: 500ms all ease;
        }
    }
}