@media screen and (max-width: 768px) {
 .logo img{
	 width:78vw !important;
	}
	
	
.stage{
    inset: 20px !important;
	}
	
 .soon1{ 
	font-size: 16px !important;
   
	}
	
	
.card{
	width:315px !important;
	height:435px !important;
	padding:10px 10px 52px 10px !important;
	}
	
	
	
}




body{margin:0;padding:20px;background:#fff;overflow:hidden;font-family:serif}
.stage{position:fixed;inset:50px;background:#000;overflow:hidden}
.logo{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);font-size:180px;color:#eee;z-index:9999;pointer-events:none}
.buffer{position:absolute;bottom:0px;left:0px;z-index:9996;width:100%; border: 0px solid red; height: 600px;
background-image: url('buffer.png'); background-repeat:repeat-x; background-size:contain;}
.card{position:absolute;width:420px;height:580px;background:#f5f2ea;padding:14px 14px 70px 14px;box-shadow:0 60px 140px rgba(0,0,0,.82);opacity:0;overflow:visible;will-change:transform,opacity}
.card::before{content:"";position:absolute;inset:0;background:
linear-gradient(transparent 95%, rgba(0,0,0,0.15) 100%),
linear-gradient(90deg, transparent 97%, rgba(0,0,0,0.12) 100%);
background-size:100% 12px, 14px 100%;opacity:.34;pointer-events:none}
.card::after{content:"";position:absolute;inset:0;background:url('https://grainy-gradients.vercel.app/noise.svg');opacity:.20;mix-blend-mode:overlay;pointer-events:none}
.media-wrap{position:relative;width:100%;height:100%;overflow:hidden}
.media{width:100%;height:100%;object-fit:cover;display:block}
.rough{position:absolute;inset:0;opacity:.85;mix-blend-mode:normal;pointer-events:none;z-index:3;filter:brightness(0) invert(1)}
.doodle{position:absolute;width:160px;height:auto;opacity:.95;z-index:6;filter:brightness(0) saturate(100%);pointer-events:none}
.doodle.tl{top:12px;left:12px}.doodle.tr{top:12px;right:12px}.doodle.bl{bottom:16px;left:12px}.doodle.br{bottom:16px;right:12px}
.meta{position:absolute;bottom:28px;left:18px;right:18px;font-size:12px;color:#1a1a1a;opacity:.9;display:flex;flex-direction:column;gap:2px;pointer-events:none;z-index:6}
.meta-top{display:flex;align-items:center;gap:6px}
.avatar{width:14px;height:14px;border-radius:50%;background:#1a1a1a;opacity:.7}
.user{font-weight:600}
.caption{font-size:11px;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.noise{position:absolute;inset:0;background:url('https://grainy-gradients.vercel.app/noise.svg');opacity:.2;pointer-events:none}
.print-warm .media{filter:contrast(1.1) saturate(1.03) sepia(.08) brightness(1.02)}
.print-cool .media{filter:contrast(1.12) saturate(1.02) hue-rotate(6deg) brightness(.98)}
.print-faded .media{filter:contrast(.98) saturate(.88) brightness(1.04)}
.print-dark .media{filter:contrast(1.15) saturate(1.08) brightness(.9)}
.print-flat .media{filter:contrast(1.02) saturate(.95) brightness(1)}
.print-frame-warm{background:#f6f1e7}.print-frame-cool{background:#f1f1ef}.print-frame-dark{background:#efe9df}
.logo img{width: 40vw;}
.links{    bottom: 10%;
    position: absolute;
    left: 2%;
    color: #cccccc;
    font-size: 40px;}
.question{    bottom: 20%;
    position: absolute;
    left: 2%;
    color: #cccccc !important;
    font-size: 20px;}
.links a{
	color: #cccccc !important;
	text-decoration: none;

}.links a:hover{
	color: #ffffff !important;
	text-decoration: none;

}

.nav{position:absolute;top:20px;right:20px;z-index:9996;width:100px; border: 0px solid red; height: 50px; text-align: right;}

.soon1{    font-size: 23px;
    width: fit-content;
    margin: 0px auto;
    font-family: sans-serif;
    text-shadow: 6px 3px 12px black;
}