@font-face {
  font-family: 'Dream';
  src: url('../fonts/Dream\ MMA.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@keyframes neon-pink {
0%, 100% {
    text-shadow:
        0 0 1px #f700ff,
        0 0 2px #f700ff,
        0 0 3px #f700ff;
    color: #f700ff;
}s
50% {
    text-shadow:
        0 0 2px #ff00ff,
        0 0 3px #ff00ff,
        0 0 4px #ff00ff;
    color: #ff00ff;
}
}

@keyframes neon-blue {
0%, 100% {
    text-shadow:
        0 0 2px #06cbed,
        0 0 4px #06cbed,
        0 0 6px #06cbed;
    color: #06cbed;
}
50% {
    text-shadow:
        0 0 4px #00a3cc,
        0 0 6px #00a3cc,
        0 0 8px #00a3cc;
    color: #00a3cc;
}
}

h1 {
font-size: 4rem;
}

.pink {
animation: neon-pink 1.5s infinite alternate;
}

.blue {
animation: neon-blue 1.5s infinite alternate;
}


#bg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
}
/* Index.html */
body {
  background-color: #000000;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  color: #ffffff;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  font-size: 45px;
  position: relative;
  width: 100%;
  font-family: Dream, sans-serif;
}

h1 {
  margin: 10px;
}

.header h1 a {
  text-decoration: none;
}

.no-underline {
  text-decoration: none;
}


.navbar {
display: flex;
margin-top: 10px;
overflow: hidden;
margin-left: 450px;
padding-right: 20px;
font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
font-size: 16px;
color: rgb(255, 255, 255);
text-shadow: none;
text-align: center;
padding: 5px 8px;
text-decoration: none;
border: 2px solid transparent;
border-radius: 5px;
margin: 5px 5px;
transition: all 0.3s ease;
}

/* Spezielle Ränder für die Links */
.navbar a.login {
border-color: rgb(116, 188, 247);
}

.navbar a.projects {
border-color: rgb(117, 250, 128);
}

.navbar a.faq {
border-color: rgb(247, 247, 126);
}

/* Hover- und Klick-Effekte für die Links */
.navbar a:hover {
background-color: rgba(255, 255, 255, 0.2);
transform: scale(1.05); /* Vergrößert die Links leicht beim Hover */
}

/* Spezifische Border für den More-Button */
.navbar .dropdown .dropbtn {
    border: 2px solid transparent;
    border-color: rgb(247, 247, 126);  /* Diese Farbe gilt jetzt auch für "More" */
    font-size: 16px;
    border-radius: 5px;  /* Gleiche Abrundung wie die Links */
    color: white;
    padding: 5px 8px;
    margin: 0 5px;
    background: transparent;
}

/* Hover- und Klick-Effekte für die Links */
.navbar a:hover, .dropdown-content a:hover, .dropdown .dropbtn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.05); /* Vergrößert die Links beim Hover */
}

/* Dropdown-Button-Stile */
.dropdown .dropbtn {
    font-size: 16px;
    border: 2px solid transparent; /* Sicherstellen, dass die Border auch hier sichtbar ist */
    border-color: rgb(247, 247, 126);  /* Border-Farbe für den Button */
    color: white;
    padding: 14px 16px;
    background: transparent;
}

/* Hover-Effekt für den Dropdown-Button */
.navbar a:hover, .dropdown:hover .dropbtn {
    text-shadow: 1px 1px 12px, 1px 1px 25px;
}

/* Dropdown-Inhalte */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff27;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: flex;
    align-items: center;
    text-align: center;
}

.dropdown-content a img {
    margin-right: 8px;
}

.dropdown-content a:hover {
    background-color: #444;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* Animation für die Morph-Übergang */
body.morphing #bg {
animation: morphToCircle 1s forwards;
}

@keyframes morphToCircle {
0% {
    width: 100%;
    height: 100%;
    border-radius: 0%;
}
50% {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #ffffff;
    transform: translate(-50%, -50%);
}
100% {
    width: 3000px;
    height: 3000px;
    border-radius: 50%;
    background-color: #ff00ff;
    transform: translate(-1500px, -1500px);
}
}

.spaceship {
  position: absolute;
  top: -60px;
  opacity: 0;
  width: 50px;
  height: 50px;
  background-size: contain;
  background-repeat: no-repeat;
}