/* 
font-family: 'IBM Plex Mono', monospace;
font-family: 'Helvetic-Neue-Condensed-Bold', sans-serif;
*/

@font-face {
    font-family: 'Helvetic-Neue-Condensed-Bold';
    src: url(/fonts/Helvetica\ Neue\ Condensed\ Bold.ttf);
}

:root {
    /* main colors */

    --dark-bg: #242424;
    --darker-bg:#000;
    --gray-bg: #575757;
    --light-text: #e2e2e2;
    --dark-text: #242424;

    /* highlight colors */

    /* oranges */
    --orange1: #ff5100;
    --orange2: #fe8101;
    --orange3: #fc9515;
    --orange4: #d36929;
    --orange5: #f42900;
    --orange6: #e0c7ba;

    /* pinks */
    --pink1: #ff799e;

    /* greens */
    --green1: #5e9552;

    /* yellows */
    --yellow1: #e5e68e;
    --yellow2: #c09e45;

    /* reds */
    --red1: #FF0032;
    --red2: #a70021;

    /* grays */
    --gray1: #d7d7da;
    --gray2: #7d7c8a;
    --gray3: #8b8084;

    /* blues */
    --blue1: #00AEFF;
    --blue2: #00FFFB;
    --blue3: #11bbfa;
    --blue4: #a2e9fa;
    --blue5: #4360c9;
    --blue6: #759ae3;
    --blue7: #698da4;
    --blue8: #639ff7;
    --blue9: #0099ff;
    --blue10: #0d5f5f;
    --blue11: #52648a;
    --blue12: #1e303a;
    --blue13: #131e40;
    --blue14: #bec6e9;
    --blue15: #375764;
    --blue16: #192b35;
    --blue17: #94b0b4;
}

body {
    background-color: var(--dark-bg);
    color: var(--light-text);
    font-size: calc((.9 - 1) * 1.2vw + 1rem);
    font-family: 'IBM Plex Mono', monospace, sans-serif;
}

h1::selection, p::selection, a::selection {
    color: var(--orange1);
    background-color: none;
}

a {
    color: var(--light-text);
    text-decoration: none;
}

a:hover {   
    color: var(--orange1);
}

.nav-link {
    display: flex;
    margin-top: 10px;
}

.header-logo {
    width: 50px;
    margin-right: 20px;
}

/* home page */
.home-nav {
    display: flex;
    padding-top: 10px;
    padding-bottom: 10px;
}

.home-main {
    border-top: 1px solid var(--orange1);
    padding-top: 10rem;
    text-align: center;
}

.home-nav-link {
    padding-right: 100px;
    font-size: calc((2 - 1) * 1.2vw + 1rem);
}

/* about page */
.about-wrapper {
    border-top: 1px solid var(--orange1);
    padding: 6rem 1rem 4rem; 
}

.about-header {
    font-size: 2rem;
    margin-bottom: 0.25rem;
    border-bottom: solid 1px var(--orange1);
    width: fit-content;
}

/* art page */
.art-nav-link {
    padding-right: 10px;
    font-size: calc((1 - 1) * 1.2vw + 1rem);
}

/* art page light box */
.lightbox-wrapper {
    border-top: 1px solid var(--orange1);
    padding: 6rem 1rem 4rem; 
}

.lightbox-header {
    font-size: 2rem;
    margin-bottom: 0.25rem;
    border-bottom: solid 1px var(--orange1);
    width: fit-content;
}

.lightbox-text {
    color: var(--gray1);
    margin-bottom: 1rem;
}

.lightbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1rem;
}

.lightbox-item img {
    width: 100%;
    height: 20rem;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(255,255,255,0.04);
    transition: transform .2s ease, box-shadow .2s ease;
}

.lightbox-item img:hover {
    transform: scale(1.02);
}

.lightbox-overlay {
    position: fixed;
    inset: 0;
    display: none;
    background: rgba(0,0,0,0.85);
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.lightbox-overlay.open {
    display: flex;
}

.lightbox-content {
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 2px;
}

.lightbox-caption {
    color: var(--gray1);
    font-size: 0.95rem;
}

.lightbox-close, .lightbox-next, .lightbox-prev {
    position: absolute;
    background: transparent;
    color: var(--light-text);
    border: none;
    font-size: 2rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
}

.lightbox-close { right: 1rem; top: 0.5rem; }
.lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); }

@media (max-width: 768px) {
    .lightbox-wrapper { padding: 5rem 0 2rem; }
    .lightbox-close, .lightbox-next, .lightbox-prev { font-size: 1.6rem; }
}

/* projects page */
.proj-nav-link {
    padding-right: 10px;
    font-size: calc((1 - 1) * 1.2vw + 1rem);
}

.projects-wrapper {
    border-top: 1px solid var(--orange1);
    padding: 6rem 1rem 4rem; 
}

.proj-header {
    font-size: 2rem;
    margin-bottom: 0.25rem;
    border-bottom: solid 1px var(--orange1);
    width: fit-content;
}
.proj-text {
    color: var(--gray1);
    margin-bottom: 1rem;
}

.projects-item {
    margin-bottom: 2rem;
}

.proj_img {
    width: 18rem;
}

.proj_img-big {
    width: 10rem;
}

.proj_img:hover, .proj_img-big:hover {
    filter: brightness(1.05);
    transform: scale(1.02);
    transition: transform .2s ease, filter .2s ease;
}

.proj-link {
    color: var(--orange1);
}

.proj-link:hover {
    color: var(--light-text);
}

.wd-img {
    width: 10rem;
}

.proj-h5 {
    font-size: 1.2rem;
    margin-top: 0.5rem;
    border-bottom: solid 1px var(--orange1);
    width: fit-content;
}