html, body { height: 100%; /* Höhe auf 100% setzen */ margin: 0; font-family: Arial, sans-serif; background: url("alphacar-bg.png") no-repeat center center fixed; background-size: cover; background-attachment: fixed; color: #fff; } body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); /* Abdunkelung */ z-index: -1; } .main-content { min-height: calc(100vh - 60px); /* Füllt den ganzen Bildschirm bis auf die Navbar */ padding: 20px; } /* Navbar */ .navbar { display: flex; justify-content: space-between; align-items: center; background-color: rgba(31,31,31,0.9); padding: 10px 20px; } .navbar a { color: #fff; text-decoration: none; margin: 0 10px; font-weight: bold; } /* Dropdown */ .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: rgba(50, 50, 50, 0.95); min-width: 160px; box-shadow: 0px 8px 16px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: #fff; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #5865F2; } .dropdown:hover .dropdown-content { display: block; } .user-info { display: flex; align-items: center; } .user-info img { border-radius: 50%; margin-right: 10px; height: 35px; width: 35px; } .logout-btn { background-color: #5865F2; border: none; padding: 8px 12px; border-radius: 5px; color: #fff; cursor: pointer; margin-left: 10px; } .logout-btn:hover { background-color: #4752C4; } /* Burger für Mobile */ .navbar .burger { display: none; cursor: pointer; font-size: 1.5em; } @media (max-width: 768px) { .navbar-links { display: none; flex-direction: column; background-color: rgba(31,31,31,0.95); position: absolute; top: 60px; left: 0; width: 100%; } .navbar-links.show { display: flex; } .navbar .burger { display: block; } .dropdown-content { position: static; } } /*LOGIN FORM*/ #loginform{ position: fixed; inset: 0px; width: 12rem; height: 5rem; max-width: 100vw; max-height: 100dvh; margin: auto; } .discord-button{ display: inline-flex; align-items: center; background-color: #5865F2; /* Discord Blau */ color: #fff; font-weight: 600; font-size: 1.2em; padding: 12px 20px; border-radius: 8px; text-decoration: none; border: none; cursor: pointer; transition: background-color 0.2s ease-in-out; } .discord-button:hover { background-color: #4752C4; /* dunkleres Blau beim Hover */ } .discord-button img { height: 24px; margin-right: 10px; } /*EINTRAGUNG*/ #formdiv { width: 40%; height: 70vh; /* mittlere Box-Höhe */ display: flex; justify-content: center; /* Zentriert horizontal */ align-items: center; /* Zentriert vertikal */ border: 2px solid cyan; background-color: rgba(255, 0, 255, 0.5); margin: 0 auto; border-radius: 10px; /* optional: runde Ecken */ } #entryform { width: 100%; height: 100%; display: flex; flex-direction: column; /* Elemente untereinander */ justify-content: space-between; /* gleichmäßig verteilen */ align-items: stretch; padding: 20px; box-sizing: border-box; } .form-group { display: flex; flex-direction: column; /* Label + Input untereinander */ gap: 5px; /* kleiner Abstand zwischen Label & Input */ } #entryform h1 { text-align: center; /* Überschrift mittig */ margin: 0; } #entryform select, #entryform input[type="number"], #entryform input[type="text"], #entryform input[type="submit"] { width: 100%; /* volle Breite */ height: 40px; margin-top: 10px; /* Abstand nach oben */ font-size: 1rem; } #button { background-color: cyan; font-weight: bolder; border: 2px solid white; border-radius: 5px; cursor: pointer; } /*#formdiv{ width: 40%; height: 100%; display: flex; justify-content: center; align-items: center; border-style: solid; border-color: cyan; background-color: rgba(255, 0, 255, 0.5); margin: 0 auto; } #entryform{ margin: 0 auto; } #entryform #button{ background-color: cyan; width: 75%; height: 75px; align-content: left; font-weight: bolder; border: 2px solid yellow; border-radius: 5px; } #button { display: block; margin-left: 0; font-weight: bolder; font-size: larger; }*/