From 5781518501ab6a25a96773fee158ac746e7f7148 Mon Sep 17 00:00:00 2001 From: Evan <38150833+beigebeats@users.noreply.github.com> Date: Mon, 20 Nov 2023 19:52:43 -0800 Subject: Initial Commit --- styles.css | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 styles.css (limited to 'styles.css') diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..0fa1300 --- /dev/null +++ b/styles.css @@ -0,0 +1,75 @@ +/* Simple Reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Basic Styling */ +body { + font-family: 'Helvetica', sans-serif; + background-color: #fff; + color: #000; + line-height: 1.4; +} + +.container { + max-width: 400px; + margin: 50px auto; + padding: 20px; + text-align: center; +} + +header h1 { + font-size: 2em; + margin-bottom: 0.5em; +} + +header p { + font-size: 1.2em; + color: #000; + margin-bottom: 2em; +} + +/* Responsive Design */ +@media (max-width: 400px) { + .container { + width: 100%; + margin: 20px auto; + padding: 10px; + } +} + +.button { + display: inline-block; + padding: 10px 30px; + font-size: 18px; + cursor: pointer; + background-color: #000; /* Dark grey for OLED efficiency */ + color: #fff; + border: none; + border-radius: 50px; /* High border-radius for pill shape */ + transition: background-color 0.3s; +} + +.button:hover { + background-color: #333333; /* Slightly lighter grey for hover state */ +} + +.menu-option { + margin-bottom: 20px; +} + +.menu-option a { + text-decoration: none; + color: #fff; + display: flex; + align-items: center; + justify-content: center; +} + +.menu-option svg.logo { + width: 50px; + height: 50px; + margin-right: 40px; +} -- cgit v1.2.3