@import url('https://fonts.googleapis.com/css?family=Pirata+One|Rubik:900');

:root {
    --main: #282828;
    --white: #fff;
    --title-start: #fff;
    --title-end: green;
    --accent-color: #000000;
    --sub-color: #211B5C;
}

*,
.custom-font {
    font-family: 'Rubik', sans-serif, 200 !important;
}

.navbar {
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 400;
    --bs-navbar-brand-font-size: 21px;
    letter-spacing: 2.5px;
}

.nav-item {
    font-size: 15px;
    --bs-nav-link-color: white !important;
}

.container * {
    color: #fff;
}

.accent-color {
    background-color: #5C311B;
}

body {
    background-color: var(--main);
    min-width: 400px;
}

input::placeholder {
    color: darkgray;
}

.logo {
    width: 55px;
    height: 55px;
    margin-top: -12.5px;
}

#myNavbar {
    max-height: 60px;
    vertical-align: top;
    background-color: var(--accent-color);
    color: #fff;
}

.spacer {
    z-index: 1;
    aspect-ratio: 960/300;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-top: -25%;
    position: absolute;
    pointer-events: none;
}

.curvey {
    background-image: url('./Bilder/curvey.svg');
}

.spikey {
    background-image: url('./Bilder/spikey.svg');
}

.flip {
    transform: rotate(180deg);
    margin-top: 0;
}

.container-padding {
    padding-top: 15% !important;
    padding-bottom: 5% !important;
}

.title-box {
    padding-top: 3vh;
    padding-left: 3vw;
}

.splide__slide img {
    width: 100%;
    height: auto;
}

.spacing {
    display: flex;
    flex-direction: column;
}

.spacing img {
    margin-top: 3vw;
    margin-right: 3vw;
    align-self: center;
    align-items: center;
    height: 30vh;
}

.impressum {
    float: right;
    padding-right: 30px;
}

.impressum img {
    height: 1.5em;
}

#contact {
    margin-top: 5%;
    background-color: #202020;
}

.navbar-brand img {
    max-height: 20px;
    margin-bottom: 5px;
}

.bg-light-gray {
    background-color: #616161;
}

.bottom-text {
    padding-bottom: 5em;
    padding-right: 2.5rem;
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Rubik", sans-serif, 200;
}

body,
html {
    height: 100%;
    line-height: 1.8;
}

.bgimg-1 {
    position: absolute;
    z-index: 1;
    background-position: center center;
    background-size: cover;
    background-image: url("./background.svg");
    width: 100%;
    height: 100%;
    min-height: 600px;
    -webkit-mask-image: url("./Bilder/grit.png");
    mask-image: url("./Bilder/grit.png");
    color: black;
    overflow-x: hidden;
}

.bottom-content {
    position: sticky;
    top: 100%;
    overflow-y: hidden;
}

body {
    min-height: 20rem;
    overflow-x: hidden;
}

.overlay {
    position: absolute;
    z-index: 2;
    top: 0%;
    width: 100%;
    height: calc(100svh - 64px);
    min-height: 400px;
    color: #000000;
    overflow-x: hidden;
}

.smaller-overlay {
    color: gray;
}

.parent-element {
    z-index: -1;
    position: relative;
    height: 110svh;
    min-height: 400px;
}

.logo-overlay {
    height: 60%;
    min-height: 400px;
}

.logo-overlay img {
    max-width: 40vh;
    height: auto;
    min-height: 75px;
    min-width: 120px;
}

.bottom-right-text {
    position: absolute;
    color: #e87d43ff;
    bottom: 5svh;
    right: 3vw;
}

.top-left-text {
    color: #5c311bff;
}

.hidden {
    visibility: hidden;
}

.bg-custom {
	background-color: #290001;
}