html { width: 100%; height: 100%; overflow: hidden; font: 400 1.2em/1.4em var(--base-type); } html body { background: var(--primary); margin: 0; padding: 0; height: 100%; width: 100%; overflow-y: scroll; overflow-x: hidden; } /* GLOBALS */ a { color: var(--primary); text-decoration: none; border-bottom: 0; transition: all 0.2s linear; } sup { background: var(--black); color: var(--white); padding: 3px; border-radius: 3px; } ::selection { background: var(--secondary-highlight); color: var(--white); } #notifications { display: none; visibility: hidden; } pre, code { background: var(--black); color: var(--secondary-highlight); border-radius: 3px; padding: 3px; } svg[role="icon"] { transition: all 0.3s linear; fill: var(--secondary); width: 25px; height: 25px; padding-top: 5px; } /* HEADER Navigation Notificiations */ header { width: 100%; max-width: 900px; margin: 10px auto; height: 50px; border-radius: 5px; left: 50%; transform: translate(-50%, 0); position: fixed; z-index: 500; } header > nav > a img { width: 40px; padding: 5px; } header > nav > h1 { text-align: left; height: 100%; } header > nav > h1 { color: var(--primary); margin: 15px; } header > nav > div.nav-right { padding: 5px; } header > nav > div > div.mobile-menu { display: none; position: fixed; z-index: 1000; left: 0; transition: all 0.2s linear; background: var(--white); } header > nav > div.nav-right button { width: 40px; height: 40px; margin-left: 5px; font-size: 0.8em; color: var(--white); } header > nav > div.nav-right > button.menu-toggle { display: none; } header > nav > div.nav-right div.submenu { display: inline; } header > nav > div.nav-right div.submenu button { background: var(--primary); color: var(--white); font-size: 0.8em; } button[data-render="true"] { background: var(--primary); } button[data-render="true"] svg { fill: var(--primary-highlight); } button[data-render="false"] svg { fill: var(--secondary); } /* RESPONSIVE */ @media only screen and (max-width: 900px) { header { width: 97%; } } @media only screen and (max-width: 530px) { header > nav > div.nav-right > button.menu-toggle { display: inline; } header > nav > div > div.menu { display: none; } }