-body {
- background-color: #dadada;;
- header#masthead {
- background-color: #656565;
+// HTML5UP
+@import 'libs/vars';
+@import 'libs/functions';
+@import 'libs/mixins';
+@import 'libs/my-mixins';
+@import 'libs/vendor';
+@import 'libs/breakpoints';
+@import 'libs/html-grid';
+// GOOGLE FONTS
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;0,600;1,400;1,600&family=Red+Hat+Mono&display=swap');
+
+// Breakpoints.
+
+ @include breakpoints((
+ xlarge: (1281px, 1680px ),
+ large: (981px, 1280px ),
+ medium: (737px, 980px ),
+ small: (481px, 736px ),
+ xsmall: (361px, 480px ),
+ xxsmall: (null, 360px )
+ ));
+
+// Mixins.
+
+ @mixin inner {
+ > .inner {
+ @include padding(4em, 0);
+ margin: 0 auto;
+ max-width: _size(inner);
+ width: calc(100% - 6em);
+
+ @include breakpoint('<=small') {
+ @include padding(3em, 0);
+ width: calc(100% - 3em);
+ }
+ }
}
- footer#colophon {
- background-color: #656565;
+
+// Base.
+
+ @import 'base/reset';
+ @import 'base/page';
+ @import 'base/typography';
+
+// Component.
+
+ @import 'components/row';
+ @import 'components/section';
+ @import 'components/form';
+ @import 'components/box';
+ @import 'components/icon';
+ @import 'components/image';
+ @import 'components/list';
+ @import 'components/actions';
+ @import 'components/icons';
+ @import 'components/pagination';
+ @import 'components/breadcrumbs';
+ @import 'components/table';
+ @import 'components/button';
+ @import 'components/tiles';
+ @import 'components/contact-method';
+ @import 'components/spotlights';
+ @import 'components/search';
+
+// Layout.
+
+ @import 'layout/header';
+ @import 'layout/banner';
+ @import 'layout/main';
+ @import 'layout/contact';
+ @import 'layout/footer';
+ @import 'layout/wrapper';
+ @import 'layout/menu';
+
+// darken images in dark mode
+@media screen and (prefers-color-scheme: dark) {
+ $image-filter: grayscale(50%);
+
+ img:not([src*='.svg']) {
+ filter: $image-filter;
}
-}
\ No newline at end of file
+}
