diff --git a/styles.css b/styles.css index faed400..272ef55 100644 --- a/styles.css +++ b/styles.css @@ -3,125 +3,63 @@ margin: 0; padding: 0; } - body, html { width: 100%; - height: 100%; + overflow-x: hidden; font-family: Arial, sans-serif; line-height: 1.6; color: #333; background-color: #f4f4f4; } - -body { - display: flex; - flex-direction: column; - min-height: 100vh; -} - header { background-color: #8B0000; color: white; + text-align: center; padding: 1rem; width: 100%; } - -.header-content { - max-width: 1200px; - margin: 0 auto; - display: flex; - flex-direction: column; - align-items: center; +.logo svg { + max-width: 100px; + height: auto; } - -.logo-title { - display: flex; - align-items: center; - margin-bottom: 1rem; -} - -.logo-title svg { - width: 60px; - height: 60px; - margin-right: 1rem; -} - h1 { - font-size: 1.5em; - margin: 0; -} - -.header-nav { - width: 100%; -} - -.header-nav h2 { - font-size: 1.2em; - margin-bottom: 0.5rem; - text-align: center; -} - -.header-nav ul { - list-style-type: none; - padding: 0; - display: flex; - justify-content: center; - flex-wrap: wrap; -} - -.header-nav li { - margin: 0.5rem; + font-size: 1.8em; + margin: 0.5rem 0; } - -.header-nav a { - color: white; - text-decoration: none; - padding: 0.5rem 1rem; +ul { + background-color: #f2f2f2; + padding: 20px 20px 20px 40px; border-radius: 5px; - background-color: rgba(255, 255, 255, 0.1); - transition: background-color 0.3s; } - -.header-nav a:hover { - background-color: rgba(255, 255, 255, 0.2); -} - main { - flex: 1; - padding: 2rem; - max-width: 1200px; - margin: 0 auto; width: 100%; + max-width: 800px; + margin: 0 auto; + padding: 1rem; } - section { background-color: white; - margin-bottom: 2rem; - padding: 2rem; + margin-bottom: 1rem; + padding: 1rem; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } - h2 { color: #8B0000; border-bottom: 2px solid #8B0000; padding-bottom: 0.5rem; margin-bottom: 1rem; } - h3 { color: #8B0000; margin-bottom: 0.5rem; } - ul { padding-left: 1.5rem; } - li { margin-bottom: 0.5rem; } - footer { background-color: #333; color: white; @@ -129,28 +67,17 @@ footer { padding: 1rem; width: 100%; } - -@media (max-width: 800px) { - .logo-title { - flex-direction: column; - text-align: center; - } - - .logo-title svg { - margin-right: 0; - margin-bottom: 1rem; - } - +@media (max-width: 600px) { h1 { - font-size: 1.2em; + font-size: 1.5em; + } + h2 { + font-size: 1.3em; } - - .header-nav ul { - flex-direction: column; - align-items: center; + h3 { + font-size: 1.1em; } - - .header-nav li { - margin: 0.25rem 0; + .logo svg { + max-width: 80px; } }