body {
    margin: 0;
    color: #ffffff;
    line-height: 1.5;
}

a {
    color: inherit;
    text-underline-offset: 0.25rem;
    text-decoration-color: rgb(from currentColor r g b /.75);

    &:hover {
        color: #31a9ac;
    }
}

p {
    margin: 0;
}

main {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: 10vw;
    box-sizing: border-box;
    background: radial-gradient(100% 100% at var(--7-x-position) var(--7-y-position), #323366 0%, transparent), radial-gradient(100% 100% at var(--8-x-position) var(--8-y-position), #31a9ac 0%, transparent), #1b253b;
    animation-name: main;
    animation-iteration-count: infinite;
    animation-duration: 5s;
}

.vcard {
    width: 100%;
    max-width: 40rem;
}

.logo {
    display: block;
    width: auto;
    height: auto;
    margin-top: -10%;
    max-width: 100%;
}

.sr-only:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

address {
    display: flex;
    flex-flow: row wrap;
    gap: .5rem;
    margin: 2rem 0 0 0;
    justify-content: right;
    word-break: break-word;
    font-style: normal;
    font-size: 1.125em;

    .address-line {
        display: inline-block;
        text-align: right;
    }
}

@property --7-x-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 20%;
}

@property --7-y-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 80%;
}

@property --8-x-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 80%;
}

@property --8-y-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 20%;
}

:root {
    --7-x-position: 20%;
    --7-y-position: 80%;
    --8-x-position: 80%;
    --8-y-position: 20%;
}

@keyframes main {
    25% {
        --7-x-position: 15%;
        --7-y-position: 20%;
        --8-y-position: 80%;
    }
    75% {
        --7-x-position: 80%;
        --8-x-position: 15%;
        --8-y-position: 85%;
    }
}