:root { --gray0: #282a36; /*background, font-colour*/ --gray1: #282a36; /*current menu*/ --gray2: #44475a; /*header, footer, menu*/ --gray3: #6272a4; /*hover, links*/ --background: #f8f8f2 /*container background, font-colour on dark*/
; }

* { box-sizing: border-box; color: var(--gray0); }

a { color: var(--gray3); }

div { background-color: var(--background); }

.row::after { content: ""; clear: both; display: table; }

[class*="col-"] { float: left; padding: 15px; }

html { font-family: "Lucida Sans", sans-serif; background-color: var(--gray0); }

.header { background-color: var(--gray2); padding: 15px; }

.header * { color: var(--background); }

.menu ul { list-style-type: none; margin: 0; padding: 0; }

.menu ul a { text-decoration: none; }

.menu a li { padding: 8px; margin-bottom: 7px; background-color: var(--gray2); color: var(--background); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }

.menu a li:hover { background-color: var(--gray3); }

.menu a li.current { background-color: var(--gray1); }

.aside { background-color: #33b5e5; padding: 15px; color: var(--background); text-align: center; font-size: 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }

.footer { background-color: var(--gray2); color: #ffffff; text-align: center; font-size: 12px; padding: 15px; }

.footer * { color: var(--background); }

/* For mobile phones: */
[class*="col-"] { width: 100%; }

@media only screen and (min-width: 600px) { /* For tablets: */ .col-s-1 { width: 8.33%; } .col-s-2 { width: 16.66%; } .col-s-3 { width: 25%; } .col-s-4 { width: 33.33%; } .col-s-5 { width: 41.66%; } .col-s-6 { width: 50%; } .col-s-7 { width: 58.33%; } .col-s-8 { width: 66.66%; } .col-s-9 { width: 75%; } .col-s-10 { width: 83.33%; } .col-s-11 { width: 91.66%; } .col-s-12 { width: 100%; } }

@media only screen and (min-width: 768px) { /* For desktop: */ .col-1 { width: 8.33%; } .col-2 { width: 16.66%; } .col-3 { width: 25%; } .col-4 { width: 33.33%; } .col-5 { width: 41.66%; } .col-6 { width: 50%; } .col-7 { width: 58.33%; } .col-8 { width: 66.66%; } .col-9 { width: 75%; } .col-10 { width: 83.33%; } .col-11 { width: 91.66%; } .col-12 { width: 100%; } .main-container { width: 768px; margin-left: auto; margin-right: auto; clear: both; } }

/*# sourceMappingURL=styles.css.map */