@font-face {
    font-family: 'Pusab';
    src: url('./Assets/PUSAB___.otf');
}
body {
    margin : 0;
    padding : 0;
    overflow-x : hidden;
}
::-webkit-scrollbar {
    display : none;
}
.bg {
    user-select : none;
    width : 100vw;
    height : 100vh;
    min-width : 100%;
    min-height: 100%;
    height : auto;
    position : fixed;
    z-index : -3;
    -o-object-fit: cover;
    object-fit: cover
}
.wrapper {
    display : flex;
    align-content : center;
    justify-content: center;
    width : 100%;
}
.wrapper-banner {
    width : 100%;
    height : 35vw;
}
.homepage-banner {
    user-select: none;
    width : 60%;
    height: 33vw;
}

.wrapper-main-content {
    height : auto;
    margin : 0;
}

.homepage-navbar {
    padding-left : 5%;
    padding-right : 5%;
    width : 90%;
    height : 8vh;
    border-top : 0.3vh solid white;
    border-bottom : 0.3vh solid white;
    background : rgba(0,0,10,0.6);
    display : flex;
    align-content: center;
    justify-content: center;
}
.navbar-logo {
    width : 7vh;
    height : 7vh;
    margin: auto;
    user-select: none;
}
.homepage-navbar-item {
    width : 20vw;
    height : 6vh;
    margin : auto;
    display : flex;
    font-size: 4vh;
    font-family : 'pusab';
    color : white;
    align-items: center;
    justify-content: center;
    cursor : pointer;
    border-radius : 1.5vh;
    text-shadow: 0px 0px 0.2vh #000000;
    user-select: none;
    transition : 
    background 0.2s ease-in-out,
    color 0.2s ease-in-out,
    transform 0.2s ease-in-out,
    scale 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out;
}
.homepage-navbar-item:hover {
    background: rgba(35,35,55,0.8);
    transform : translateY(0.1vh);
    scale : 110%;
    box-shadow: 0px 0px 30px 35px rgba(10,10,20,0.05);
}
#navbar-submit-button:hover {
    background : linear-gradient(0deg,rgba(37, 99, 235, 0.55) 0%, rgba(37, 99, 235, 0.6) 100%);
}
#navbar-donate-button:hover {
    background : linear-gradient(0deg,rgba(74, 222, 128, 0.55) 0%, rgba(74, 222, 128, 0.6) 100%);
}
#navbar-discord-button:hover {
    background : rgba(114,137,218, 0.6);
    background : linear-gradient(0deg,rgba(114,137,218, 0.55) 0%, rgba(114,137,218, 0.6) 100%);
}
.container-main-content {
    margin : 0;
    height : auto;
    width : 100%;
    background : rgba(10,10,20,0.7);
    backdrop-filter : blur(20px);
}
.wrapper-carousel-buttons {
    padding-top : 4vh;
    width : 90vw;
    height : 12vh;
    display : flex;
    align-content: center;
    justify-content: center;
    margin : auto;
}
.carousel-button {
    width : 14vw;
    height : 8vh;
    margin: auto;
    display : flex;
    font-size : 3.5vh;
    align-items: center;
    text-align: center;
    justify-content: center;
    color : white;
    border : 0.25vh solid white;
    border-radius : 2.4vh;
    background : rgba(220,220,255,0.15);
    font-family : 'pusab';
    text-shadow: 0px 0px 0.2vh #000000;
    box-shadow: 0px 0px 20px 10px rgba(225,225,255,0.15) inset, 0px 0px 20px 10px rgba(225,225,255,0.15);
    cursor: pointer;
    transition : 
    transform 0.3s ease-in-out,
    background 0.3s ease-in-out,
    color 0.3s ease-in-out,
    scale 0.3s ease-in-out;
    user-select: none;
}
.carousel-button:hover {
    transform : translateY(0.1vh);
    background : rgba(230,230,255,0.25);
    color : rgb(220,220,225);
    scale : 105%;
}
.carousel-wrapper {
    width : 80vw;
    height : auto;
    padding-top : 10vh;
    padding-bottom : 10vh;
    padding-left: 5vw;
    padding-right : 5vw;
    margin : auto;
    display : flex;
    overflow: hidden;
}
.carousel-container {
    width : 800vw;
    display : flex;
}
.carousel-item {
    width : 80vw;
    height : 80vh;
    overflow-y : scroll;
    padding-top : 10vh;
    padding-bottom : 5vh;
    text-align: center;
    display : grid;
    font-size : 2.8vh;
    line-height : 4.5vh;
    color : white;
    font-family : 'pusab';
    margin-left : 10vw;
    margin-right : 10vw;
    overflow-x : hidden;
    border-radius : 1vh;
    background : rgba(30,30,40,0.4);
    left : 0vw;
    transition : transform 0.5s ease-in-out;
}
.carousel-item::-webkit-scrollbar {
    display : block;
    width : 0.1vw;
}
.carousel-item::-webkit-scrollbar-thumb {
    display : block;
    background : rgba(240,240,255,0.5);
    width : 0.01vw;
    border-radius : 3vh;
}
.carousel-header {
    width : 100%;
    display : inline-flex;
    height : 14vh;
    font-size : 8vh;
    text-align: center;
    justify-content: center;
    align-items : center;
    padding-top : 2vh;
    padding-bottom : 0.5vh;
}
.carousel-content {
    display : inline-flex;
    width : 90%;
    padding-left : 5%;
    padding-right : 5%;
    margin: 0;
    justify-content: center;
    height : auto;
    text-align: center;
    font-size : 2.25vh;
    color : rgb(180,180,180);
}
.content-subheader {
    display : inline-flex;
    width : 90%;
    padding-left : 5%;
    padding-right : 5%;
    margin: 0;
    height : auto;
    justify-content: center;
    text-align: center;
    font-size : 4vh;
    line-height : 5vh;
    padding-top : 4vh;
    padding-bottom : 0.5vh;
}
.carousel-item:nth-child(1) {
    margin-left : 0;
}
.carousel-item:nth-child(n) {
    margin-right : 0;
}

.stafflist-wrapper {
    width : inherit;
    flex-wrap : wrap;
    height : auto;
    display : flex;
    align-items: center;
    justify-content: center;
}
.userwrapper-label {
    width : 100vw;
    height : auto;
    text-align: center;
    color : white;
    font-family : 'pusab';
    font-size : 4rem;
    line-height: 2rem;
    margin-top: 0;
    padding : 0;
    text-decoration: underline;
    user-select: none;
}
.stafflist-label {
    text-align: center;
    color : white;
    font-family : 'pusab';
    font-size : 2rem;
    text-decoration: underline;
    user-select: none;
}

.user-container {
    width : 15vh;
    height : 30vh;
    border : 2px solid white;
    border-radius : 6px;
    margin : 1rem;
    display : grid;
    align-items: center;
    justify-items: center;
    user-select: none;
}
.user-label {
    color : white;
    text-align: center;
    margin-bottom: 0;
    font-family : 'pusab';
    display : flex;
    justify-content: center;
    font-size : 1.75vh;
    width : 10vh;
    user-select: none;
}
.user-icon {
    width : 10vh;
    height : 10vh;
    border-radius : 50%;
    border : 3px solid white;
}
.user-socials-wrapper {
    width : 15vh;
    height : 2vh;
    display : flex;
    align-items: center;
    justify-content: center;
}
.user-socials {
    width : 2vh;
    height : 2vh;
    margin : auto;
    z-index : 3;
    cursor : pointer;
    transition : filter 0.2s;
}
.user-socials:hover {
    filter : brightness(60%);
}