diff --git a/index.html b/index.html index 414618e..1dd32a9 100644 --- a/index.html +++ b/index.html @@ -60,6 +60,10 @@ justify-content: center; position: relative; } + a, + a:visited { + color: #000000; + } .overlay { position: fixed; top: 0; @@ -74,6 +78,8 @@ border-radius: 30px; padding: 3em 3em 2em 3em; margin: 1em; + width: min(100%, 900px); + max-width: 900px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); color: #000000; position: relative; @@ -121,18 +127,21 @@ color: #000000; border: none; padding: 1em 1.75em; - border-radius: 15px; + border-radius: 999px; cursor: pointer; font-weight: bold; margin-top: 0.5em; font-size: 17px; text-align: left; text-decoration: none; + box-sizing: border-box; + flex: 1 1 240px; + max-width: 260px; } .btn-text { display: flex; flex-direction: column; - line-height: 0.7; + line-height: 1.1; } .btn-text small { font-size: 12px; @@ -142,17 +151,36 @@ height: 30px; filter: brightness(0); } + .btn-discord { + background-color: #7289da; + color: #ffffff; + } .btn-group { display: flex; gap: 1em; - flex-wrap: nowrap; + flex-wrap: wrap; justify-content: center; + width: 100%; } .btn-groups { display: flex; flex-direction: column; gap: 1em; } + .section-title { + margin: 0.5em 0 0; + padding-top: 0.75em; + font-size: 1rem; + text-transform: uppercase; + letter-spacing: 0.08em; + color: #2C2D3C; + text-align: center; + } + .section { + display: flex; + flex-direction: column; + gap: 0.75em; + } .btn-small { display: inline-block; margin-top: 0.5em; @@ -172,7 +200,6 @@ border-top: 1px solid #ccc; } .site-footer a { - color: #757684; text-decoration: none; } .site-footer a:hover { @@ -205,13 +232,22 @@ } .btn-group { flex-direction: column; - align-items: center; + align-items: stretch; + } + .section-title { + text-align: center; } .btn { width: 100%; justify-content: center; padding: 0.8em 1em; font-size: 16px; + text-align: center; + max-width: 100%; + flex: none; + } + .btn-text { + align-items: center; } } @@ -251,44 +287,96 @@