*{
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 ---------- */

.noise{

position:fixed;
inset:0;

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

opacity:.08;

pointer-events:none;

z-index:-1;

}

/* ---------- HEADER ---------- */

header{

text-align:center;
padding:70px 20px 55px;

}

header h1{

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

font-size:48px;

letter-spacing:8px;

margin-bottom:10px;

}

header p{

font-size:13px;

letter-spacing:3px;

text-transform:uppercase;

}

/* ---------- GRID ---------- */

.container{

width:min(1150px,90%);
margin:auto;

display:grid;

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

gap:40px;

padding-bottom:80px;

}

/* ---------- CARDS ---------- */

.card{

background:white;

border:2px solid black;

padding:30px;

position:relative;

transition:.35s;

overflow:hidden;

}

/* different rotations */

.artwork:nth-of-type(2){

transform:rotate(-2deg);

}

.artwork:nth-of-type(3){

transform:rotate(1.5deg);

}

.artwork:nth-of-type(4){

transform:rotate(-1deg);

}

.artwork:nth-of-type(5){

transform:rotate(2deg);

}

.card:hover{

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

box-shadow:12px 12px black;

}

/* top line animation */

.card::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:200%;

height:2px;

background:black;

transition:.5s;

}

.card:hover::before{

left:0;

}

/* ---------- TITLES ---------- */

.card h2{

font-family:'DotGothic16';

font-size:22px;

letter-spacing:2px;

margin-bottom:18px;

}

.card p{

font-size:14px;

line-height:1.8;

}

/* ---------- IMAGE ---------- */

.frame{

background:white;

border:2px solid black;

padding:10px;

margin:15px auto 20px;

}

.frame img{

width:100%;

display:block;

filter:grayscale(100%);

transition:.4s;

}

.card:hover img{

transform:scale(1.03);

}

/* ---------- TAPE ---------- */

.tape{

position:absolute;

width:90px;

height:28px;

background:#ececec;

border:1px solid #888;

left:50%;

top:15px;

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

opacity:.9;

}

/* ---------- TITLE ---------- */

.title{

font-family:'DotGothic16';

font-size:18px;

margin-bottom:6px;

}

/* ---------- LIST ---------- */

ul{

list-style:none;

margin-top:10px;

}

li{

padding:10px 0;

border-bottom:1px dashed black;

}

/* ---------- WIDE CARD ---------- */

.wide{

grid-column:span 2;

}

/* ---------- QUOTE ---------- */

.quote{

text-align:center;

font-style:italic;

}

/* ---------- FOOTER ---------- */

footer{

width:260px;

margin:20px auto 45px;

padding:12px;

text-align:center;

background:white;

border:2px solid black;

font-size:13px;

}

/* ---------- FLOATING SYMBOLS ---------- */

.sparkle{

position:fixed;

font-family:'DotGothic16';

font-size:22px;

pointer-events:none;

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

}

.s1{

left:9%;

top:18%;

}

.s2{

right:10%;

top:60%;

animation-delay:2s;

}

.s3{

left:82%;

top:12%;

animation-delay:1s;

}

@keyframes float{

0%{

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

}

50%{

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

}

100%{

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

}

}

/* ---------- SCROLLBAR ---------- */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:white;

}

::-webkit-scrollbar-thumb{

background:black;

}

::selection{

background:black;

color:white;

}

/* ---------- MOBILE ---------- */

@media(max-width:850px){

.container{

grid-template-columns:1fr;

}

.wide{

grid-column:auto;

}

header h1{

font-size:38px;

}

}