/* Common properties */
.button-row {
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 5%
}

.social-icon {
    transition: all 0.3s;
    border-width: 3px;
    border-style: solid;
    border-color: black;
    box-shadow: 0 5px 10px black;
    padding: 2%;

    width: 4.5vh;
    height: 4.5vh;
    aspect-ratio: 1 / 1;
    background-size: cover;
    margin: .25vh;
    cursor: pointer;

    border-radius: 1vh;
}

.social-icon:hover {
    transform: scale(1.1); /* it will scale the icon to 110% of its original size on hover */
}
/* Youtube effect */
.social-icon[src*="YT.svg"]:hover {
    border-color: #f30b07;
    box-shadow: 0 10px 10px #f30b07;
}
/* Youtube Shorts effect */
.social-icon[src*="YT-Short.svg"]:hover {
    border-color: #e70a08;
    box-shadow: 0 10px 10px #e70a08;
}
/* Tiktok effect */
.social-icon[src*="tiktok.svg"]:hover {
    border-color: #000;
    box-shadow:
            0 4px 10px #00b1ae,  /* Cyan Shadow */
            0 6px 10px #020202, /* Black Shadow further right-downwards */
            0 10px 10px #ff0000;  /* Red Shadow even further right-downwards */
}
/* Instagram effect */
.social-icon[src*="Insta.svg"]:hover {
    border-color: #d405a2;
    box-shadow:
            0 5px 10px #ff008c,
            0 10px 10px #f5c90c;
}
/* Facebook effect */
.social-icon[src*="fbook.svg"]:hover {
    border-color: #4b4a88;
    box-shadow: 0 10px 10px #494984;
}
/* Discord effect */
.social-icon[src*="discord.svg"]:hover {
    border-color: #6f84d2;
    box-shadow: 0 10px 10px #6b80c9;
}