@font-face {
    font-family: "Space Mono";
    src: url("../assets/fonts/SpaceMono-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Space Mono";
    src: url("../assets/fonts/SpaceMono-Italic.ttf") format("truetype");
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Space Mono";
    src: url("../assets/fonts/SpaceMono-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Space Mono";
    src: url("../assets/fonts/SpaceMono-BoldItalic.ttf") format("truetype");
    font-style: italic;
    font-weight: 700;
    font-display: swap;
}

@keyframes pulse-cursor {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.animate-pulse-cursor::after {
    content: "_";
    animation: pulse-cursor 1s step-end infinite;
}

html,
body {
    background-color: #fccf22;
    cursor:
        url("../assets/images/cursors/duck-cursor.png") 1 1,
        url("../assets/images/cursors/duck-cursor.svg") 1 1,
        auto;
}

a,
button,
[data-project-prompt],
[data-project-card] {
    cursor: pointer;
}

.project-option {
    opacity: 0.55;
    transition:
        opacity 150ms ease,
        color 150ms ease,
        transform 150ms ease;
}

.project-option:hover,
.project-option:focus-visible,
.project-option.is-active {
    opacity: 1;
    color: #171717;
}

.project-option.is-active {
    transform: translateX(0.2rem);
    font-weight: 700;
}

.project-preview {
    touch-action: pan-y;
}