telegram-film-wunsch-bot/public/styles.css

/* styles.css */

/* Allgemeine Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
}

html, body {
    height: 100%; /* Damit das Body-Element die volle Höhe einnimmt */
}

body {
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
    display: flex; /* Flexbox aktivieren */
    flex-direction: column; /* Vertikale Anordnung */
}

/* Header Styles */
header {
    background: #0078ff;
    color: white;
    padding: 20px 0;
    text-align: center;
}

header h1 {
    margin-bottom: 10px;
}

nav ul {
    list-style: none;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

nav a:hover {
    text-decoration: underline;
}

/* Container Styles */
.container {
    flex: 1; /* Ermöglicht, dass der Container den verbleibenden Platz einnimmt */
    max-height: 510px; /* Maximale Höhe gesetzt */
    max-width: 800px;
    margin: 100px auto 20px; /* Erhöhe den oberen Abstand auf 40px */
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.container-2 {
    flex: 1; /* Ermöglicht, dass der Container den verbleibenden Platz einnimmt */
    max-height: 300px; /* Maximale Höhe gesetzt */
    max-width: 800px;
    margin: 100px auto 20px; /* Erhöhe den oberen Abstand auf 40px */
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}


h2 {
    margin-bottom: 15px;
    color: #0078ff;
}

/* Form Styles */
form {
    display: flex;
    flex-direction: column;
}

label {
    margin: 10px 0 5px;
}

select, input[type="url"], input[type="text"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 15px;
}

button {
    padding: 10px;
    background-color: #0078ff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

button:hover {
    background-color: #005bb5;
}

/* Message Styles */
#message {
    margin-top: 15px;
    font-weight: bold;
}

/* Footer Styles */
footer {
    display: flex; /* Flexbox für die Anordnung der Inhalte */
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: center; /* Vertikale Zentrierung */
    padding: 15px; /* Innenabstand */
    background: #0078ff; /* Hintergrundfarbe */
    color: white; /* Schriftfarbe */
    width: 100%;
    margin-top: auto; /* Fügt oben einen automatischen Margin hinzu, um den Footer nach unten zu drücken */
}

.footer-content {
    display: flex; /* Flexbox für die inneren Inhalte */
    justify-content: space-between; /* Abstand zwischen Bot-Version und mittigem Inhalt */
    width: 100%; /* Macht den Container 100% breit */
}

.footer-center {
    text-align: center; /* Zentriert den Text in diesem Container */
    flex-grow: 1; /* Ermöglicht, dass dieser Container den verfügbaren Platz einnimmt */
}

.bot-version {
    margin-right: auto; /* Schiebt die Bot-Version nach links */
    font-style: italic; /* Kursive Schrift für einen gravierten Effekt */
    color: rgba(255, 255, 255, 0.8); /* Leicht durchscheinend für einen Gravureffekt */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Schatten für den Gravureffekt */
}

.welcome-title {
    text-align: center; /* Textzentrierung */
    margin-bottom: 15px; /* Abstand nach unten */
}

/* Step Styles */
.steps {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #0078ff;
    border-radius: 8px;
    background: #f9f9f9; /* Hellgraue Hintergrundfarbe */
}

.step {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.step-number {
    font-size: 24px;
    margin-right: 10px;
    color: #0078ff; /* Farbakzent für die Schrittzahl */
}

.step p {
    margin: 0;
    color: #555; /* Dunkelgraue Schriftfarbe für bessere Lesbarkeit */
}

/* Button Styles */
.button {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #0078ff; /* Blau als Hintergrundfarbe */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    transition: background 0.3s;
}

.button:hover {
    background-color: #005bb5; /* Dunkleres Blau bei Hover */
}

/* Button Styles */
.button-container {
    margin-top: 20px; /* Abstand nach oben für die Button-Gruppe */
    display: flex; /* Flexbox aktivieren für eine horizontale Anordnung */
    justify-content: center; /* Buttons zentrieren */
    gap: 10px; /* Abstand zwischen den Buttons */
}

.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0078ff; /* Blau als Hintergrundfarbe */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    transition: background 0.3s;
}

.button:hover {
    background-color: #005bb5; /* Dunkleres Blau bei Hover */
}