@import url("https://fonts.cdnfonts.com/css/nevermind-mono");

@font-face {
    font-family: "Cartridge";
    src: url("/assets/fonts/Cartridge-LightSoft.otf") format("opentype");
    font-weight: "lighter";
    font-style: "normal";
}

@font-face {
    font-family: "Cartridge";
    src: url("/assets/fonts/Cartridge-RegularSoft.otf") format("opentype");
    font-weight: "normal";
    font-style: "normal";
}

:root {
    --spacing: 8px;
    --background-color: #efefef;
    --tile-background-color: #ffffff;
    --tile-shadow-color: #ff5349;
    --tite-border-color: #e2e2e2;
    --highlight-color: #f1184c;
}

a {
    color: var(--highlight-color);
}

html,
body {
    padding: 0;
    margin: 0;
}
html {
    font-family: "Lato", "Helvetica Neue", Helvetica, sans-serif;
}

body {
    background-color: var(--background-color);
    background-image: url("/assets/images/dog-paw-bg.png");
}

.container {
    margin: 0 auto;
}

h1 {
    margin: 0 0 calc(4 * var(--spacing)) 0;
    font-family: Cartridge, Arial, Helvetica, sans-serif;

    .play-click {
        font-size: inherit;
        font-weight: inherit;
        background: none;
        border: none;
        color: var(--highlight-color);
        cursor: pointer;
        touch-action: manipulation;
    }

    .play-click:hover {
        filter: brightness(1.1);
    }
    .play-click:active {
        filter: brightness(0.9);
    }
}

.hero-title {
    text-align: center;

    p {
        text-align: center;
    }
}

.header-links {
    ul {
        padding: 0;
        text-align: right;
    }

    li {
        font-size: 1.5em;
        display: inline;
        margin: var(--spacing);
    }

    a {
        font-family: Cartridge, Arial, Helvetica, sans-serif;
        text-decoration: none;
        font-weight: bolder;
    }
}

.counter {
    background-color: #000;
    padding: var(--spacing);
    border-radius: 5px;
    display: inline-block;
    font-family: "NeverMind Mono", sans-serif;

    span {
        border-radius: 5px;
        background-color: #191820;
        color: white;
        padding: 0 var(--spacing);
    }
    span:not(:last-child) {
        margin-right: var(--spacing);
    }
}

.catchphrase {
    color: #000;
}
@media (width <= 450px) {
    .header-links {
        ul {
            text-align: center;
        }
        li {
            font-size: 1.1em;
        }
    }
    h1 {
        font-size: 4em;
    }

    .counter span {
        font-size: 4em;
    }

    .runs {
        grid-template-columns: 1fr;
        gap: calc(2 * var(--spacing));
    }

    .tiny-dog-container {
        width: calc(100% - var(--spacing));
    }
}

@media (min-width: 450px) and (max-width: 900px) {
    h1 {
        font-size: 6em;
    }

    .counter span {
        font-size: 8em;
    }

    .runs {
        grid-template-columns: repeat(2, 1fr);
        gap: calc(2 * var(--spacing));
    }

    .tiny-dog-container {
        width: 50%;
    }
}

@media (min-width: 900px) {
    .counter span {
        font-size: 10em;
    }

    h1 {
        font-size: 8em;
    }

    .container {
        width: 900px;
    }

    .runs {
        grid-template-columns: repeat(3, 1fr);
        gap: calc(5 * var(--spacing));
    }

    .tiny-dog-container {
        width: 50%;
    }
}

.runs {
    display: grid;
}

.dogs {
    text-align: center;
}

.dog-icon {
    width: 30px;
}

@media (width > 450px) {
    .run-details .infos {
        display: flex;
        gap: var(--spacing);
        font-size: 3em;
    }
}

@media (width <= 450px) {
    .run-details {
        h1 {
            margin: var(--spacing);
        }

        .route-image {
            margin: var(--spacing);
        }
        .infos div {
            color: blue;
            font-size: 2em;
            margin: var(--spacing);
        }
    }
}

.run-details {
    h1 {
        margin-bottom: var(--spacing);
    }

    .infos {
        margin-bottom: var(--spacing);

        div {
            flex-grow: 1;
            border-radius: 5px;
            font-family: Cartridge, Arial, Helvetica, sans-serif;
            padding: calc(2 * var(--spacing));
            color: #fff;
            background-color: var(--highlight-color);
            box-shadow: 0.125rem 0.125rem rgba(0, 0, 0, 0.075);
        }
    }

    .route-image {
        padding: calc(2 * var(--spacing)) var(--spacing);
        position: relative;
        border-radius: 5px;
        background-color: var(--highlight-color);
        box-shadow: 0.125rem 0.125rem rgba(0, 0, 0, 0.075);

        .location {
            font-family: Cartridge, Arial, Helvetica, sans-serif;
            position: absolute;
            right: 0;
            bottom: var(--spacing);
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            background-color: var(--highlight-color);
            padding: 0 var(--spacing);
            margin: 0;
            color: #fff;
            font-size: 1.1em;
        }
    }

    svg {
        margin: 0 var(--spacing);
        max-width: calc(100% - 2 * var(--spacing));
        fill: none;
        stroke: #fff;
        stroke-width: 4px;
    }
}
.run {
    box-shadow: 0.125rem 0.125rem rgba(0, 0, 0, 0.075);
    border-radius: 5px;
    display: flex;
    flex-direction: column;

    .route-image {
        svg {
            max-width: 100%;
            fill: none;
            stroke: var(--highlight-color);
            stroke-width: 2px;
        }
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: calc(2 * var(--spacing));
    }

    .icon {
        width: 1em;
    }

    .count-container {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        background-color: var(--highlight-color);
        color: #fff;
    }

    .infos {
        border-top: 1px solid var(--highlight-color);
        background: #f5f3f3;
    }

    .infos li {
        list-style-type: none;
    }

    background-color: var(--tile-background-color);

    .count {
        text-align: center;
        font-size: 6em;
        line-height: 1em;
        font-family: Cartridge, Arial, Helvetica, sans-serif;
        display: block;
    }
}

footer {
    margin-top: calc(2 * var(--spacing));
    text-align: center;
}

@keyframes sprite {
    from {
        object-position: 0% 0%;
    }
    to {
        object-position: 100% 0%;
    }
}

@keyframes translate {
    0% {
        left: -32px;
        transform: scaleX(1);
    }

    50% {
        transform: scaleX(1);
        left: calc(100% - 32px);
    }

    50.1% {
        transform: scaleX(-1);
        left: calc(100% - 32px);
    }

    99.9% {
        transform: scaleX(-1);
        left: -32px;
    }

    100% {
        transform: scaleX(1);
        left: -32px;
    }
}

.tiny-dog-sprite {
    width: 64px;
    height: 64px;
    object-fit: cover;
}

.tiny-dog-container {
    position: relative;
    height: 44px;
    margin: calc(5 * var(--spacing)) auto calc(5 * var(--spacing)) auto;
    border-bottom: 1px solid #000;
}

.tiny-dog-container img {
    animation:
        sprite 1s steps(7, jump-none) infinite,
        translate 30s linear infinite;
    position: absolute;
}

.tiny-dog-bottom-container {
    position: relative;
    height: 64px;
    overflow-y: hidden;

    img {
        left: -32px;
        top: 18px;
        animation:
            sprite 1s steps(7, jump-none) 3s infinite,
            translate 60s linear 3s infinite;
        position: absolute;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tiny-dog-container,
    .tiny-dog-bottom-container {
        animation: none;
    }
}

/* Content */
.content {
    margin: calc(2 * var(--spacing));
}

p {
    text-align: justify;
}

h1,
h2,
h3 {
    color: var(--highlight-color);
}

h3 {
    margin-bottom: 0;
}
h3 + p {
    margin-top: 0;
}
/* } */