/* =========================
   Font
========================= */

@font-face {

    font-family: "VCR";

    src: url("../fonts/VCR_OSD_MONO_1.001.ttf") format("truetype");

    font-display: swap;

}



/* =========================
   Variables
========================= */

:root {

    --background:#050505;
    --text:#ddd;
    --muted:#777;
    --border:#222;
    --accent:#c8ad35;

}



.theme-yellow {

    --accent:#c8ad35;
    --border:#333;

}


.theme-blue {

    --accent:#4a8cff;
    --border:#26354d;

}


.theme-red {

    --accent:#d85b5b;
    --border:#442222;

}


.theme-green {

    --accent:#65c46a;
    --border:#234323;

}

.theme-project-purple {

    --bg:#07070d;
    --text:#e8e8ff;
    --muted:#77778f;
    --border:#24243a;
    --accent:#8f5cff;

}

.theme-project-git {

    --bg:#07070d;
    --text:#2c80ef;
    --muted:#77778f;
    --border:#24243a;
    --accent:#3c5375;

}



/* =========================
   Reset
========================= */


* {

    margin:0;
    padding:0;
    box-sizing:border-box;

}



body {

    background:var(--background);

    color:var(--text);

    font-family:"VCR", monospace;

    overflow-x:hidden;

}





/* =========================
   Toolbar
========================= */


.navbar {

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 15px;

    background:var(--background);

    border-bottom:1px solid var(--border);

    z-index:100;

}



.logo {

    color:#aaa;

    font-size:14px;

}



.window-buttons {

    display:flex;

    gap:18px;

}



.window-button {

    background:none;

    border:none;

    color:#888;

    font-family:"VCR";

    cursor:pointer;

    transition:.2s;

}



.window-button:hover {

    color:var(--accent);

}



.menu-toggle.open {

    transform:rotate(180deg);

}





/* =========================
   Dropdown Menu
========================= */


.menu {

    position:fixed;

    top:42px;

    right:0;

    width:260px;

    background:var(--background);

    border-left:1px solid var(--border);

    border-bottom:1px solid var(--border);

    transform:translateY(-120%);

    transition:.3s ease;

    z-index:90;

}



.menu.active {

    transform:translateY(0);

}



.menu-panel {

    display:flex;

    flex-direction:column;

}



.menu a {

    padding:20px;

    color:var(--text);

    text-decoration:none;

    border-bottom:1px solid var(--border);

}



.menu a:hover {

    background:var(--accent);

    color:#000;

}





/* =========================
   Main Layout
========================= */


.archive {

    padding-top:42px;

    min-height:100vh;

    display:grid;

    grid-template-columns:40% 60%;

}





.archive-image {

    height:calc(100vh - 42px);

    border-right:1px solid var(--border);

}



.archive-image img {

    width:100%;

    height:100%;

    object-fit:cover;

}



.archive-content {

    overflow-y:auto;

}





/* =========================
   Date Slider
========================= */


.date-grid {

    display:flex;

    overflow-x:auto;

    scroll-behavior:smooth;

    scrollbar-width:none;

    border-bottom:1px solid var(--border);

}



.date-grid::-webkit-scrollbar {

    display:none;

}



.date {

    flex:0 0 120px;

    height:120px;

    padding:15px;

    background:none;

    border:none;

    border-right:1px solid var(--border);

    color:var(--accent);

    font-family:"VCR";

    font-size:70px;

    text-align:left;

    cursor:pointer;

    transition:.2s;

}



.date small {

    display:block;

    font-size:12px;

    color:var(--muted);

}



.date:hover {

    background:var(--accent);

    color:#000;

}



.date.active {

    background:var(--accent);

    color:#000;

}





/* =========================
   Project Header
========================= */


.project-header {

    padding:35px;

    border-bottom:1px solid var(--border);

}



.project-header span {

    color:var(--muted);

}



.project-header h1 {

    margin-top:15px;

    font-size:clamp(60px,8vw,120px);

    font-weight:normal;

    line-height:.8;

    color:var(--accent);

}



.project-header p {

    margin-top:25px;

    color:var(--muted);

}





/* =========================
   Metadata
========================= */


.metadata {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    border-bottom:1px solid var(--border);

}



.row {

    padding:20px;

    border-right:1px solid var(--border);

}



.row span {

    color:var(--muted);

    font-size:12px;

}



.row p {

    margin-top:15px;

    color:var(--accent);

}





/* =========================
   Updates
========================= */


.timeline {

    margin-top:40px;

    border-top:1px solid var(--border);

}



.timeline > h2 {

    padding:20px;

    font-size:14px;

    font-weight:normal;

    color:var(--muted);

    border-bottom:1px solid var(--border);

}



.event {

    display:none;

    height:110px;

    align-items:center;

    justify-content:space-between;

    padding:0 30px;

    border-bottom:1px solid var(--border);

}



.event.show {

    display:flex;

}



.event-info {

    display:flex;

    flex-direction:column;

    gap:10px;

}



.event-info span {

    color:var(--muted);

    font-size:12px;

}



.event-info h2 {

    font-size:20px;

    font-weight:normal;

    color:var(--text);

}



.event time {

    color:var(--accent);

    font-size:clamp(35px,5vw,70px);

}




/* =========================
   Back
========================= */


.back {

    display:inline-block;

    margin:40px;

    color:var(--accent);

    text-decoration:none;

}



.back:hover {

    opacity:.6;

}





/* =========================
   Footer
========================= */


footer {

    border-top:1px solid var(--border);

    padding:20px;

    color:#555;

    font-size:12px;

}





/* =========================
   Mobile
========================= */


@media(max-width:900px){


    .archive {

        display:block;

    }



    .archive-image {

        height:50vh;

    }



    .metadata {

        grid-template-columns:1fr;

    }



    .date {

        flex-basis:100px;

        font-size:50px;

    }



    .event {

        padding:0 15px;

    }



    .event time {

        font-size:35px;

    }


}