@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
:root{color-scheme:light;--paper:#eeece3;--ink:#20201e;--red:#e44228}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{background:var(--paper);color:var(--ink)}
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:3;opacity:.22;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' opacity='.55' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");mix-blend-mode:multiply}
main{min-height:100%;height:100svh;width:100%;display:grid;place-items:center;padding:6vw;isolation:isolate}
h1{margin:0;width:min(85vw,1150px);font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-weight:400;text-transform:uppercase;line-height:1;transform:rotate(-5deg);position:relative;user-select:text}
.question-top{display:block;font-size:clamp(44px,8.8vw,122px);letter-spacing:-.025em;margin:0 0 2.5% 2.8%;transform:rotate(2deg);transform-origin:left bottom}
.name-strip{display:block;position:relative;background:var(--ink);color:var(--paper);padding:1.4% 3% 2.6%;box-shadow:10px 13px 0 var(--red);transform:skew(-4deg);clip-path:polygon(0 1%,99.7% 0,100% 96%,99.4% 100%,.4% 99%);}
.name-strip:before{content:"";position:absolute;inset:0;border:2px solid var(--ink);pointer-events:none}
.name-strip span{display:block;font-size:clamp(60px,18.2vw,246px);letter-spacing:-.025em;line-height:1.13;transform:skew(4deg);text-align:center;text-shadow:1px 0 var(--paper),-1px 0 var(--paper)}
h1:after{content:"";position:absolute;z-index:-1;left:2%;right:-1.3%;height:60%;bottom:-13px;background:var(--red);transform:rotate(1deg) skew(-4deg)}
@media(min-width:1400px){.name-strip span{font-size:246px}.question-top{font-size:122px}}
@media(max-width:600px){h1{width:86vw;transform:rotate(-7deg)}.question-top{font-size:13vw;margin-bottom:5%}.name-strip{padding:4% 2.5% 5%}.name-strip span{font-size:18.4vw}h1:after{bottom:-9px;right:-1.8%;height:54%}}
@media(max-height:450px) and (min-width:601px){h1{width:65vw;max-width:680px}.question-top{font-size:8vh;margin-bottom:1.5%}.name-strip span{font-size:min(14vw,39vh)}.name-strip{padding:1% 3% 2%}}
