*{
margin:0;
padding:0;
box-sizing:border-box;
}


body{

background:#050505;

color:white;

font-family:Arial, sans-serif;

min-height:100vh;

overflow-x:hidden;

}



/* BACKGROUND GRID */

body::before{

content:"";

position:fixed;

inset:0;

background:

linear-gradient(
90deg,
rgba(255,255,255,.025) 1px,
transparent 1px
),

linear-gradient(
rgba(255,255,255,.025) 1px,
transparent 1px
);

background-size:
60px 60px;

pointer-events:none;

animation:gridMove 40s linear infinite;

}



body::after{

content:"";

position:fixed;

inset:0;

background:
radial-gradient(
circle at center,
rgba(255,255,255,.04),
transparent 45%
);

pointer-events:none;

}



@keyframes gridMove{

from{
background-position:0 0;
}

to{
background-position:60px 60px;
}

}





/* BACK BUTTON */


.back-btn{

position:fixed;

top:30px;

left:40px;

color:white;

text-decoration:none;

letter-spacing:3px;

font-size:14px;

opacity:.6;

transition:.3s;

}



.back-btn:hover{

opacity:1;

}





/* MAIN */


.archive-container{

width:min(900px,90%);

margin:auto;

padding-top:120px;

animation:
archiveEnter 1.2s ease;

}



@keyframes archiveEnter{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}





/* HEADER */


header{

margin-bottom:90px;

}



header h1{

font-size:30px;

font-weight:300;

letter-spacing:9px;

}



header p{

margin-top:20px;

font-size:11px;

letter-spacing:5px;

opacity:.35;

}







/* TIMELINE */


.year{

position:relative;

margin-bottom:100px;

padding-left:45px;

border-left:

1px solid rgba(255,255,255,.18);

opacity:0;

animation:
yearFade .8s forwards;

}



.year:nth-child(1){

animation-delay:.2s;

}

.year:nth-child(2){

animation-delay:.35s;

}

.year:nth-child(3){

animation-delay:.5s;

}

.year:nth-child(4){

animation-delay:.65s;

}





@keyframes yearFade{

to{

opacity:1;

}

}





.year::before{

content:"";

position:absolute;

left:-5px;

top:0;

width:9px;

height:9px;

background:white;

border-radius:50%;

box-shadow:

0 0 12px white;

}




.year h2{

font-size:42px;

font-weight:200;

letter-spacing:6px;

margin-bottom:35px;

}







/* DATABASE CARDS */


.file{

position:relative;

padding:30px;

margin-bottom:25px;

border:

1px solid rgba(255,255,255,.12);

background:

linear-gradient(
135deg,
rgba(255,255,255,.035),
rgba(255,255,255,.01)
);

transition:.5s ease;

overflow:hidden;

}




/* hologram line */


.file::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:1px;

background:

rgba(255,255,255,.5);

transition:.8s;

}



.file:hover::before{

left:100%;

}




/* corner */


.file::after{

content:"";

position:absolute;

right:0;

top:0;

width:40px;

height:40px;

border-top:

1px solid rgba(255,255,255,.35);

border-right:

1px solid rgba(255,255,255,.35);

opacity:.5;

transition:.4s;

}




.file:hover{

transform:translateX(8px);

border-color:

rgba(255,255,255,.55);

box-shadow:

0 0 35px rgba(255,255,255,.08);

}




.file:hover::after{

opacity:1;

box-shadow:

0 0 20px white;

}





.file span{

font-size:10px;

letter-spacing:5px;

opacity:.45;

}




.file h3{

margin:15px 0 20px;

font-size:24px;

font-weight:400;

letter-spacing:3px;

}





.file p{

font-size:12px;

line-height:2;

letter-spacing:2px;

opacity:.65;

}




.locked{

opacity:.35;

}





/* MOBILE */


@media(max-width:600px){


.back-btn{

top:20px;

left:20px;

}



.archive-container{

padding-top:90px;

}



header h1{

font-size:20px;

letter-spacing:5px;

}



header p{

font-size:9px;

}



.year{

padding-left:25px;

margin-bottom:70px;

}



.year h2{

font-size:32px;

}



.file{

padding:22px;

}



.file h3{

font-size:20px;

}



}

/* ARCHIVE PAGE FOOTER */
.archive-footer {
  position: relative;
  z-index: 1;
  padding: 24px 5% 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  text-align: center;
}

.archive-copyright {
  color: rgba(255,255,255,.55);
  font-size: 9px;
  letter-spacing: 1px;
  text-align: center;
}

.archive-footer-logo {
  display: block;
  width: 180px;
  height: 116px;
  max-width: 100%;
  object-fit: contain;
  margin: 12px auto 0;
  opacity: .95;
}