/* Misc. */

a {
    text-decoration: none;
}

/* Organization */

html {
    /* Size */
    width:  100%;
    height: 100%;

    /* Layout */
    display:         flex;
    flex-flow:       column nowrap;
    align-items:     stretch;
    justify-content: flex-start;
}

body {
    display: contents;
}

h1 {
    /* Space */
    padding: 0;
    margin:  0;

    /* Layout */
    display:         flex;
    align-items:     center;
    justify-content: center;
}

article {
    /* Space */
    padding: 1rem;
    margin:  0;

    /* Layout */
    display:         flex;
    flex-flow:       row nowrap;
    align-items:     stretch;
    justify-content: flex-start;
}

article div {
    display:         flex;
    flex-flow:       column nowrap;
    align-items:     stretch;
    justify-content: flex-start;
}

article div:first-child {
    /* Layout */
    flex: 1 1 auto;

    /* Overflow */
    overflow: hidden;
}

article div:first-child data {
    /* Overflow */
    overflow:      hidden;
    white-space:   nowrap;
    text-overflow: ellipsis;
}

article div:last-child {
    text-align: right;
}

section p {
    text-align: center;
}

.bubble {
    /* Size */
    width: 2.5em;

    /* Space */
    padding: 0;
    margin:  1.5rem;

    /* Layout */
    display:         flex;
    align-items:     center;
    justify-content: center;

    /* Misc. */
    aspect-ratio: 1;

    /* Position */
    position: fixed;
    bottom: 0;
    right:  0;
}

/* Font */

html {
    font-family: sans-serif;
}

h1 {
    font-size: 1.25rem;
}

article div:first-child data:first-child {
    font-weight: bold;
}

@media (max-aspect-ratio: 1 / 1) {
    data, time {
        font-size: 0.75em;
    }
}

.rec {
    font-size: 0.75em;
    font-weight: bold;
}

.bubble {
    font-size: 16pt;
}

/* Theme */

html {
    background: #F8F8F8;
}

h1 {
    color: seagreen;
}

article {
    color:      #444;
    background: white;
}

article:hover {
    background: aliceblue;
}

article:active {
    background: #F0F0F0;
}

article div:first-child data:first-child {
    color: #222;
}

article:hover  div:first-child data:first-child ,
article:active div:first-child data:first-child {
    color: seagreen;
}

article data:empty:before {
    content: "-";
}

section p {
    color: #888;
}

header.bar > .menu > .rec {
    color: crimson;
}

.bubble {
    /* Color */
    color:      white;
    background: seagreen;

    /* Border */
    border-radius: 50%;

    /* Shadow */
    box-shadow: 0 4px 4px 0 #0004;
}

.bubble:hover {
    filter: brightness(120%);
}

.bubble:active {
    filter: brightness(90%);
    translate: 0 4px;
}

/* Animation */

.bubble {
    animation: bubble 1s;
}

@keyframes bubble {
    from {
        translate: 0 5em;
        transform: rotate(180deg);
    }
}

section p {
    animation: popo 1.5s;
}

@keyframes popo {
    from, 50% {
        translate: 0 -1em;
        opacity: 0;
    }
}

article {
    animation: devanesce 0.5s;
}

@keyframes devanesce {
    from {
        translate: 0 -1em;
        opacity: 0;
    }
}

.rec {
    animation: pulse 1s alternate infinite;
}

@keyframes pulse {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}