body{margin:0;--diameter: 2px;background:radial-gradient(circle at var(--diameter) var(--diameter),#d7d7d7 calc(var(--diameter) - 1px),#0000 var(--diameter)) 0 0 / 50px 50px;font-family:Inter,sans-serif}.app{height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}.app__title{font-family:Aladin,sans-serif;font-size:3rem;text-align:center;position:relative;margin:0}.app__title:after{content:"";display:block;position:absolute;top:-12px;right:20px;width:70%;height:48px;background-color:#ffef00;z-index:-10}.app__subtitle{font-size:1rem;font-weight:400;text-align:center;margin:8px 0 20px;letter-spacing:1px;color:#8a8a8a}.app__button{color:#fff;background:#ff0264;border:1px solid black;font-family:Aladin,sans-serif;font-size:2rem;font-weight:600;padding:20px;width:100%;box-shadow:8px 8px 0 -3px #000;transition:box-shadow .2s;cursor:pointer}.app__button:active{box-shadow:0 0 #000}.app__message{text-align:center;margin-top:40px;background:#0079ff;padding:20px;border:2px solid black;color:#fff}.app__message--error{background:#9100ff;margin:0}.app__footer{color:#fff;width:100%;text-align:center;font-size:.75rem;padding:8px;background:#ff0264;position:fixed;bottom:0}.app__link{color:#fff}@media screen and (min-width: 768px){.app__button{width:320px}.app__message{width:50%}}