html { overflow-y: scroll; } body { font-family: 'Roboto', sans-serif; margin: 0; } .container { width: 60%; margin: 0 auto; } a { color: #3498db; } a:hover { text-decoration: underline; /*opacity: 0.8;*/ transition: color 0.2s; color: #2980b9; } /* sticky footer */ html, body { height: 100%; } body { display: flex; flex-direction: column; } .up-footer { flex: 1 0 auto; } .sticky-footer { flex-shrink: 0; } /* Porposed alert */ .proposed-alert { position: fixed; z-index: 9999999; left: 1em; bottom: 2em; padding: 1em; font-weight: bold; border-radius: 3px; text-transform: uppercase; border: 1px solid #c0392b; background-color: #e74c3c; color: white; } .btn { padding: .5em 1em; color: white; border-radius: 7px; background: #2c3e50; border: 0; cursor: pointer; } .btn:focus { outline: 0; opacity: 0.8; } @media (max-width: 1600px) { .container { width: 70%; } } @media (max-width: 1500px) { .container { width: 80%; } } @media (max-width: 900px) { .container { width: 92%; } }