arimelody-web/public/style/index.css

main {
    width: 	min(calc(100% - 4rem), 900px);
    min-height: calc(100vh - 10.3rem);
    margin: 0 auto 2rem auto;
}

.fancyheader-inner {
    display: flex;
    justify-content: space-between;

    .right {
        margin-top: auto;
    }

    h1 .icon {
        width: .5em;
        height: .5em;
        transform: translateY(-.3em);
        animation: wiggle-loop 2s cubic-bezier(.4,0,.6,1) alternate infinite;
    }
}

@media (prefers-color-scheme: dark) {
    .fancyheader-inner h1 .icon {
        filter: invert();
    }
}

@keyframes wiggle-loop {
    from { transform: translateY(-.3em) rotate(0deg); }
    to   { transform: translateY(-.3em) rotate(10deg); }
}

h2 {
    color: var(--secondary);
}

h3 {
    color: var(--tertiary);
}

h1, h2, h3, h4, h5, h6, p, small, blockquote {
    transition: background-color 0.1s;

    &:hover {
        background-color: #fff1;
    }
}

h1, h2, h3, h4, h5, h6 {
    a {
        color: inherit;

        &:hover {
            text-decoration: none;
        }
    }
}

blockquote {
    margin: 1rem 0;
    padding: 0 2.5rem;
}

hr {
    text-align: center;
    line-height: 0px;
    border-width: 1px 0 0 0;
    border-color: #888;
    margin: 1.5em 0;
    overflow: visible;
}

ul.platform-links {
    display: flex;
    margin: 0 0 0 auto;
    padding: 0;

    li {
        list-style: none;

        a {
            padding: .5em;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: transparent;
            transition-property: background-color, box-shadow;
            transition-duration: .2s;
            animation:
            social-button-bouncein .5s forwards cubic-bezier(0, 1.5, .5, 1),
            social-button-fadein .2s forwards ease-out;
            opacity: 0;

            img {
                height: 1em;
                width: 1em;
            }

            &:hover {
                background-color: var(--on-background) !important;
                box-shadow: 0 0 1em var(--on-background);
                text-decoration: none;
            }
        }
    }
}

@keyframes social-button-bouncein {
    from { transform: translateY(1em); }
    to { transform: none; }
}

@keyframes social-button-fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

ul#projects {
    padding: 0;
    list-style: none;
}

li.project-item {
    padding: .5em;
    border: 1px solid var(--links);
    margin: 1em 0;
    display: flex;
    flex-direction: row;
    gap: .5em;
    border-radius: 2px;
    transition-property: color, border-color, background-color, box-shadow;
    transition-duration: .2s;
    cursor: pointer;
}
li.project-item a {
    transition: color .2s linear;
}

li.project-item:hover {
    color: #eee;
    border-color: #eee;
    background-color: var(--links) !important;
    text-decoration: none;
    box-shadow: 0 0 1em var(--links);
}
li.project-item:hover a {
    color: #eee;
}

li.project-item .project-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

li.project-item img.project-icon {
    width: 2.5em;
    height: 2.5em;
    object-fit: cover;
    border-radius: 2px;
}

li.project-item span.project-icon {
    font-size: 2em;
    display: block;
    width: 45px;
    height: 45px;
    text-align: center;
    /* background: #0004; */
    /* border: 1px solid var(--on-background); */
    border-radius: 2px;
}

li.project-item a {
    text-decoration: none;
}

li.project-item p {
    margin: 0;
}

div#web-buttons {
    margin: 2rem 0;
}

#web-buttons a {
    text-decoration: none;
}

#web-buttons img {
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

#web-buttons img:hover {
    margin: -1px;
    border: 1px solid #eee;
    transform: translate(-2px, -2px);
    box-shadow: 1px 1px 0 #eee, 2px 2px 0 #eee;
}

#live-banner {
    margin: 1em 0 2em 0;
    padding: 1em;
    border-radius: 4px;
    border: 1px solid var(--primary);
    box-shadow: 0 0 8px var(--primary);
}

#live-banner p {
    margin: 0;
}

.live-highlight {
    color: var(--primary);
}

.live-preview {
    display: flex;
    flex-direction: row;
    justify-content: start;
    gap: 1em;
}

.live-preview div:first-of-type {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: .3em;
}

.live-thumbnail {
    border-radius: 4px;
}

.live-button {
    margin: .2em;
    padding: .4em .5em;
    display: inline-block;
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 4px;
    transition: color .1s linear, background-color .1s linear, box-shadow .1s linear;
}

.live-button:hover {
    color: var(--background);
    background-color: var(--primary);
    box-shadow: 0 0 8px var(--primary);
    text-decoration: none;
}

.live-info {
    display: flex;
    flex-direction: column;
    gap: .3em;
    overflow-x: hidden;
}

#live-banner h2 {
    margin: 0;
    color: var(--on-background);
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-style: italic;
}

.live-pinger {
    width: .5em;
    height: .5em;
    margin: .1em .2em;
    display: inline-block;
    border-radius: 100%;
    background-color: var(--primary);
    box-shadow: 0 0 4px var(--primary);
    animation: live-pinger-pulse 1s infinite alternate ease-in-out;
}

@keyframes live-pinger-pulse {
    from {
        opacity: .8;
        transform: scale(1.0);
    }
    to {
        opacity: 1;
        transform: scale(1.1);
    }
}

.live-game {
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
}

.live-game .live-game-prefix {
    opacity: .8;
}

.live-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.live-viewers {
    opacity: .5;
}

.webring {
    display: flex;
    flex-direction: row;
}
.webring a {
    border: 1px solid var(--links);
    height: 1.5em;
    padding: 0 0.5em;
    text-align: center;
    line-height: 1.7em;
    transition: color .1s linear, background-color .1s linear, box-shadow .1s linear;
}
.webring a:nth-child(1) {
    border-radius: 2px 0 0 2px;
    border-right: none;
}
.webring a:nth-child(3) {
    border-radius: 0 2px 2px 0;
    border-left: none;
}
.webring a:hover {
    color: #eee;
    border-color: #eee;
    background-color: var(--links) !important;
    text-decoration: none;
    box-shadow: 0 0 1em var(--links);
}