.main{flex-direction:column;justify-content:center;align-items:center;gap:.5em;height:220px;margin-bottom:1rem;display:flex;position:relative}.share-btn{cursor:pointer;color:#fff;z-index:10;background-color:#6c757d;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;transition:all .3s;display:flex;position:absolute}.share-btn:hover{background-color:#5a6268;transform:scale(1.1)}.up,.down{flex-direction:row;gap:.5em;display:flex}.card1,.card2,.card3,.card4{background:#fff;border:none;outline:none;justify-content:center;align-items:center;width:70px;height:70px;padding:0;transition:all .3s cubic-bezier(.175,.885,.32,1.275);display:flex;box-shadow:0 2px 5px -1px #32325d40,0 1px 3px -1px #0000004d}.card1{border-radius:70px 5px 5px}.card1.toggled{transform:translateY(40px)translate(50px)scale(0)}.card2{border-radius:5px 70px 5px 5px}.card2.toggled{transform:translateY(40px)translate(-50px)scale(0)}.card3{border-radius:5px 5px 5px 70px}.card3.toggled{transform:translateY(-40px)translate(50px)scale(0)}.card4{border-radius:5px 5px 70px}.card4.toggled{transform:translateY(-40px)translate(-50px)scale(0)}.icon-container{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.instagram{fill:#cc39a4}.twitter{fill:#03a9f4}.github{fill:#000}.discord{fill:#8c9eff}.card1:hover{cursor:pointer;background-color:#cc39a4;transform:scale(1.1)}.card1:hover .instagram{fill:#fff}.card2:hover{cursor:pointer;background-color:#03a9f4;transform:scale(1.1)}.card2:hover .twitter{fill:#fff}.card3:hover{cursor:pointer;background-color:#272727;transform:scale(1.1)}.card3:hover .github{fill:#fff}.card4:hover{cursor:pointer;background-color:#8c9eff;transform:scale(1.1)}.card4:hover .discord{fill:#fff}