@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');


* {
box-sizing:border-box;
}


body {

margin:0;

background:#050505;

color:#d6d6d6;

font-family:
"JetBrains Mono",
monospace;

}





/* MAIN ARCHIVE */


.relay-container {

width:90%;

max-width:1400px;

margin:auto;

padding:40px 0 300px;

}




.relay-header h1 {

font-size:42px;

color:#7cff7c;

}



.relay-header p {

max-width:700px;

line-height:1.7;

color:#999;

}





.archive-section {

margin-top:90px;

}




.archive-section h2 {

font-size:18px;

color:#7cff7c;

border-bottom:
1px solid #222;

padding-bottom:12px;

}








/* BOOK ARCHIVE */


.bookshelf {

display:flex;

justify-content:center;

gap:40px;

margin-top:45px;

}



.lower-shelf {

margin-top:80px;

margin-bottom:180px;

}




.book {

width:200px;

height:280px;

flex-shrink:0;

background:#111;

border:
1px solid #333;

position:relative;

overflow:hidden;

cursor:pointer;

transition:.25s;

box-shadow:
10px 0 0 #080808;

}





.book img {

width:100%;

height:100%;

object-fit:cover;

}




.book span {

position:absolute;

bottom:12px;

left:12px;

right:12px;

background:#000;

padding:6px;

font-size:12px;

text-align:center;

white-space:normal;

overflow:hidden;

word-wrap:break-word;

line-height:1.3;

}





.book:hover {

transform:
translateY(-14px)
rotate(-2deg);

border-color:#7cff7c;

}








/* IN DEVELOPMENT */


.developing {

opacity:.65;

cursor:not-allowed;

}



.developing:hover {

transform:none;

}




.developing img {

filter:
grayscale(60%);

opacity:.75;

}





.development-tag {

position:absolute;

top:12px;

right:12px;

background:#222;

border:
1px solid #777;

padding:5px 8px;

font-size:10px;

color:#aaa;

letter-spacing:1px;

z-index:2;

text-align:center;

}





/* BOOK INSPECT BUTTON */

.inspect-button{

position:absolute;

top:10px;

left:10px;

width:32px;

height:32px;

display:flex;

align-items:center;

justify-content:center;

background:rgba(0,0,0,.75);

border:1px solid #333;

color:#7cff7c;

font-size:16px;

cursor:pointer;

z-index:5;

transition:.2s;

}

.inspect-button:hover{

background:#7cff7c;

color:#000;

border-color:#7cff7c;

}











/* FOLDERS */


.file-shelf {

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:40px;

margin-top:45px;

}





.folder {

position:relative;

width:280px;

height:170px;

background:#161616;

border:
1px solid #444;

padding:30px 20px;

cursor:pointer;

transition:.25s;

}





.folder-tab {

position:absolute;

top:-22px;

left:-1px;

width:110px;

height:25px;

background:#161616;

border:
1px solid #444;

border-bottom:none;

transition:.25s;

}





.folder h3 {

color:#7cff7c;

font-size:15px;

}





.folder:hover {

transform:
translateY(-8px);

border-color:#7cff7c;

}

.folder:hover .folder-tab {

border-color:#7cff7c;

background:#1a1a1a;

}








/* LOCKED ITEMS */


.locked {

opacity:.45;

cursor:not-allowed;

}




.locked:hover {

transform:none;

border-color:#333;

}




.lock-symbol {

height:100%;

display:flex;

align-items:center;

justify-content:center;

font-size:60px;

color:#777;

}





.restricted-lock {

height:120px;

display:flex;

align-items:center;

justify-content:center;

font-size:75px;

color:#ff3333;

}








/* RESTRICTED AREA */


.restricted {

margin-top:2000px;

padding:60px 30px;

border:
2px solid #8b0000;

background:
rgba(120,0,0,.08);

text-align:center;

}





.restricted h2 {

color:#ff3333;

letter-spacing:5px;

}





.warning {

color:#ff5555;

font-size:13px;

}





.unknown-files {

display:flex;

justify-content:center;

gap:90px;

margin-top:80px;

flex-wrap:wrap;

}





.unknown {

cursor:pointer;

color:#ff3333;

transition:.3s;

}





.unknown:hover {

transform:
translateY(-15px);

}





.shape {

width:120px;

height:120px;

border:
2px solid #ff3333;

margin:auto;

background:
rgba(255,0,0,.08);

}





.triangle {

clip-path:
polygon(50% 0%,100% 100%,0% 100%);

}





.circle {

border-radius:50%;

}





.cube {

transform:
rotate(45deg);

}








/* READER */


.reader-container {

width:100vw;

height:100vh;

overflow:hidden;

display:flex;

justify-content:center;

align-items:center;

background:#050505;

}





.reader-top {

position:absolute;

top:15px;

left:20px;

right:20px;

display:flex;

justify-content:space-between;

z-index:5;

}





.reader-top h1 {

font-size:20px;

color:#7cff7c;

}





.reader-top button {

background:#080808;

border:
1px solid #333;

color:#7cff7c;

padding:10px 20px;

font-family:
"JetBrains Mono",
monospace;

cursor:pointer;

}





.reader-top button:hover {

border-color:#7cff7c;

}








.reader-window {

width:100vw;

height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:20px;

}





.reader-window img {

max-width:100%;

max-height:
calc(100vh - 40px);

object-fit:contain;

}





.reader-controls {

position:absolute;

bottom:15px;

display:flex;

align-items:center;

gap:35px;

}





.reader-controls button {

width:55px;

height:40px;

background:#080808;

border:
1px solid #333;

color:#7cff7c;

font-size:22px;

cursor:pointer;

}





.reader-controls button:hover {

border-color:#7cff7c;

}





#page-counter {

color:#aaa;

}





/* COVER VIEWER */

.cover-viewer{

position:fixed;

inset:0;

background:rgba(0,0,0,.93);

display:flex;

justify-content:center;

align-items:center;

opacity:0;

pointer-events:none;

transition:.25s;

z-index:9999;

}

.cover-viewer.active{

opacity:1;

pointer-events:auto;

}

.cover-viewer img{

max-width:90vw;

max-height:92vh;

object-fit:contain;

box-shadow:0 0 40px rgba(0,0,0,.8);

border:1px solid #333;

}

.cover-viewer-close{

position:absolute;

top:20px;

right:25px;

font-size:36px;

color:#7cff7c;

cursor:pointer;

user-select:none;

}


/* =========================================
   AUDIO & VIDEO ARCHIVE
========================================= */

.cassette-shelf{

display:flex;

justify-content:center;

gap:70px;

margin-top:45px;

margin-bottom:100px;

flex-wrap:wrap;

}

.disc-shelf{

display:flex;

justify-content:center;

gap:50px;

flex-wrap:wrap;

margin-bottom:180px;

}



/* =========================
   CASSETTES
========================= */

.cassette{

width:250px;

height:180px;

background:#181818;

border:1px solid #444;

position:relative;

display:flex;

flex-direction:column;

justify-content:flex-end;

padding:15px;

transition:.25s;

overflow:hidden;

}

.cassette:hover{

transform:translateY(-8px);

border-color:#7cff7c;

}

.cassette-label{

position:absolute;

left:18px;

right:18px;

top:15px;

height:36px;

background:#232323;

border:1px solid #333;

display:flex;

align-items:center;

justify-content:center;

font-size:11px;

padding:0 8px;

text-align:center;

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

z-index:3;

}

.cassette::before{

content:"";

position:absolute;

left:38px;

top:68px;

width:38px;

height:38px;

border:3px solid #777;

border-radius:50%;

}

.cassette::after{

content:"";

position:absolute;

right:38px;

top:68px;

width:38px;

height:38px;

border:3px solid #777;

border-radius:50%;

}

.media-button{

margin-top:auto;

width:100%;

height:36px;

border:1px solid #333;

background:#0a0a0a;

color:#7cff7c;

font-family:"JetBrains Mono",monospace;

cursor:pointer;

transition:.2s;

}

.media-button:hover{

background:#7cff7c;

color:#000;

}



/* =========================
   CDS
========================= */

.disc{

width:160px;

display:flex;

flex-direction:column;

align-items:center;

gap:14px;

}

.disc-shape{

width:120px;

height:120px;

border-radius:50%;

background:#1a1a1a;

border:2px solid #888;

position:relative;

transition:.25s;

}

.disc-shape::before{

content:"";

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

width:22px;

height:22px;

border-radius:50%;

background:#050505;

border:2px solid #888;

}

.disc:hover .disc-shape{

transform:rotate(18deg);

border-color:#7cff7c;

}

.disc-title{

font-size:13px;

line-height:1.4;

text-align:center;

width:100%;

min-height:38px;

padding:0 5px;

word-break:break-word;

}

.disc .media-button{

width:100%;

}



/* =========================
   STATES
========================= */

.media-locked{

opacity:.4;

pointer-events:none;

}

.media-developing{

opacity:.65;

}

.media-developing .media-button{

display:none;

}

.media-status{

margin-top:10px;

width:100%;

padding:8px 6px;

background:#222;

border:1px solid #666;

color:#aaa;

font-size:10px;

letter-spacing:1px;

text-align:center;

}

.media-developing{

opacity:.65;

}

.media-developing .media-button{

display:none;

}



/* MOBILE */


@media(max-width:700px){


.relay-header h1 {

font-size:30px;

}





.bookshelf {

flex-wrap:wrap;

gap:25px;

}





.book {

width:160px;

height:240px;

}





.restricted {

margin-top:1000px;

}





.reader-top {

flex-direction:column;

gap:15px;

}





.reader-window img {

max-height:
calc(100vh - 80px);

}


}