*{box-sizing:border-box}:root{--card-width: 280px;--card-height: calc(var(--card-width) / 9 * 14.5);--card-content-height: 130px;--color-1: #404040;--color-2: #ea4e6b}body{min-height:100vh;background:#f4f3f4;font-family:Arial,Helvetica,sans-serif}.app-header{display:flex;justify-content:center;align-items:center;flex-direction:column;padding-top:1.5rem}.logo{width:11rem}.logo-path-1{fill:var(--color-1)}.logo-path-2{fill:var(--color-2)}.status{height:1.5rem;padding:0 .5rem;font-size:170%;font-weight:bold;color:var(--color-1)}.nope{color:var(--color-2);animation:mymove .45s}.yihaa{color:green;animation:mymove .45s}.card-stack{display:flex;flex-direction:column;position:relative;max-width:calc(100vw - 4rem);width:var(--card-width);margin:1.5rem auto 0 auto}.card{background:#fff;overflow:hidden;box-shadow:.2rem .2rem .5rem rgba(0,0,0,.3);position:absolute;border:1px solid #7b7676;border-radius:.5rem;width:var(--card-width);height:var(--card-height);z-index:90;translate:20px 20px;rotate:3deg}.card:first-child{z-index:100;translate:0 0;rotate:0deg}.card:last-child{z-index:80;translate:-20px 25px;rotate:-3deg}.card_image{width:var(--card-width);height:var(--card-height);box-shadow:0 0 0 .1rem rgba(0,0,0,.15)}.card_image>img{width:100%;height:100%;object-fit:cover}.card_content{position:absolute;display:block;background:linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.7) 100%);padding-top:1rem;width:calc(100% - .25rem);margin:.125rem;border-radius:.25rem;bottom:0;text-align:center;color:#fff;text-shadow:1px 1px 4px rgba(0,0,0,.5),-2px -2px 4px rgba(0,0,0,.5)}@keyframes mymove{50%{scale:2}}