:root{--bw:min(300px,62.5vw,41.667vh);--bh:min(400px,83.333vw,55.556vh);--iw:min(172px,35.833vw,23.889vh);--ih:min(205px,42.708vw,28.472vh);--it:min(20px,4.167vw,2.778vh);--tw:min(283px,58.958vw,39.306vh);--tb:min(20px,4.167vw,2.778vh);--fs:min(18px,3.75vw,2.5vh);--lh:min(28px,5.833vw,3.889vh);--e:cubic-bezier(.83,0,.17,1)}
@media (min-width:480px){:root{--bw:min(376px,48.329vw,39.167vh);--bh:min(376px,48.329vw,39.167vh);--iw:min(177px,22.751vw,18.438vh);--ih:min(211px,27.121vw,21.979vh);--it:min(31px,3.985vw,3.229vh);--tw:min(205px,26.35vw,21.354vh);--tb:min(31px,3.985vw,3.229vh);--fs:min(12px,1.542vw,1.25vh);--lh:min(18px,2.314vw,1.875vh)}}
@media (min-width:778px){:root{--bw:min(495px,48.34vw,64.453vh);--bh:min(495px,48.34vw,64.453vh);--iw:min(233px,22.754vw,30.339vh);--ih:min(279px,27.246vw,36.328vh);--it:min(41px,4.004vw,5.339vh);--tw:min(270px,26.367vw,35.156vh);--tb:min(41px,4.004vw,5.339vh);--fs:min(16px,1.562vw,2.083vh);--lh:min(24px,2.344vw,3.125vh)}}
@media (min-width:1024px){:root{--bw:min(600px,48.387vw,66.667vh);--bh:min(600px,48.387vw,66.667vh);--iw:min(283px,22.823vw,31.444vh);--ih:min(338px,27.258vw,37.556vh);--it:min(50px,4.032vw,5.556vh);--tw:min(328px,26.452vw,36.444vh);--tb:min(50px,4.032vw,5.556vh);--fs:min(20px,1.613vw,2.222vh);--lh:min(30px,2.419vw,3.333vh)}}
html{height:100%;background:#bababa url(grain.png)}
body{margin:0;height:100%;overflow:hidden}
main{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;perspective:600px}
h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
main div{position:relative;box-sizing:border-box;width:var(--bw);height:var(--bh);border:1px solid #484848;transform-origin:50% 50% -50px;animation:lift 4s var(--e) both}
img{position:absolute;left:50%;top:var(--it);width:var(--iw);height:var(--ih);margin-left:calc(var(--iw)/-2);animation:fade 4s var(--e) both}
p{position:absolute;left:50%;bottom:var(--tb);width:var(--tw);margin:0 0 0 calc(var(--tw)/-2);font:var(--fs)/var(--lh) "Courier New",Courier,monospace;color:#484848;text-align:center;animation:fade 1.5s var(--e) both}
a{color:#17622f;text-decoration:none}
a:focus-visible{outline:1px dotted #17622f;outline-offset:2px}
@keyframes lift{from{opacity:0;transform:rotateX(-70deg)}}
@keyframes fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){main div{animation-name:fade}}
@media (max-width:599px) and (orientation:portrait){
main{perspective:calc(100vh - 40px)}
main div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;width:calc(100% - 40px);height:calc(100% - 40px);transform-origin:50% 50% calc((40px - 100vh) / 12)}
img,p{position:static;margin:0}
img{width:min(62%,260px);height:auto}
p{width:calc(100% - 48px);max-width:320px;font-size:18px;line-height:28px}
}