<div class="nostalgia"></div>

@property --m{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
 @property --mmm{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

 @property --cn{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.nostalgia {
  cursor:pointer;
  position:relative;
  width: 35px;
  height:60px;
  padding:60px 8px 60px;
  margin:auto auto 0;
  --m:-30px;
  --mmm:0px;
  --cn:60px;
  -webkit-mask:linear-gradient(#0000 ,#000 40px);
  background:
  /*Mario*/
    linear-gradient(90deg,#0000 12px,#f92033 0 22px,#0000 0 26px,#fdc98d 0 32px,#0000) bottom calc(26px + var(--m)) left 50%/34px 2px,
    linear-gradient(90deg,#0000 10px,#f92033 0 28px,#fdc98d 0 32px,#0000 0) bottom calc(24px + var(--m)) left 50%/34px 2px,
    linear-gradient(90deg,#0000 10px,#643700 0 16px,#fdc98d 0 20px,#000 0 22px,#fdc98d 0 24px,#000 0 26px,#f92033 0 32px,#0000 0) bottom calc(22px + var(--m)) left 50%/34px 2px,
    linear-gradient(90deg,#0000 8px,#643700 0 10px,#fdc98d 0 12px,#643700 0 14px,#fdc98d 0 20px,#000 0 22px,#fdc98d 0 28px,#f92033 0 32px,#0000 0) bottom calc(20px + var(--m)) left 50%/34px 2px,
    linear-gradient(90deg,#0000 8px,#643700 0 10px,#fdc98d 0 12px,#643700 0 16px,#fdc98d 0 22px,#000 0 24px,#fdc98d 0 30px,#f92033 0 32px,#0000 0) bottom calc(18px + var(--m)) left 50%/34px 2px,
    linear-gradient(90deg,#0000 8px,#643700 0 12px,#fdc98d 0 20px,#000 0 28px,#f92033 0 30px,#0000 0) bottom calc(16px + var(--m)) left 50%/34px 2px,
    linear-gradient(90deg,#0000 12px,#fdc98d 0 26px,#f92033 0 30px,#0000 0) bottom calc(14px + var(--m)) left 50%/34px 2px,
    linear-gradient(90deg,#fdc98d 6px,#f92033 0 14px,#222a87 0 16px,#f92033 0 22px,#222a87 0 24px,#f92033 0 28px,#0000 0 32px,#643700 0) bottom calc(12px + var(--m)) left 50%/34px 2px,
    linear-gradient(90deg,#fdc98d 6px,#f92033 0 16px,#222a87 0 18px,#f92033 0 24px,#f92033 0 26px,#0000 0 30px,#643700 0) bottom calc(10px + var(--m)) left 50%/34px 2px,
    linear-gradient(90deg,#0000 10px,#f92033 0 16px,#222a87 0 24px,#feee49 0 26px,#222a87 0 30px, #643700 0) bottom calc(8px + var(--m)) left 50%/34px 2px,
    linear-gradient(90deg,#0000 12px,#222a87 0 18px,#feee49 0 20px,#222a87 0 30px,#643700 0) bottom calc(6px + var(--m)) left 50%/34px 2px,
    linear-gradient(90deg,#0000 8px,#643700 0 12px,#222a87 0 30px,#643700 0) bottom calc(4px + var(--m)) left 50%/34px 2px,
    linear-gradient(90deg,#0000 6px,#643700 0 14px,#222a87 0 26px,#0000 0) bottom calc(2px + var(--m)) left 50%/34px 2px,
    linear-gradient(90deg,#0000 6px,#643700 0 10px,#0000 0 ) bottom calc(0px + var(--m)) left 50%/34px 2px,
    /* Coin*/
    linear-gradient(90deg, #0000 4px,#fbb67d 0 12px,#717171 0 16px,#0000 0) bottom calc(30px + var(--cn)) left 58%/20px 2px,
    linear-gradient(90deg, #0000 2px,#fbb67d 0 14px,#717171 0 18px,#0000 0) bottom calc(28px + var(--cn)) left 58%/20px 2px,
    linear-gradient(90deg, #0000 2px,#fbb67d 0 6px,#b5582b 0 10px,#fbb67d 0 14px,#717171 0 18px,#0000 0) bottom calc(26px + var(--cn)) left 58%/20px 2px,
    linear-gradient(90deg, #fbb67d 4px,#b5582b 0 6px,#fbb67d 0 10px,#717171 0 12px,#fbb67d 0 16px,#717171 0) bottom calc(6px + var(--cn)) left 58%/20px 20px,
    linear-gradient(90deg, #0000 2px,#fbb67d 0 6px,#717171 0 10px,#fbb67d 0 14px,#717171 0 18px,#0000 0) bottom calc(4px + var(--cn)) left 54%/20px 2px,
    linear-gradient(90deg, #0000 2px,#fbb67d 0 14px,#717171 0 18px,#0000 0) bottom calc(2px + var(--cn)) left 58%/20px 2px,
    linear-gradient(90deg, #0000 4px,#fbb67d 0 12px,#717171 0 16px,#0000 0) bottom calc(0px + var(--cn)) left 58%/20px 2px;
    background-repeat: no-repeat;
 }


 .nostalgia:hover {
   --m:-29.5px;
   --mmm:-0.2px;
   --cn:200px;
   transition:--m 1s 0.2s cubic-bezier(1,160,0.5,160),--mmm 0.4s .9s cubic-bezier(1,100,0.5,100),--cn .8s .9s; 
 }
.nostalgia:before {
  content: "?";
    position: absolute;
    width: 100%;
    height: 27%;
    left: 0;
    top: 73px;
    background: 
      linear-gradient(#000 0 0) 3px 3px,
      linear-gradient(#000 0 0) calc(100% - 3px) 3px,
      linear-gradient(#000 0 0) 3px calc(100% - 3px),
      linear-gradient(#000 0 0) calc(100% - 3px) calc(100% - 3px),
      #fab931;
    padding: 3p;
    background-size: 3px 3px;
    background-repeat: no-repeat;
    box-sizing: border-box;
    border: 3px solid;
    border-color: #994800 #000 #000 #994800;
    font-size: 46px;
    line-height: .9;
    text-align: center;
    font-family: sans-serif;
    font-weight: bold;
    color: #994800;
    text-shadow: 2px 2px black;
}
.nostalgia:hover:before {
  top:72.5px;
  transition:top 0.4s .9s cubic-bezier(1,100,0.5,100); 
}

body {
  margin:0;
  height:100vh;
  display:grid;
  background:#6285fb;
}