.bitcoin-block { width: 125px; height: 125px; } .blockLink { width: 100%; height: 100%; position: absolute; left: 0; z-index: 10; } .mined-block { position: absolute; top: 0px; transition: 1s; } .block-size { font-size: 18px; font-weight: bold; } .blocks-container { position: absolute; top: 0px; left: 40px; } .block-body { text-align: center; } .time-difference { position: absolute; bottom: 10px; text-align: center; width: 100%; font-size: 14px; } .fees { font-size: 14px; margin-top: 12px; margin-bottom: 6px; } .transaction-count { font-size: 12px; } .block-height { position: absolute; font-size: 16px; bottom: 160px; width: 100%; left: -12px; text-shadow: 0px 32px 3px #111; z-index: 100; } .bitcoin-block::after { content: ''; width: 125px; height: 24px; position:absolute; top: -24px; left: -20px; background-color: #232838; transform:skew(40deg); transform-origin:top; } .bitcoin-block::before { content: ''; width: 20px; height: 125px; position: absolute; top: -12px; left: -20px; background-color: #191c27; transform: skewY(50deg); transform-origin: top; } .black-background { background-color: #11131f; z-index: 100; position: relative; } #arrow-up { position: relative; left: 30px; top: 140px; width: 0; height: 0; border-left: 35px solid transparent; border-right: 35px solid transparent; border-bottom: 35px solid #FFF; } // Blinking block .blink-bg { color: #fff; animation: blinkingBackground 1s infinite; background: inherit !important; } @keyframes blinkingBackground { 0% { background-color: #10c018;} 25% { background-color: #1056c0;} 50% { background-color: #ef0a1a;} 75% { background-color: #CFB53B;} 100% { background-color: #04a1d5;} }