@font-face {
    font-family: "Bebas";
    src: url("../public-fonts/BebasNeue-Regular.ttf");
}

@font-face {
    font-family: "Lato";
    src: url("../public-fonts/Lato-Light.ttf");
}

body {
    background-color: #0d0d0d;
}

/* layout */
.layout-navbar-home {
    position: fixed;
    top: 1vw;
    left: 0vw;
    height: 3vw;
    width: 3vw;
    background-color: #0d0d0d9f;
    border: 0.15vw #C31C25 solid;
}

.layout-navbar-home:hover {
    transition: 0.4s;
    background-image: linear-gradient(-90deg, #C31C25, #125186);
}

.layout-navbar-login {
    position: fixed;
    top: 4.2vw;
    left: 0vw;
    height: 3vw;
    width: 3vw;
    background-color: #0d0d0d9f;
    border: 0.15vw #C31C25 solid;
}

.layout-navbar-login:hover {
    transition: 0.4s;
    background-image: linear-gradient(-90deg, #C31C25, #125186);
}

.layout-navbar-discord {
    position: fixed;
    top: 7.4vw;
    left: 0vw;
    height: 3vw;
    width: 3vw;
    background-color: #0d0d0d9f;
    border: 0.15vw #C31C25 solid;
}

.layout-navbar-discord:hover {
    transition: 0.4s;
    background-image: linear-gradient(-90deg, #C31C25, #125186);
}

.layout-navbar a img {
    margin-top: 0.5vw;
    margin-left: 0.5vw;
    height: 2vw;
    width: 2vw;
    user-select: none;
}

.layout-navbar a img:hover {
    margin-top: 0.25vw;
    margin-left: 0.25vw;
    height: 2.5vw;
    width: 2.5vw;
}

.global-bottom-bar-container {
    display: block;
    padding-top: 5vw;
    padding-left: 0vw;
}

.global-bottom-bar {
    height: 5vw;
    width: 100%;
    background-color: #1a1a1a;
    border-top: 1vw #C31C25 solid;
}

.global-bottom-bar p1 {
    position: absolute;
    bottom: 2vw;
    left: 6.5vw;
    font-family: "Lato";
    font-size: 0.7vw;
    color: #fff;
}

.global-bottom-bar p2 {
    position: absolute;
    bottom: 1vw;
    left: 32.5vw;
    font-family: "Lato";
    font-size: 0.7vw;
    color: #fff;
}

.global-bottom-bar-imprint {
    position: absolute;
    bottom: 3vw;
    left: 32.5vw;
    font-family: "Lato";
    font-size: 0.8vw;
    color: #fff;
    text-shadow: 0.03vw 0.03vw #0d0d0d;
    text-decoration: none;
}

.global-bottom-bar-imprint:hover {
    transition: 0.4s;
    color: #C31C25;
}

.global-bottom-bar-data-protection {
    position: absolute;
    bottom: 3vw;
    left: 37.2vw;
    font-family: "Lato";
    font-size: 0.8vw;
    color: #fff;
    text-shadow: 0.03vw 0.03vw #0d0d0d;
    text-decoration: none;
}

.global-bottom-bar-data-protection:hover {
    transition: 0.4s;
    color: #C31C25;
}

::-webkit-scrollbar { width: 0.4vw; }
::-webkit-scrollbar-track { background-color: #0d0d0d; }
::-webkit-scrollbar-thumb { background-color: #C31C25; }
::-webkit-scrollbar-thumb:hover { transition: 0.3s; background-color: #721a28; }
::selection { color: #fff; background-color: #C31C25; }

@keyframes status-bar {
    0% { width: 0; }
    100% { width: 100%; }
}

@keyframes status-bar-slide-in {
    0% {
      transform: translateX(500px) scale(.2);
    }
    100% {
      transform: translateX(0px) scale(1);
    }
}

/* home */
.home-container {
    position: absolute;
    top: 0vw;
    left: 12vw;
    height: auto;
    width: 75vw;
    background-color: #020202;
}

.home-header-video {
    position: absolute;
    top: 0vw;
    left: 0vw;
    height: auto;
    width: 75vw;
}

.home-artwork-1 {
    position: absolute;
    top: 2.5vw;
    right: 5vw;
    height: 35.5vw;
    width: auto;
    user-select: none;
}

.home-artwork-2 {
    position: absolute;
    top: 58vw;
    left: 1vw;
    height: 25vw;
    width: auto;
    user-select: none;
}

.home-bar-1 {
    position: absolute;
    top: 38vw;
    left: 0vw;
    height: 1vw;
    width: 100%;
    background-image: linear-gradient(-90deg, #C31C25, #125186);
    transform: skewY(-4deg);
}

.home-bar-2 {
    position: absolute;
    top: 39vw;
    left: 0vw;
    height: 100vw;
    width: 100%;
    background-color: #020202;
    transform: skewY(-4deg);
}

.home-bar-3 {
    position: absolute;
    top: 132vw;
    left: 0vw;
    height: 20vw;
    width: 100%;
    background-color: #020202;
}

.home-bar-4 {
    position: absolute;
    top: 40vw;
    left: 0vw;
    height: 98vw;
    width: 100%;
    background-color: #1a1a1a;
    border-bottom: 1vw #C31C25 solid;
    transform: skewY(-4deg);
}

.home-box-1 {
    position: absolute;
    top: 80vw;
    left: 0vw;
    height: 20vw;
    width: 100%;
    background-color: #020202;
    border-top: 0.3vw #C31C25 solid;
    border-bottom: 0.3vw #C31C25 solid;
}

.home-box-1-video {
    position: absolute;
    top: 1vw;
    right: 5vw;
    height: 18vw;
    width: 33vw;
}

.home-box-1-text {
    position: absolute;
    top: 0vw;
    left: 5vw;
}

.home-box-1-text h1 {
    font-family: "Bebas";
    font-size: 3vw;
    color: #fff;
    text-shadow: 0.1vw 0.1vw #0d0d0d;
}

.home-box-1-text h2 {
    margin-top: -2.5vw;
    font-family: "Lato";
    font-size: 0.85vw;
    color: #C31C25;
    text-shadow: 0.03vw 0.03vw #0d0d0d;
}

.home-box-1-text p {
    width: 29vw;
    font-family: "Lato";
    font-size: 1vw; 
    color: #fff;
    text-shadow: 0.03vw 0.03vw #0d0d0d;
}

.home-header-text {
    position: absolute;
    top: 5vw;
    left: 10vw;
}

.home-header-text h1 {
    font-family: "Bebas";
    font-size: 6vw;
    color: #fff;
    text-shadow: 0.1vw 0.1vw #0d0d0d;
}

.home-header-text h2 {
    margin-top: -5.5vw;
    font-family: "Lato";
    font-size: 0.85vw;
    color: #C31C25;
    text-shadow: 0.03vw 0.03vw #0d0d0d;
}

.home-header-text p {
    width: 25vw;
    font-family: "Lato";
    font-size: 1vw; 
    color: #fff;
    text-shadow: 0.03vw 0.03vw #0d0d0d;
}

.home-header-text button {
    height: 2.2vw;
    width: 12vw;
    background-color: #020202;
    border: 0vw;
    border-radius: 0.2vw;
    font-family: "Lato";
    font-size: 0.8vw;
    color: #fff;
    user-select: none;
    cursor: pointer;
}

.home-header-text button:hover {
    transition: 0.3s;
    background-image: linear-gradient(-90deg, #C31C25, #125186);
    font-size: 0.9vw;
    letter-spacing: 0.05vw;
}

.home-text-1 {
    position: absolute;
    top: 40vw;
    right: 5vw;
}

.home-text-1 h1 {
    font-family: "Bebas";
    font-size: 3vw;
    color: #fff;
    text-shadow: 0.1vw 0.1vw #0d0d0d;
}

.home-text-1 h2 {
    margin-top: -2vw;
    font-family: "Lato";
    font-size: 0.85vw;
    color: #C31C25;
    text-shadow: 0.03vw 0.03vw #0d0d0d;
}

.home-text-1 p {
    width: 45vw;
    font-family: "Lato";
    font-size: 1vw; 
    color: #fff;
    text-shadow: 0.03vw 0.03vw #0d0d0d;
}

.home-text-2 {
    position: absolute;
    top: 102vw;
    left: 5vw;
}

.home-text-2 h1 {
    font-family: "Bebas";
    font-size: 2vw;
    color: #fff;
    text-shadow: 0.1vw 0.1vw #0d0d0d;
}

.home-text-2 p {
    margin-top: -1.5vw;
    width: 20vw;
    font-family: "Lato";
    font-size: 1vw; 
    color: #fff;
    text-shadow: 0.03vw 0.03vw #0d0d0d;
}

.home-text-3 {
    position: absolute;
    top: 102vw;
    left: 27.5vw;
}

.home-text-3 h1 {
    font-family: "Bebas";
    font-size: 2vw;
    color: #fff;
    text-shadow: 0.1vw 0.1vw #0d0d0d;
}

.home-text-3 p {
    margin-top: -1.5vw;
    width: 20vw;
    font-family: "Lato";
    font-size: 1vw; 
    color: #fff;
    text-shadow: 0.03vw 0.03vw #0d0d0d;
}

.home-text-4 {
    position: absolute;
    top: 102vw;
    right: 5vw;
}

.home-text-4 h1 {
    font-family: "Bebas";
    font-size: 2vw;
    color: #fff;
    text-shadow: 0.1vw 0.1vw #0d0d0d;
}

.home-text-4 p {
    margin-top: -1.5vw;
    width: 20vw;
    font-family: "Lato";
    font-size: 1vw; 
    color: #fff;
    text-shadow: 0.03vw 0.03vw #0d0d0d;
}

.home-text-5 {
    position: absolute;
    top: 118vw;
    left: 5vw;
}

.home-text-5 h1 {
    font-family: "Bebas";
    font-size: 2vw;
    color: #fff;
    text-shadow: 0.1vw 0.1vw #0d0d0d;
}

.home-text-5 p {
    margin-top: -1.5vw;
    width: 20vw;
    font-family: "Lato";
    font-size: 1vw; 
    color: #fff;
    text-shadow: 0.03vw 0.03vw #0d0d0d;
}

.home-text-6 {
    position: absolute;
    top: 118vw;
    left: 27.5vw;
}

.home-text-6 h1 {
    font-family: "Bebas";
    font-size: 2vw;
    color: #fff;
    text-shadow: 0.1vw 0.1vw #0d0d0d;
}

.home-text-6 p {
    margin-top: -1.5vw;
    width: 20vw;
    font-family: "Lato";
    font-size: 1vw; 
    color: #fff;
    text-shadow: 0.03vw 0.03vw #0d0d0d;
}

.home-text-7 {
    position: absolute;
    top: 118vw;
    right: 5vw;
}

.home-text-7 h1 {
    font-family: "Bebas";
    font-size: 2vw;
    color: #fff;
    text-shadow: 0.1vw 0.1vw #0d0d0d;
}

.home-text-7 p {
    margin-top: -1.5vw;
    width: 20vw;
    font-family: "Lato";
    font-size: 1vw; 
    color: #fff;
    text-shadow: 0.03vw 0.03vw #0d0d0d;
}

.home-bottom-bar p1 {
    position: absolute;
    top: 149.5vw;
    left: 6.5vw;
    font-family: "Lato";
    font-size: 0.7vw;
    color: #fff;
}

.home-bottom-bar p2 {
    position: absolute;
    top: 150.5vw;
    left: 30vw;
    font-family: "Lato";
    font-size: 0.7vw;
    color: #fff;
}

.home-bottom-bar-social {
    position: absolute;
    top: 138vw;
    right: 5vw;
}

.home-bottom-bar-social h1 {
    margin-bottom: -0.2vw;
    font-family: "Bebas";
    font-size: 1.7vw;
    color: #fff;
    text-shadow: 0.03vw 0.03vw #0d0d0d;
}

.home-bottom-bar-social a {
    display: block;
    font-family: "Lato";
    font-size: 1vw;
    color: #fff;
    text-shadow: 0.03vw 0.03vw #0d0d0d;
    text-decoration: none;
    cursor: pointer;
}

.home-bottom-bar-social a:hover {
    transition: 0.4s;
    color: #C31C25;
}

.home-bottom-bar-general {
    position: absolute;
    top: 138vw;
    right: 15vw;
}

.home-bottom-bar-general h1 {
    margin-bottom: -0.2vw;
    font-family: "Bebas";
    font-size: 1.7vw;
    color: #fff;
    text-shadow: 0.03vw 0.03vw #0d0d0d;
}

.home-bottom-bar-general a {
    display: block;
    font-family: "Lato";
    font-size: 1vw;
    color: #fff;
    text-shadow: 0.03vw 0.03vw #0d0d0d;
    text-decoration: none;
    cursor: pointer;
}

.home-bottom-bar-general a:hover {
    transition: 0.4s;
    color: #C31C25;
}

.home-bottom-bar-imprint {
    position: absolute;
    top: 148.5vw;
    left: 30.5vw;
    font-family: "Lato";
    font-size: 0.8vw;
    color: #fff;
    text-shadow: 0.03vw 0.03vw #0d0d0d;
    text-decoration: none;
}

.home-bottom-bar-imprint:hover {
    transition: 0.4s;
    color: #C31C25;
}

.home-bottom-bar-data-protection {
    position: absolute;
    top: 148.5vw;
    left: 35.2vw;
    font-family: "Lato";
    font-size: 0.8vw;
    color: #fff;
    text-shadow: 0.03vw 0.03vw #0d0d0d;
    text-decoration: none;
}

.home-bottom-bar-data-protection:hover {
    transition: 0.4s;
    color: #C31C25;
}

/* team */
.team-container {
    position: absolute;
    top: 0vw;
    left: 10vw;
    height: auto;
    width: 75vw;
    background-color: #020202;
}

.team-header-img {
    position: absolute;
    top: 0vw;
    left: 0vw;
    height: 10vw;
    width: 100%;
    border-top: 2vw #1a1a1a solid;
    border-bottom: 1vw #C31C25 solid;
    user-select: none;
}