:root{    --warmwhite: rgb(255, 249, 233);    --fontp: 'Bitter',        serif;    --fonth: 'Text me one',        sans-serif;    --bs-btn-color: rgb(255, 249, 233);
}
body {    background: linear-gradient(rgb(0, 35, 0), black);    background-repeat: no-repeat;    background-attachment: fixed;}
.navbar {    background-color: rgba(0, 35, 0, 0.9);}

.navbar-brand:hover {    transform: skew(10deg) scale(1.05);    -webkit-box-reflect: below -20px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.1));}
@keyframes slideUp {    from {        transform: translateY(800px);    }
    to {        transform: translateY(0);    }}
@keyframes slideDown {    from {        transform: translateY(-500px);    }
    to {        transform: translateY(0);    }}
.navbar-brand {    transition: all 1s;
}
.slideDown2 {    animation: slideDown 2.5s ease 0s backwards;    transition: all 1s;
}
.slideDown2:hover {    transform: skew(10deg) scale(1.05);}

.cover-photo {    animation: fadeIn 2s;}
.fadein {    animation: fadeIn 1s ease 0.5s both;}
.kontakt {    animation: fadeIn 1s;}
@keyframes fadeIn {    0% {        opacity: 0;    }
    100% {        opacity: 1;    }}
/* navbar toggler icon*/.navbar-toggler {    width: 20px;    height: 20px;    position: relative;    transition: .5s ease-in-out;}
.navbar-toggler,.navbar-toggler:focus,.navbar-toggler:active,.navbar-toggler-icon:focus {    outline: none;    box-shadow: none;    border: 0;    position: relative;}
.navbar-toggler span {    margin: 0;    padding: 0;}
.toggler-icon {    display: block;    position: absolute;    height: 3px;    width: 100%;    background: #fff0ccd6;    border-radius: 1px;    opacity: 1;    left: 0;    transform: rotate(0deg);    transition: .25s ease-in-out;}
.middle-bar {    margin-top: 0px;}

/* State when the navbar is collapsed */
.navbar-toggler.collapsed .top-bar {    position: absolute;    top: 0px;    transform: rotate(0deg);    background: linear-gradient(263deg, rgb(255, 216, 99) 0%, rgb(255, 255, 255) 100%);}
.navbar-toggler.collapsed .middle-bar {    opacity: 1;    position: absolute;    top: 10px;    filter: alpha(opacity=100);    background: linear-gradient(263deg, rgb(255, 216, 99) 0%, rgb(255, 255, 255) 50%, rgb(255, 216, 99) 100%);}
.navbar-toggler.collapsed .bottom-bar {    position: absolute;    top: 20px;    transform: rotate(0deg);    background: linear-gradient(263deg, rgb(255, 255, 255) 0%, rgb(255, 216, 99) 100%);}
/* when navigation is clicked */
.navbar-toggler .top-bar {    top: inherit;    transform: rotate(135deg);}
.navbar-toggler .middle-bar {    opacity: 0;    top: inherit;    filter: alpha(opacity=0);}
.navbar-toggler .bottom-bar {    top: inherit;    transform: rotate(-135deg);}
/* navbar toggler icon end here */
.nav-item {    padding: 10px 15px;}

.nav-link {    text-align: center;    letter-spacing: 0.15rem;    color: darkgrey;    font-family: var(--fonth);    font-weight: 400;    font-size: 1.5rem;    transition: 0.4s;

}
.index .nav-link {    animation: slideDown 1s;}
.nav-link:hover {    text-shadow: 0px 0px 35px rgb(255, 255, 255), 0 0 15px rgb(255, 239,            186);    color: var(--warmwhite);    transform: scale(1.1);
}
.active {    color: var(--warmwhite) !important;    text-shadow: 0px 0px 15px white,        1px 1px 35px lightyellow;    transform: scale(1.10);    text-decoration: underline;}
p {    font-family: var(--fontp);    font-weight: 300;    color: var(--warmwhite);    font-size: 1.15rem;    text-align: justify;
}
h1 {    font-family: var(--fonth);    text-align: center;    color: var(--warmwhite);    text-shadow: 1px 5px 15px rgb(255, 255, 255);    ;    font-size: 3rem;}

h2 {    font-family: var(--fonth);    text-align: center;    color: var(--warmwhite);    text-shadow: 1px 5px 15px rgb(255, 255, 255);    ;}
.kontakt h2 {    font-family: var(--fonth);    text-align: center;    color: var(--warmwhite);    transition: all 0.3s;
}
.kontakt h2:hover {    text-shadow: 1px 5px 15px rgb(255, 255, 255);

}
h3 {    font-family: var(--fonth);    font-weight: 200;    text-align: center;    font-size: 1.5rem;    color: var(--warmwhite);}
h4 {    font-family: var(--fontp);    font-weight: 200;    text-align: center;    font-size: 1.25rem;    color: var(--warmwhite);}
.pl {    font-family: var(--fontp);    font-weight: 200;}
ul {    font-family: var(--fontp);    font-weight: 300;    color: var(--warmwhite);    font-size: 1.20rem;    text-align: justify;}
.card {    transition: all 0.3s;    animation: fadeIn 1s ease 0.1s both;    color: rgb(255,            239,            186);    border-color: rgb(255, 239,            186) !important;
}
.card:hover {    transform: scale(1.1);    background-color: rgba(0, 0, 0, 0);    text-shadow: 1px 5px 8px var(--warmwhite);}



#card1 {    animation: slideUp 0.5s;}
#card2 {    animation: slideUp 1s;}
#card3 {    animation: slideUp 1.5s;
}
#check1 {    animation: fadeIn 1s ease 1.5s both;}
#check2 {    animation: fadeIn 1s ease 2s both;}
#check3 {    animation: fadeIn 1s ease 2.5s both;
}
.btn-outline-secondary {    color: rgb(255,            239,            186) !important;    border-color: rgba(255, 239,            186, 1) !important;
    margin: 0;    font-family: var(--fonth);
}
.btn-outline-secondary:hover {    background-color: rgba(0, 0, 0, 0);    border-color: rgba(255, 239,            186, 1) !important;    box-shadow: 1px 1px 8px var(--warmwhite);    text-shadow: 1px 5px 8px var(--warmwhite);
}
.border-top {    border-color: rgba(255, 239,            186, 0.5) !important;}
.button {    transition: all 0.3s;
}
.button:hover {    transform: scale(1.1);}
.bggradient {    transition: all 0.3s;    background-image: linear-gradient(rgba(18, 121, 9, 0.1) 0%,            rgba(0, 0, 0, 0.1) 20%,            rgba(0, 0, 0, 0.1) 80%,            rgba(18, 121, 9, 0.1) 100%);}
.bggradient:hover {    transform: scale(1.05);}

figure {    overflow: auto;}
.image #zoom-In figure img {    transform: scale(1);    transition: 0.6s ease-in-out;}
.image #zoom-In figure:hover img {    transform: scale(1.15);}


.bi {    color: var(--warmwhite);}
.btn .bi {    color: rgb(255, 239,            186);
}
#hero {    position: relative;}
#hero video {    height: 100vh;    width: 100%;    background-position: absolute;    z-index: 10;    object-fit: cover;    font-family: 'object-fit:cover;';}
#hero .content {    background: rgba(0, 0, 0, 0.5);    height: 100%;    width: 100%;    z-index: 20;    position: absolute;    top: 0;    left: 0;}
.content h2 {    font-size: 2.7rem;}
.content h4 {    font-size: 2rem;}
.bigger-font {    font-size: 1.4rem;}
/* form {    color: antiquewhite;    font-family: var(--fontp);} */
::placeholder,option,#email,.contactform,.form-select,.form-floating,.form-control {    color: rgb(255, 239,            186) !important;    border-color: rgb(255, 239,            186) !important;    font-family: var(--fontp);}
.form-control:focus,.form-select:valid:focus {    box-shadow: 1px 1px 30px 1px var(--warmwhite);}
a {    text-decoration: none;}