liquet/src/styles/global.css

* {
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    --clr-primary: hsl(194, 100%, 88%);
    --clr-white: #ffffff;
    --clr-black: #000000;
    --clr-dark: #222222;
    --clr-ligher: #eeeeee;
    --text-width: 35rem;
    --animation: all 100ms ease;
    --small-shadow: 0 0.2em 0.5em -0.1em #00000014;
    --icon-width: 1.5em;
    scroll-behavior: smooth;
}

*[tabindex]:focus {
    outline: none;
}

html, body {
    padding: 0;
    margin: 0;
    font-family: Raleway, serif;
    font-size: 1rem;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

hr {
    border: 0;
    border-top: 1px solid #f5f5f5;
    margin: 1em 0;
}

.fill {
    height: 100%;
    width: 100%;
}

.fill-v {
    height: 100%;
}

.fill-h {
    width: 100%;
}

.alt-font {
    font-family: "Abril Fatface", serif;
}

.text-align-right {
    text-align: right;
}

.text-align-left {
    text-align: left;
}

.text-align-center {
    text-align: center;
}

#app {
    width: 100vw;
    height: 100vh;
    position: fixed;
    overflow-x: auto;
    background-color: var(--clr-white);
}

.view {
    max-width: var(--text-width);
}

.tags {
    margin-top: -.25em;
}

.tags > a.tag {
    padding: .25em;
    background: #eee;
    border-radius: .25em;
    display: inline-block;
    margin-top: .25em;
}

.gohome {
    padding: .5em;
    align-self: center;
    transition: var(--animation);
}

.gohome:hover {
    transform: scale(1.5);
}

img.icon {
    height: 1em;
    display: inline-block;
    vertical-align: middle;
}

.auto-width {
    max-width: var(--text-width);
    width: 100%;
}

.spacer {
    height: 8em;
}

@media only screen and (max-width: 40em) {
    .tags::-webkit-scrollbar {
        width: 2px;
        background: transparent;
        height: 2px;
    }

    .tags::-webkit-scrollbar-thumb {
        background: var(--clr-dark);
        border-radius: 2px;
    }

    .tags {
        display: flex;
        flex-direction: row;
        overflow: auto;
    }

    .tags > a.tag {
        margin: .25em;
        flex: 1 0 auto;
    }

    .gohome {
        padding: .25em;
    }
}