.btn {
    font-size: clamp(0.8rem, 2vw, 1rem);
    font-weight: 600;
    text-decoration: none;
    color: #ffffff;
    background-color: #3366cc;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(36px, 6vw, 48px);
    min-width: clamp(80px, 12vw, 120px);
    padding: 0 clamp(12px, 3vw, 16px);
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.3),
                inset 0 1px 2px rgba(255, 255, 255, 0.2);
    transition: transform 0.1s ease;
    box-sizing: border-box;
    white-space: nowrap;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 255, 255, 0.4),
                inset 0 1px 2px rgba(255, 255, 255, 0.25);
}

.btn.twitter,
.btn.discord,
.btn.footer-nft-calendar {
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: clamp(36px, 6vw, 48px);
    height: clamp(36px, 6vw, 48px);
    padding: 0;
    min-width: unset;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.3),
                inset 0 1px 2px rgba(255, 255, 255, 0.2);
    transition: transform 0.1s ease;
    flex-shrink: 0;
}

.btn.twitter {
    background-image: url('../images/twitter-icon.png?v=2');
}

.btn.discord {
    background-image: url('../images/discord-icon.png?v=2');
}

.btn.footer-nft-calendar {
    background-image: url('../images/nft-calendar-icon.png');
}

.btn.twitter:hover,
.btn.discord:hover,
.btn.footer-nft-calendar:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 255, 255, 0.4),
                inset 0 1px 2px rgba(255, 255, 255, 0.25);
}

/* ONLY OVERWRITE SIZE OF THE BUTTON */
.btn.footer-nft-calendar {
    width: clamp(45px, 7.5vw, 60px);
    height: clamp(45px, 7.5vw, 60px);
}