@import 'assets/font-awesome/fontawesome.min.css'; @import 'assets/font-awesome/brands.min.css'; @import 'assets/font-awesome/regular.min.css'; @import 'assets/font-awesome/solid.min.css'; * { padding: 0; margin: 0; } html, body { height: 90%; } body { background-color: #2f3542; font-family: ABeeZee; font-size: 1.2rem; color: #ffffff; } div.container { flex-grow: 1; } header { display: flex; margin: 16px 0; align-items: center; } header p { flex-grow: 1; padding: 0 16px; } header p.tools { font-size: 2rem; text-align: right; } header p.tools a { color: #ffffff; transition: all 200ms; margin: 0 8px; } header p.tools a:hover { border: 0; color: #ff6b81; transition: all 200ms; } span.slogan { color: #a4b0be; } nav { display: flex; } nav a { color: #ffffff; background-color: #ff96a6; flex-grow: 1; text-align: center; text-decoration: none; padding: 16px; transition: all 200ms; } nav a:hover { background-color: #ff6b81; transition: all 200ms; border: 0; } footer { text-align: center; position: fixed; bottom: 0px; left: 0px; right: 0px; margin-bottom: 0px; padding: 16px; } main { display: flex; align-items: center; justify-content: center; max-width: 800px; margin: 16px auto; height: 400px; } p.future { color: #ff6b81; font-size: 2rem; font-weight: bold; text-align: center; } a { color: #ff4757; text-decoration: none; } a:hover { border-bottom: 1px dashed #ff4757; }