@import url("https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,500;0,700;0,800;1,400;1,500;1,700;1,800&family=Alegreya+SC:wght@700&family=Alegreya+Sans:ital,wght@0,300;0,400;0,500;0,700;0,800;1,300;1,400;1,500;1,700;1,800&display=swap");

html {
        background: #071726;
        scroll-behavior: smooth;
}

body {
        margin: 0;
        min-height: 100vh;
        background: #071726;
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0) rgba(0, 0, 0);
}

html,
body {
        scrollbar-width: thin;
        scrollbar-color: #071726 rgba(255, 255, 255, 0.08);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
        width: 10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.08);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
        background: #071726;
        border-radius: 999px;
}

.tagline-word-spacing {
        word-spacing: 0.12em;
}

.project-card,
.project-card-mobile {
        border: 1px solid rgba(255, 255, 255, 0.72);
        background: rgba(7, 23, 38, 0.42);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.project-toggle {
        appearance: none;
        cursor: pointer;
}

.project-toggle.is-selected {
        border-color: rgba(255, 255, 255, 1);
        background: rgba(8, 24, 40, 0.58);
}

.project-card {
        width: 100%;
        padding: 18px 14px 16px;
}

.project-card-active {
        background: rgba(8, 24, 40, 0.58);
}

.project-card-mobile {
        width: 100%;
        padding: 16px 12px 18px;
}

.project-card-mobile-compact {
        padding-top: 14px;
        padding-bottom: 14px;
}