Isaac Aracena
26 lines
1.4 KiB
CSS
26 lines
1.4 KiB
CSS
*{box-sizing:border-box;margin:0;padding:0}
|
|
body{
|
|
width:100%;height:100vh;background:#111;color:#fff;
|
|
display:flex;align-items:center;justify-content:center;overflow:hidden;
|
|
background-position:center;background-size:cover;background-repeat:no-repeat;
|
|
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans",sans-serif
|
|
}
|
|
.banner{position:fixed;background-size:contain;background-repeat:no-repeat;z-index:10}
|
|
.banner-1{top:1rem;left:1rem;width:140px;height:140px}
|
|
.banner-2{top:1rem;right:1rem;width:260px;height:260px}
|
|
.banner-3{bottom:1rem;left:1rem;width:180px;height:90px}
|
|
.banner-4{bottom:1rem;right:1rem;width:320px;height:90px}
|
|
#container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
|
|
#card{width:420px;height:520px;position:relative;user-select:none;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.35)}
|
|
#card:active{transform:scale(1.02)}
|
|
#premio{position:absolute;top:calc(50% + 290px);left:50%;transform:translate(-50%,-50%);
|
|
background:rgba(0,0,0,.55);padding:.6rem 1rem;border-radius:10px;font-weight:600;min-width:260px;text-align:center}
|
|
canvas,img{border-radius:12px}
|
|
#fullscreen-btn{position:fixed;top:10px;right:10px;background:none;border:none;cursor:pointer;z-index:20}
|
|
#fullscreen-btn img{width:42px;height:42px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
|
|
@media (max-width:768px){
|
|
#card{width:320px;height:420px}
|
|
.banner-2{width:180px;height:180px}
|
|
.banner-4{width:240px}
|
|
}
|