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

body{

background:
radial-gradient(circle,#1d1d1d 1px,transparent 1px);

background-size:18px 18px;
background-color:#f6f6f6;

font-family:'IBM Plex Mono',monospace;

color:#111;

cursor:crosshair;

overflow-x:hidden;

}



.noise{

position:fixed;
inset:0;

background-image:url("https://www.transparenttextures.com/patterns/asfalt-dark.png");

opacity:.07;

pointer-events:none;

z-index:-1;

}

header{

text-align:center;

padding:70px 20px 50px;

}

header h1{

font-family:'DotGothic16',sans-serif;

font-size:52px;

letter-spacing:8px;

margin-bottom:12px;

}

header p{

font-size:13px;

letter-spacing:4px;

text-transform:uppercase;

}

.container{

width:min(1150px,90%);

margin:auto;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:35px;

padding-bottom:70px;

}

.card{

background:white;

border:2px solid black;

padding:35px;

position:relative;

overflow:hidden;

transition:.35s;

min-height:220px;

}

.card:nth-child(odd){

transform:rotate(-0.8deg);

}

.card:nth-child(even){

transform:rotate(.8deg);

}

.card:hover{

transform:translateY(-8px) rotate(0deg);

box-shadow:10px 10px black;

}

.card::before{

content:"";

position:absolute;

top:0;

left:-100%;

height:2px;

width:200%;

background:black;

transition:.5s;

}

.card:hover::before{

left:0;

}

.card h2{

font-family:'DotGothic16';

font-size:26px;

margin-bottom:25px;

letter-spacing:2px;

}

.card p{

font-size:15px;

line-height:1.9;

}

.card ul{

list-style:none;

}

.card li{

margin:15px 0;

}

.photo{

text-align:center;

}

.photo-frame{

width:220px;

height:280px;

margin:auto;

background:white;

border:2px solid black;

padding:10px;

transform:rotate(-3deg);

}

.photo-frame img{

width:100%;

height:100%;

object-fit:cover;

filter:grayscale(100%);

}

.caption{

margin-top:20px;

font-size:12px;

font-style:italic;

}

.tape{

width:90px;

height:28px;

background:#ececec;

border:1px solid #999;

position:absolute;

left:50%;

top:18px;

transform:translateX(-50%) rotate(-6deg);

opacity:.9;

}

.likes{

display:flex;

flex-wrap:wrap;

gap:12px;

margin-top:10px;

}

.likes span{

border:2px solid black;

padding:8px 14px;

font-size:13px;

transition:.25s;

}

.likes span:hover{

background:black;

color:white;

}

.timeline{

display:flex;

flex-direction:column;

gap:20px;

}

.year{

display:flex;

gap:25px;

padding-bottom:15px;

border-bottom:1px dashed black;

}

.year span{

font-family:'DotGothic16';

font-size:24px;

min-width:70px;

}

.columns{

display:grid;

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

gap:20px;

margin-top:20px;

}

.columns div{

border:2px dashed black;

padding:18px;

text-align:center;

transition:.3s;

}

.columns div:hover{

background:black;

color:white;

}

.wide{

grid-column:span 2;

}

footer{

width:270px;

margin:20px auto 50px;

text-align:center;

padding:12px;

border:2px solid black;

background:white;

font-size:13px;

}

.sparkle{

position:fixed;

font-size:22px;

font-family:'DotGothic16';

animation:float 5s ease-in-out infinite;

pointer-events:none;

}

.s1{

left:8%;

top:18%;

}

.s2{

right:10%;

top:25%;

animation-delay:1.8s;

}

.s3{

left:84%;

top:65%;

animation-delay:3s;

}

@keyframes float{

0%{

transform:translateY(0px) rotate(0deg);

}

50%{

transform:translateY(-18px) rotate(90deg);

}

100%{

transform:translateY(0px) rotate(180deg);

}

}

::selection{

background:black;

color:white;

}

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:white;

}

::-webkit-scrollbar-thumb{

background:black;

}

@media(max-width:900px){

.container{

grid-template-columns:1fr;

}

.wide{

grid-column:auto;

}

.columns{

grid-template-columns:1fr;

}

.photo-frame{

width:180px;

height:240px;

}

}