body {
    background-color: #422064;
}

.bg-main-banner {
    background-size: cover;
    height: 80vh;
}

.bg-moon {
    background-image: url(../gifs/Yuyo_moon.gif);
}

.bg-cave {
    background-image: url(../gifs/Yuyo_cave.gif);
}

.bg-cave-2 {
    background-image: url(../gifs/Yuyo_cave_2.gif);
}

.bg-sewer {
    background-image: url(../gifs/sewer_yuyo.gif);
}


.bg-main-banner-cave-2 {
    background-size: cover;
    height: 80vh;
    background-image: url(../gifs/Yuyo_cave_2.gif);
}

.member {
    filter: drop-shadow(0px 0px 25px rgba(23, 17, 28, 1));
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

body::-webkit-scrollbar {
    width: 1em;
}

body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 1);
    background-color: #2A1441;
}

body::-webkit-scrollbar-thumb {
    background-color: #7135ac;
    outline: 1px solid #422064;
}

body::-webkit-scrollbar-thumb:hover {
    background-color: #502b76;
}

.centerImageText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.gradient-background {
    background: rgb(51,26,75);
    background: linear-gradient(0deg, rgba(51,26,75,1) 0%, rgba(66,32,100,1) 20%, rgba(64,31,97,1) 80%, rgba(51,26,75,1) 100%);
}

.zoom {
    transition: transform .25s; /* Animation */
    z-index: 5;
}
.zoom:hover {
    transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
    z-index: 10;
}

@media (max-width: 767px) {
    #legacy-members-flex div:nth-child(odd) {
        background-color: #331A4B;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    #legacy-members-flex div:nth-child(2n):not(:nth-child(4n)),
    #legacy-members-flex div:nth-child(4n+1),
    #beta-testers-flex div:nth-child(2n):not(:nth-child(4n)),
    #beta-testers-flex div:nth-child(4n+1) {
        background-color: #331A4B;
    }

    #legacy-members-flex div:nth-child(2n) {
        border-left: 5px solid #8761AC;
    }
}

@media (min-width: 1024px) {
    #legacy-members-flex div:nth-child(3n+1):not(:nth-child(even)),
    #legacy-members-flex div:nth-child(3n+2):not(:nth-child(odd)),
    #legacy-members-flex div:nth-child(3n+3):not(:nth-child(even)),
    #beta-testers-flex div:nth-child(3n+1):not(:nth-child(odd)),
    #beta-testers-flex div:nth-child(3n+2):not(:nth-child(even)),
    #beta-testers-flex div:nth-child(3n+3):not(:nth-child(odd)) {
        background-color: #331A4B;
    }

    #legacy-members-flex div:nth-child(3n),
    #beta-testers-flex div:nth-child(3n),
    #legacy-members-flex div:nth-last-child(1),
    #beta-testers-flex div:nth-last-child(1) {
        border-bottom-right-radius: 1.25rem;
        border-top-right-radius: 1.25rem;
    }

    #legacy-members-flex div:nth-child(3n-2), #beta-testers-flex div:nth-child(3n-2) {
        border-bottom-left-radius: 1.25rem;
        border-top-left-radius: 1.25rem;
    }
    #legacy-members-flex div:nth-child(3n-1) {
        border-left: 5px solid #8761AC;
        border-right: 5px solid #8761AC;
    }
}


.support-icon {
    transition: box-shadow 0.2s ease-out;
    box-shadow: 0 0 0 0 rgb(0 0 0);
}

.support-icon svg {
    transition: transform .2s ease-out;
    transform: scale(1);
    color: blue;
}


.support-icon:hover {
    transition: box-shadow 0.2s ease-in-out;
    box-shadow: 0 25px 50px -12px rgb(0 0 0);
}

.support-icon:hover svg {
    transition: transform .2s ease-in-out;
    transform: scale(1.1);
}

.support-icon > svg:nth-child(2) {
    display: none;
}

.support-icon:hover > svg:first-child {
    display: none;
}

.support-icon:hover > svg:last-child {
    display: block;
}

footer > div > div > a > img:hover {
    transition: transform .2s ease-in-out;
    transform: translateY(-4px);
}

footer > div > div > a > img:nth-child(1) {
    display: block;
}
footer > div > div > a > img:nth-child(2) {
    display: none;
}

footer > div > div > a:hover > img:nth-child(2) {
    display: block;
}

footer > div > div > a:hover > img:nth-child(1) {
    display: none;
}

.large-button {
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom,  rgba(135, 97, 172, 1) 50%, rgb(164, 117, 219) 50%);
    -webkit-transition: background-position .15s;
    -moz-transition: background-position .15s;
    transition: background-position .15s;
}

.large-button:hover {
    background-position: 0 -100%;
}