// bootstrap @import url(maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css); // google fonts @import url('fonts.googleapis.com/css2?family=Raleway:wght@400;600&display=swap'); @import url('fonts.googleapis.com/css2?family=Roboto&display=swap'); // social media buttons @import url('cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

$xs-breakpoint: 480px; $sm-breakpoint: 768px;

/***** FONTS *****/ $font-size-base: 1.6rem; $font-size-jumbo: 4.2rem; $icon-size: 4.2rem; $icon-width: 4.2rem;

$font-family: 'Raleway', sans-serif; $font-family-secondary: 'Roboto', sans-serif;

/***** COLORS *****/ $background-color: ffffff; $background-color-dark: #0e171c; $text-color: #000000; $text-color-dark: ffffff; $text-accent-color: {{ site.accent_color | default: “#0070c0” }}; $text-accent-color-dark: {{ site.accent_color_dark | default: “#039cfd” }};

/***** MARKDOWN INJECTABLE CLASSES *****/ .accent-color { // usage: {: .accent-color}

color: $text-accent-color;

a {
  color:inherit
}

}

.jumbo-font { // usage: {: .jumbo-font}

font-size: $font-size-jumbo;

}

.secondary-font { // usage: {: .secondary-font}

font-family: $font-family-secondary;

}

/***** MARKDOWN STYLE OVERRIDES *****/ h1, h2, h3, h4, h5, h6 {

margin-top: 0.2em;
margin-bottom: 0.2em;
line-height: 1.2em;

}

p {

font-size: $font-size-base;
margin-top: 0.2em;
margin-bottom: 0.2em;

}

ul, ol {

margin-top: 0.2em;
margin-bottom: 0.2em;
padding: 0;

}

li {

font-size: $font-size-base;
margin-bottom: 0.2em;

}

a:hover {

text-decoration: none;
opacity: 0.85;

}

img {

margin-top: 0.4em;
margin-bottom: 0.4em;
width: 32rem;
max-width: 100%;
max-height: 100%;

}

table {

table-layout: fixed;
width: 100%;

}

td, th {

font-size: $font-size-base;
margin-top: 0.2em;
margin-bottom: 0.2em;
padding: 0.4em 0;

}

/***** PAGE STYLING *****/ html {

height: 100%;
scroll-behavior: smooth;

}

body {

display: flex;
flex-direction: column;
max-width: 100rem;
min-height: 100%;
margin: auto;
padding: 7rem 10rem; // top-bottom left-right

background-color: $background-color;
color: $text-color;
font-family: $font-family;
font-size: $font-size-base;

}

nav {

text-align: right;

.nav-item {
  color: inherit;
  font-weight: bold;
  margin: 0.4rem;
}

.nav-item:hover {
  color: $text-accent-color;
  text-decoration: none;
}

}

main {

flex-grow: 1;

.intro {
  padding: 10em 1rem;
}

.section {
  padding-bottom: 4rem;

  .section-title {
    padding: 1rem;
  }

  .section-content {
    padding: 1rem;
    padding-bottom: 2rem;
  }
}

}

footer {

align-self: end;
width: 100%;
text-align: right;

}

.fa {

color: inherit;
margin: 0.6em;
margin-left: 0;
font-size: $icon-size;
width: $icon-width;
text-align: center;
text-decoration: none;

}

.fa:hover {

color: $text-accent-color;
text-decoration: none;

}

/***** DARK MODE *****/ .dark-mode {

background-color: $background-color-dark;
color: $text-color-dark;

.accent-color {
  color: $text-accent-color-dark;
}

.fa:hover {
  color: $text-accent-color-dark;
}

.nav-item:hover {
  color: $text-accent-color-dark;
}

}

/***** PAGE STYLING (MOBILE) *****/ @media only screen and (max-width : $xs-breakpoint) {

body {
  padding: 7rem 2rem;
}

.nav-bar {
  .nav-item {
    display: block;
    margin: 1em 0em;
  }
}

}