diff --git a/assets/styles.css b/assets/styles.css index dc132fe..928e050 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -1,114 +1,113 @@ - body { - font-family: Arial, sans-serif; - margin: 0; - text-align: center; - background-color: #fff; + font-family: Arial, sans-serif; + margin: 0; + text-align: center; + background-color: #fff; } header { - background: #ccc; - padding: 10px; - text-align: left; + background: #ccc; + padding: 1rem; + text-align: left; } .logo { - height: 60px; + height: 4rem; /* Relative Höhe */ } main { - padding: 50px 20px; + padding: 5rem 2rem; /* Relative Werte für Padding */ } h1 { - font-size: 48px; - margin: 0; + font-size: 3rem; /* Relative Schriftgröße */ + margin: 0; } h2 { - font-size: 24px; - color: #666; - margin-bottom: 30px; + font-size: 1.5rem; + color: #666; + margin-bottom: 2rem; } .buttons { - display: flex; - justify-content: center; - gap: 15px; + display: flex; + justify-content: center; + gap: 1rem; } .btn { - padding: 10px 25px; - font-size: 16px; - color: white; - border: none; - border-radius: 5px; - cursor: pointer; + padding: 0.6rem 2rem; /* Relative Werte für Padding */ + font-size: 1rem; /* Relative Schriftgröße */ + color: white; + border: none; + border-radius: 0.5rem; + cursor: pointer; } -.btn.green { - background-color: #28a745; -} + .btn.green { + background-color: #28a745; + } -.btn.red { - background-color: #dc3545; -} + .btn.red { + background-color: #dc3545; + } .overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.6); - display: none; - align-items: center; - justify-content: center; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.6); + display: none; + align-items: center; + justify-content: center; } .form-box { - background: white; - padding: 30px; - border-radius: 10px; - width: 90%; - max-width: 400px; - position: relative; - text-align: left; + background: white; + padding: 2rem; + border-radius: 1rem; + width: 90%; + max-width: 25rem; /* Maximale Breite relativ */ + position: relative; + text-align: left; } -.form-box h3 { - text-align: center; -} + .form-box h3 { + text-align: center; + } -.form-box p { - font-size: 12px; - text-align: center; -} + .form-box p { + font-size: 0.75rem; /* Relativer Wert */ + text-align: center; + } -.form-box form { - display: flex; - flex-direction: column; - gap: 10px; - margin-top: 15px; -} + .form-box form { + display: flex; + flex-direction: column; + gap: 1rem; /* Relative Gap */ + margin-top: 1.5rem; + } -.form-box input { - padding: 10px; - font-size: 14px; -} + .form-box input { + padding: 1rem; + font-size: 0.875rem; /* Relativer Wert */ + } -.form-box button { - background: black; - color: white; - padding: 10px; - font-size: 16px; - border: none; - margin-top: 10px; - cursor: pointer; -} + .form-box button { + background: black; + color: white; + padding: 1rem; + font-size: 1rem; + border: none; + margin-top: 1rem; + cursor: pointer; + } .form-logo { - display: block; - margin: 20px auto 0; - height: 40px; + display: block; + margin: 2rem auto 0; + height: 2.5rem; /* Relative Höhe */ }