:root {
    color-scheme: light dark
}

@media (prefers-color-scheme: dark) {
    :root {
        --dark-mode-opacity: 100%;
        --text-color: lightgrey;
        --link-color: lightgrey;
        --opposite: #14082e;
        --bg-color: #6b6044;
        --blog-fg: white;
        --blog-bg: #101010;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --dark-mode-opacity: 0%;
        --text-color: black;
        --link-color: #6c83fe;
        --opposite: #6c83fe;
        --bg-color: #ffe8bc;
        --blog-fg: black;
        --blog-bg: white;
    }
}

footer {
    text-align: center;
    width: 100%;
    z-index: 1;
    color: var(--text-color);
}

a, .addr, .nearly-addr {
    text-decoration: underline;
    color: var(--link-color);
    background-color: transparent;
    border: none;
}

body.cafe, html {
    margin: 0;
    padding: 0;
}

body.cafe {
    display: flex;
    flex-direction: column;
    justify-content: end;
    overflow-x: hidden;
    overflow-y: hidden;
    aspect-ratio: 16/9;
    width: 100vw;
    image-rendering: pixelated;
    transition: 2s ease-out background-color;
    background-color: var(--bg-color);
}

.cafe-bg {
    position: absolute;
    z-index: 0;
    aspect-ratio: 16/9;
    width: 100vw;
    image-rendering: pixelated;
}

.cafe-dark-bg {
    z-index: 1;
    pointer-events: none;
    position: absolute;
    margin: 0;
    padding: 0;
    aspect-ratio: 16/9;
    image-rendering: pixelated;
    width: 100vw;
    content: "";
    transition: 2s ease-out opacity;
    opacity: var(--dark-mode-opacity);
}

.boom-checkbox {
    top: 11vw;
    margin-top: 2vw;
    width: 6vw;
    height: 6vw;
    position: absolute;
    left: calc(70vw - 7px);
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

label:has(+ .boom-checkbox) {
    position: absolute;
    top: 11vw;
    left: 70vw;
    width: 10vw;
    height: 10vw;
    background-image: url(boombox/inactive.png);
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
    animation: boombox-hover-down 400ms forwards normal;
}

body.animation-pause * {
    animation-duration: 0ms !important;
}

@keyframes boombox-hover-up {
    0% {
        background-image: url(boombox/hover1.png)
    }
    25% {
        background-image: url(boombox/hover2.png)
    }
    50% {
        background-image: url(boombox/hover3.png)
    }
    75% {
        background-image: url(boombox/hover4.png)
    }
}

@keyframes boombox-hover-down {
    0% {
        background-image: url(boombox/hover4.png)
    }
    25% {
        background-image: url(boombox/hover3.png)
    }
    50% {
        background-image: url(boombox/hover2.png)
    }
    75% {
        background-image: url(boombox/hover1.png)
    }
}

@keyframes boombox-active {
    0% {
        background-image: url(boombox/active1.png)
    }
    14% {
        background-image: url(boombox/active2.png)
    }
    29% {
        background-image: url(boombox/active3.png)
    }
    43% {
        background-image: url(boombox/active4.png)
    }
    57% {
        background-image: url(boombox/active5.png)
    }
    71% {
        background-image: url(boombox/active6.png)
    }
    86% {
        background-image: url(boombox/active7.png)
    }
}

label:has(+ .boom-checkbox:hover) {
    animation: boombox-hover-up 400ms step-end forwards;
    background-image: url(boombox/hover4.png);
}

label:has(+ .boom-checkbox:checked) {
    background-image: url(boombox/active1.png);
    animation: boombox-active 2s step-end infinite;
}

.light-darkbox {
    position: absolute;
    top: 9.5vw;
    left: 82vw;
    width: 8vw;
    height: 8vw;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.title {
    z-index: 1;
    position: absolute;
    top: 1vw;
    left: 10vw;
    color: var(--opposite)
}

label:has(+ .light-darkbox) {
    background-image: url(dark.png);
    position: absolute;
    top: 9.5vw;
    left: 82vw;
    width: 8vw;
    height: 8vw;
    background-image: url(dark.png);
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
    border: solid 4px transparent;
}

label:has(+ .light-darkbox:hover) {
    border: solid 4px var(--bg-color);
    border-radius: 9999px;
    
    background-clip: content-box;
}

label:has(+ .light-darkbox:checked) {
    background-image: url(light.png);
}

.laptop-link {
    background-color: white;
    color: black;
    z-index: 1;
    position: absolute;
    top: 30.5vw;
    left: 56vw;
    width: 6vw;
    height: 6vw;
    opacity: 0;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
}

.laptop-light {
    background-image: url(laptop/light1.png);
    animation: laptop-light 2s step-end infinite;
    z-index: 1;
    position: absolute;
    top: 27vw;
    left: 54.5vw;
    width: 11vw;
    height: 11vw;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
    border: solid 4px transparent;
    transition: 1s ease-out opacity;
    opacity: var(--dark-mode-opacity);
}

@keyframes laptop-light {
    0% {
        background-image: url(laptop/light1.png)
    }
    50% {
        background-image: url(laptop/light2.png)
    }
}


label:has(+ .laptop-link) {
    background-image: url(laptop/inactive.png);
    position: absolute;
    top: 27vw;
    left: 54.5vw;
    width: 11vw;
    height: 11vw;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
    border: solid 4px transparent;
}

label:has(+ .laptop-link:hover) {
    background-image: url(laptop/hover.png);
    background-clip: content-box;
}

label:has(+ .laptop-link:active) {
    background-image: url(laptop/active.png);
}

label:has(+ .laptop-link:active) {
    background-image: url(laptop/active.png);
}

h1, h2, h3, h4, h5, h6 {
    font-family: Josefin Sans;
    font-weight: bold;
    transition: 2s ease-in color;
}

.cafe > h1 {
    color: var(--opposite);
}

[up-flashes] {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    z-index: 0;
}

.playing {
    background-color: grey;
    border: black solid 5px;
    border-radius: 20px;
    padding: 20px;
    color: white;
    text-align: center;
    width: auto;
}

.invisible {
    opacity: 0;
}

.blog-body {
    background-color: var(--blog-bg);
    color: var(--blog-fg);
    background-image: unset;
    margin: 30px;
}

.blog-body::after {
    background-image: unset;
}

.blog-main, up-modal-box, up-popup, article {
    background-color: var(--blog-bg);
    background-image: unset;
}

.blog-main, .post-main, article {
    color: var(--blog-fg);
}

.blog-link {
    font-size: 18pt;
    font-family: Josefin Sans;
    font-weight: bold;
}

li {
    margin-top: 5px;
    margin-bottom: 5px;
}

.centered {
    display: flex;
    justify-content: center;
    width: 100%;
}

input:focus-visible {
    opacity: 50%;
    outline: 4px solid black;
}

.addr, .nearly-addr {
    cursor: pointer;
    user-select: none;
    font-size: 1em;
    padding: 0;
    margin: 0;
    font-family: unset;
    background-color: var(--blog-bg);
    transition: 2s ease-in background-color;
    padding: 4px;
}

.addr::before {
    content: '✉️ ';
}

.gopher-link {
    background-color: white;
    color: black;
    z-index: 1;
    position: absolute;
    top: 48vw;
    left: 93.5vw;
    width: 6vw;
    height: 6vw;
    opacity: 0;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
}

.gopher-link:focus-visible {
    opacity: 50%;
    outline: 4px solid var(--blog-bg);
}

.laptop-link:focus-visible {
    opacity: 50%;
    outline: 4px solid var(--blog-bg);
}

.about-link {
    background-color: white;
    color: black;
    z-index: 1;
    position: absolute;
    top: 15.5vw;
    left: 23.5vw;
    width: 4vw;
    height: 3vw;
    opacity: 0;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
}

.about-link:focus-visible {
    opacity: 50%;
    outline: 4px solid var(--blog-bg);
}

.site-badge {
    image-rendering: pixelated;
    width: 352px;
    height: 124px;
}

textarea {
    min-height: 100px;
    min-width: 300px;
}

.map-link {
    background-color: white;
    color: black;
    z-index: 1;
    position: absolute;
    top: 16vw;
    left: 32vw;
    width: 8vw;
    height: 5vw;
    opacity: 0;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
}

.map-link:focus-visible {
    opacity: 50%;
    outline: 4px solid var(--blog-bg);
}

.badge-list, .portfolio-cards {
    display: grid;
    justify-content: start;
    width: min-content;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

label:has(+ input) {
    color: transparent;
}

.portfolio-link {
    background-color: white;
    color: black;
    z-index: 1;
    position: absolute;
    top: 19vw;
    left: 44.5vw;
    width: 5.5vw;
    height: 7vw;
    opacity: 0;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
}

.portfolio-link:focus-visible {
    opacity: 50%;
    outline: 4px solid var(--blog-bg);
}

.portfolio-cards > article {
    padding: 40px;
    border-radius: 20px;
    border: solid 1px var(--blog-fg);
}

.portfolio-cards {
    width: 100%;
}

.chips { /* yummy */
    display: flex;
    gap: 10px;
}

.chip {
    list-style: none;
    padding: 5px;
    border-radius: 10px;
    border: solid 1px var(--blog-fg);
}

@media (width <= 1600px) {
    .portfolio-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (width <= 1000px) {
    .portfolio-cards {
        grid-template-columns: repeat(1, 1fr);
    }
}

up-modal .portfolio-cards {
    grid-template-columns: repeat(1, 1fr);
}