ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgb(48, 48, 48, 0.4);
    backdrop-filter: blur(8px);
    position: fixed;
    top: 0;
    width: 100%;
}

ul.topnav li {
    float: left;
}

ul.topnav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 20px 30px;
  text-decoration: none;
  font-size: 20px;
}

ul.topnav li a:hover:not(.active) {
    background-color: rgb(72, 0, 114);
    transition-duration: 0.5s;
}

ul.topnav li a.active {
    background-color: rgb(143, 113, 160);
}

@media screen and (max-width: 600px) {
    ul.topnav li {float: none;}
}

@font-face {
    font-family: Inconsolata;
    src: url(fonts/inconsolata-v36-latin-regular.woff2);
}

body {
    background-image: 
        linear-gradient(270deg, #222233, #271a2c, rgba(0,86,128,0.4) 80%),
        url('background.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: 'Inconsolata';
}

h1 {
    font-size: 100px;
    text-align: left;
    color: white;
    padding: 200px 300px 0 200px;
}

.h1-border {
    border-bottom: solid 1px white;
    text-align: left;
}

.h1-ueber-mich {
    border-bottom: solid 1px white;
    text-align: left;
}

h2 {
    font-size: 40px;
    text-align: center;
    text-shadow: black;
    color: rgb(255, 255, 255);
}

h3 {
    text-align: justify;
    color: white;
}

p {
    color: white;
    font-size: 30px;
}

.abstand {
    padding: 300px 400px 200px 150px;
    font-size: 70px;
    text-align: left;
}

.pflanze {
    display: flex;
}

.florentina {
    padding: 200px 100px 50px 100px;
    float: left;
}

.kispiel {
    display: flex;
}

.game {
    padding: 200px 100px 50px 100px;
}

.hochzeitstrailer {
    
    display: flex;
}

.hochzeit {
    padding: 200px 100px 50px 100px;
    float: left;
}

.beschreibung {
    padding: 200px 80px 0 20px;
    font-size: 25px;
    color: #fff;
    text-align: justify;
}


.profilfoto {
    float: left;
    width: 400px;
    height: auto;
    border-radius: 50px 0 50px 0;
    margin-right: 40px;
    margin-bottom: 24px;
    box-shadow: 0 2px 24px #0003;
    object-fit: cover;
}

.uebermich-container {
    max-width: 1500px;
    margin: 48px auto 0 auto; 
    padding: 200px 32px 100px 32px;
    background: none;
    font-size: 20px;
}

.uebermich-text {
    font-size: 25px;
    line-height: 25px;
    color: #fff;
    text-align: justify;
}

@media (max-width: 900px) {
    .profilfoto {
        float: none;
        display: block;
        margin: 0 auto 18px auto;
        width: 220px;
    }
    .uebermich-text {
        text-align: left;
    }
}

.gradient-text {
    font-size: 100px;
    font-weight: bold;
    background: linear-gradient(90deg, #ff0062, #00e0ff, #ffe600, #9d00ff, #ff0062);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block;
    animation: gradient-move 10s ease-in-out infinite;
 
}

@keyframes gradient-move {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.background-video {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -10;
  pointer-events: none;
}

.fade {
    opacity: 0;
    animation: pagefadein 1.2s ease 0.1s forwards;
}

@keyframes pagefadein {
    to { opacity: 1; }
}