@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');

@font-face { 
    font-family: 'Bold';
    src: url('fonts/Montserrat-Bold.ttf'); 
}
  
@font-face { 
    font-family: 'Black';
    src: url('fonts/Montserrat-Black.ttf'); 
}
  
@font-face { 
    font-family: 'ExtraBold';
    src: url('fonts/Montserrat-ExtraBold.ttf'); 
}
@font-face { 
    font-family: 'Medium';
    src: url('fonts/Montserrat-Medium.ttf'); 
}
@font-face { 
    font-family: 'SemiBold';
    src: url('fonts/Montserrat-SemiBold.ttf'); 
}

@keyframes soon-slidein {
    from {
        top: 27vw;
        visibility: hidden;
        opacity: 0;
    }
    to {
        top: 17vw;
        visibility: visible;
        opacity: 1;
    }
}

@keyframes teamlist-slidein {
    from {
        visibility: hidden;
        top: 20vw;
        opacity: 0;
    }
    to {
        top: 10vw;
        visibility: visible;
        opacity: 1;
    }
}

@keyframes mainpage-name-slidein {
    from {
        visibility: hidden;
        top: 5vw;
        opacity: 0;
    }
    to {
        top: 15vw;
        visibility: visible;
        opacity: 1;
    }
}

* {
    user-select: none;
}

body {
    background-color: #000000;
}

#main {
    position: fixed;
    width: 100%;
    height: 100vw;
}

#bg {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter: blur(0.7vw);
    overflow: hidden;
}

#navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(113, 0, 0, 0.762);
    border-bottom: 0.3vw solid #ff0000;
    border-image: radial-gradient(#ff0000, #ff0000, #8b0000);
    border-image-slice: 1;
    width: 100%;
    height: 7vw;
}

#navbarLogo {
    position: relative;
    /* width: 6vw; */
    top: 0.7vw;
    height: 6vw;
    left: 1vw;
}

#navbarName {
    position: relative;
    top: -1.8vw;
    left: -1.5vw;
    color: #ffffff;
    font-size: 2.5vw;
    font-family: 'Bold';
}

#red {
    color: #ff0000;
}

#discordBtn {
    position: relative;
    float: right;
    width: 10vw;
    height: 2.7vw;
    font-size: 1.3vw;
    font-family: 'SemiBold';
    border: none;
    outline: none;
    /* background-color: rgb(194, 0, 0); */
    background-color: transparent;
    color: #ffffff;
    border-radius: 0.3vw;
    /* box-shadow: 0 0 1vw rgb(200, 0, 0); */
    top: 1.8vw;
    right: 3vw;
    transform: scale(1);
    z-index: 4;
    transition-duration: 0.2s;
}

#shopBtn {
    position: relative;
    float: right;
    width: 10vw;
    height: 2.7vw;
    font-size: 1.3vw;
    font-family: 'SemiBold';
    border: none;
    outline: none;
    /* background-color: rgb(194, 0, 0); */
    background-color: transparent;
    color: #ffffff;
    border-radius: 0.3vw;
    /* box-shadow: 0 0 1vw rgb(200, 0, 0); */
    top: 1.8vw;
    right: 8vw;
    transform: scale(1);
    z-index: 4;
    transition-duration: 0.2s;
}

#productsBtn {
    position: relative;
    float: right;
    width: 10vw;
    height: 2.7vw;
    font-size: 1.3vw;
    font-family: 'SemiBold';
    border: none;
    outline: none;
    /* background-color: rgb(194, 0, 0); */
    background-color: transparent;
    color: #ffffff;
    border-radius: 0.3vw;
    /* box-shadow: 0 0 1vw rgb(200, 0, 0); */
    top: 1.8vw;
    right: 13vw;
    transform: scale(1);
    z-index: 4;
    transition-duration: 0.2s;
}

#homeBtn {
    position: relative;
    float: right;
    width: 10vw;
    height: 2.7vw;
    font-size: 1.3vw;
    font-family: 'SemiBold';
    border: none;
    outline: none;
    /* background-color: rgb(194, 0, 0); */
    background-color: transparent;
    color: #ffffff;
    border-radius: 0.3vw;
    /* box-shadow: 0 0 1vw rgb(200, 0, 0); */
    top: 1.8vw;
    right: 18vw;
    transform: scale(1);
    z-index: 4;
    transition-duration: 0.2s;
}

#discordBtn:hover, #shopBtn:hover, #homeBtn:hover, #productsBtn:hover {
    position: relative;
    background-color: red;
    box-shadow: 0 0 1vw rgb(178, 0, 0);
    cursor: pointer;
    transform: scale(1.1);
    z-index: 4;
    transition-duration: 0.2s;
}

#bottombar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 3.5vw;
    background-color: rgba(113, 0, 0, 0.762);
    border-top: 0.3vw solid #ff0000;
    text-align: center;
}

#bottombarName {
    position: relative;
    color: #ffffff;
    font-size: 1.8vw;
    font-family: 'Bold';
    top: 0.5vw;
}

.team-box {
    position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
    top: 8vw;
    z-index: -1;
}

.team {
    display: flex;
    flex-direction:row;
    flex-wrap:wrap;
    margin-left: 28vw;
    width: 55vw;
    height: 25vw;
}

.player {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* top: 10vw; */
    margin-left: 1vw;
    width: 12vw;
    height: 12vw;
    background-color: rgba(26, 0, 0, 0.869);
    box-shadow: 0 0 0.6vw #280000cb;
    text-align: center;
    border-radius: 0.4vw;
    visibility: hidden;
    animation: teamlist-slidein 0.3s ease-in-out both;
    transition-duration: 0.2s;
}

.player:hover {
    background-color: #a10000b8;
    box-shadow: 0 0 0.4vw #a10000b8;
    cursor: grab;
    transition-duration: 0.2s;
}

.player:active {
    background-color: #ff0000de;
    box-shadow: 0 0 0.4vw #ff0000e6;
    transition-duration: 0.2s;
}

.player-img {
    position: relative;
    border-radius: 0.2vw;
    width: 6vw;
    margin-top: 1vw;
}

.player-name {
    position: relative;
    color: #ffffff;
    font-size: 1vw;
    margin-top: 0.1vw;
    font-family: 'Bold';
}

.player-group {
    position: relative;
    color: #ff0000;
    margin-top: -0.5vw;
    font-size: 0.9vw;
    font-family: 'Bold';
}

#name-box {
    position: relative;
    text-align: center;
    z-index: -1;
}

#name {
    position: relative;
    color: #ffffff;
    /* text-shadow: 0 0 1vw #ffffff; */
    /* top: 15vw; */
    font-size: 8vw;
    font-family: 'Bold';
    visibility: hidden;
    animation: mainpage-name-slidein 0.3s ease-in-out both;
}

#redname {
    /* text-shadow: 0 0 1vw #ff0000; */
    color: #ff0000;
}

#productspage {
    display: none;
}

#discordBtn2 {
    position: relative;
    float: right;
    width: 10vw;
    height: 2.7vw;
    font-size: 1.3vw;
    font-family: 'SemiBold';
    border: none;
    outline: none;
    /* background-color: rgb(194, 0, 0); */
    background-color: transparent;
    color: #ffffff;
    border-radius: 0.3vw;
    /* box-shadow: 0 0 1vw rgb(200, 0, 0); */
    top: 1.8vw;
    right: 3vw;
    transform: scale(1);
    z-index: 4;
    transition-duration: 0.2s;
}

#shopBtn2 {
    position: relative;
    float: right;
    width: 10vw;
    height: 2.7vw;
    font-size: 1.3vw;
    font-family: 'SemiBold';
    border: none;
    outline: none;
    /* background-color: rgb(194, 0, 0); */
    background-color: transparent;
    color: #ffffff;
    border-radius: 0.3vw;
    /* box-shadow: 0 0 1vw rgb(200, 0, 0); */
    top: 1.8vw;
    right: 8vw;
    transform: scale(1);
    z-index: 4;
    transition-duration: 0.2s;
}

#productsBtn2 {
    position: relative;
    float: right;
    width: 10vw;
    height: 2.7vw;
    font-size: 1.3vw;
    font-family: 'SemiBold';
    border: none;
    outline: none;
    /* background-color: rgb(194, 0, 0); */
    background-color: transparent;
    color: #ffffff;
    border-radius: 0.3vw;
    /* box-shadow: 0 0 1vw rgb(200, 0, 0); */
    top: 1.8vw;
    right: 13vw;
    transform: scale(1);
    z-index: 4;
    transition-duration: 0.2s;
}

#homeBtn2 {
    position: relative;
    float: right;
    width: 10vw;
    height: 2.7vw;
    font-size: 1.3vw;
    font-family: 'SemiBold';
    border: none;
    outline: none;
    /* background-color: rgb(194, 0, 0); */
    background-color: transparent;
    color: #ffffff;
    border-radius: 0.3vw;
    /* box-shadow: 0 0 1vw rgb(200, 0, 0); */
    top: 1.8vw;
    right: 18vw;
    transform: scale(1);
    z-index: 4;
    transition-duration: 0.2s;
}

#discordBtn2:hover, #shopBtn2:hover, #homeBtn2:hover, #productsBtn2:hover {
    position: relative;
    background-color: red;
    box-shadow: 0 0 1vw rgb(178, 0, 0);
    cursor: pointer;
    transform: scale(1.1);
    z-index: 4;
    transition-duration: 0.2s;
}

#soon-box {
    position: relative;
    text-align: center;
    z-index: -1;
}

#soon {
    position: relative;
    color: white;
    font-size: 17vw;
    font-family: 'Bold';
    /* top: 17vw; */
    visibility: hidden;
    animation: soon-slidein 0.3s ease-in-out both;
}

.product-box {
    position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
    top: 8vw;
    z-index: -1;
}

.product {
    display: flex;
    flex-direction:row;
    flex-wrap:wrap;
    width: 55vw;
    height: 25vw;
}

.produc {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* top: 10vw; */
    z-index: 1;
    margin-left: 1vw;
    width: 12vw;
    height: 12vw;
    background-color: rgba(26, 0, 0, 0.869);
    box-shadow: 0 0 0.6vw #280000cb;
    text-align: center;
    border-radius: 0.4vw;
    visibility: hidden;
    animation: teamlist-slidein 0.3s ease-in-out both;
    transition-duration: 0.2s;
}

.produc:hover {
    background-color: #a10000b8;
    box-shadow: 0 0 0.4vw #a10000b8;
    cursor: grab;
    transition-duration: 0.2s;
}

.produc:active {
    background-color: #ff0000de;
    box-shadow: 0 0 0.4vw #ff0000e6;
    transition-duration: 0.2s;
}

.produc-img {
    position: relative;
    border-radius: 0.2vw;
    z-index: -99999;
    width: 6vw;
    margin-top: 1vw;
}

.produc-img:hover ~ .produc {
    background-color: #a10000b8;
    box-shadow: 0 0 0.4vw #a10000b8;
    cursor: grab;
    transition-duration: 0.2s;
}

.produc-name {
    position: relative;
    color: #ffffff;
    font-size: 1vw;
    margin-top: 0.1vw;
    font-family: 'Bold';
}

.produc-group {
    position: relative;
    color: #ff0000;
    margin-top: -0.5vw;
    font-size: 0.9vw;
    font-family: 'Bold';
}

@media screen and (max-width: 390px) {
    .team {
        height: 100%;
        width: 30vw;
    }

    .player-group {
        position: relative;
        top: -7vw;
    }

    .player-name {
        position: relative;
        top: -3.5vw;
    }

    #bg {
        height: 100%;
        width: 100%;
        filter: blur(1vw);
    }
}

@media screen and (max-width: 890) {
    .player-group {
        position: relative;
        top: -2.5vw;
    }

    .player-name {
        position: relative;
        top: -2.5vw;
    }
}