@import "fonts/jetbrainsmono/jetbrainsmono.css";

:root {
    --white: white;
    --even-lighter: #ffcaf1;
    --lighter: #ffb3cb;
    --light: #ff9bba;
    --darker: #ff6b99;
    --even-darker: #ad4b69;
    --dark: #42303e;
}

* {
    font-family: "JetBrains Mono", monospace !important;
}

html {
    background-color: var(--dark);
}

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

a:visited {
    color: var(--darker);
}

footer {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: auto;
    padding-bottom: 2dvh;
}

img {
    max-width: -webkit-fill-available;
    max-width: -moz-available;
    max-width: 100%;
}

#nav {
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
}

#nav-pages {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 50vw;
}

.nav-link {
    color: var(--lighter);
}

.nav-link:visited {
    color: var(--lighter);
}

.projects {
    display: flex;
    justify-content: center;
    gap: 1vh;
    flex-wrap: wrap;
}

.project {
    width: 30vh;
    height: 30vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.project-name {
    backdrop-filter: blur(1px);
    width: 100%;
    height: 100%;
    text-align: center;
    align-content: center;
    color: var(--white);
    text-decoration: none;
    text-shadow: 2px 2px 5px black;
}

.project-name:hover {
    backdrop-filter: none;
}

.project-name:visited, .project-name:hover, .project-name:active {
    color: inherit;
}

.project-container {
    display: flex;
    justify-content: center;
}

.project-img {
    max-width: min(75vh, 95vw);
}

.post-title {
    color: var(--even-lighter);
}

.post-title > a:visited {
    color: var(--darker);
}

.post-date {
    color: var(--even-lighter);
}

.highlight {
    background-color: transparent !important;
}

body {
    color: var(--white);
    width: 100%;
    max-width: min(1000px, 95vw);
    margin: 0 auto;
    height: 100dvh;
    display: flex;
    flex-direction: column;
}

summary {
    cursor: pointer;
}