@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300&display=swap'); $sidebar_width: 15%; $sidebar_background: rgba(45, 45, 45, 1); $body_background: rgba(30, 30, 30, 1); $content_background: rgb(35, 35, 35); body { margin: 0; font-family: 'Fira Code', monospace; // Sidebar nav { height: 100%; position: fixed; width: $sidebar_width; background: $sidebar_background; padding-top: 32px; padding-bottom: 16px; border-right-style: solid; border-width: 2px; border-color: black; color: white; div { padding: 0 16px 0 16px; } // Refrence to the tab interface .tabs { a { text-decoration: none; color: grey; &:hover { color: white; background-color: rgba(40, 40, 40, 0.5); } } } } main { height: 100%; box-sizing: border-box; margin-left: $sidebar_width; background: $body_background; padding-top: 32px; color: white; article { margin: auto; border: 1px solid white; padding: 13px; max-width: 1500px; background: $content_background; } } } @media screen and (max-width: 1000px) { @import "mobile.scss"; }