@import 'bootstrap-legend.css';

/* overwritable styles*/
:root {
  --big-spacing: 2.5rem;
  --main-font: "Arial", system-ui;
  --code-font: "Consolas", monospace;
  --title-font: var(--main-font);
  --text-color: #212529;
  --text-color-soft: rgba(0, 0, 0, 0.8);
  --back-color: #fff;
  --back-color-2: #f4f4f3;
  --back-color-3: #eee;
  --pre-back: #f9efef;
  --back-color-soft: rgba(255, 255, 255, 0.8);
  --link-color: #24b;
  --link-active-color: blue;
  --link-active-color-2: #0085a1;
  --link-active-color-3:#777777;
}

/* dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #eee0d7;
        --text-color-soft: rgba(255, 230, 220, 0.8);
        --back-color: #222;
        --back-color-2: #111;
        --back-color-3: #020202;
        --pre-back: black;
        --back-color-soft: rgba(0,0,0, 0.8);
        --link-color: #a3abf3;
        --link-active-color: #7789ef;
        --link-active-color-2: #9888f7;
        --link-active-color-3:#aaa9aa;
      }      
}

body {
  font-size: 17px;
  font-family: var(--main-font);
  color: var(--text-color);
  background-color: var(--back-color);
}


@media only screen and (min-width:1200px) {
  body {
    font-size: 19px;
  }
}

@media only screen and (min-width:2000px) {
  body {
    font-size: 23px;
  }
}

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

a:hover, a:focus {
  text-decoration: underline;
  color: var(--link-active-color);
}

p a {
  text-decoration: underline;
}

code, kbd {
  font-family: var(--code-font);
}

main {
  padding-top: var(--big-spacing);
}

pre {
  margin: var(--big-spacing) 0;
  background-color: var(--pre-back);
}

main img, main video, main audio {
  max-height: 80vh;
  max-width: 100%;
}

main video, main audio {
  min-width: 35%;
}

p {
  margin: var(--big-spacing) 0;
  line-height: 1.5;
}


h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  font-family: var(--title-font);
}

blockquote {
  margin-left: 1.5rem;
  border-bottom-style: dashed;
  border-top-style: dashed;
  font-style: italic;
}

footer {
  border-top: solid;
  padding: 3rem 0 4rem;
  background-color: var(--back-color-3);
}

.home-link:hover::after {
  content: "🏡";
}

.masthead > picture {
  position: relative;
  top: 0;
  z-index: 2;
}

.masthead>.container {
  top: 1rem;
  z-index: 3;
  color: var(--text-color);
}

@media only screen and (min-width:576px) {
  .masthead>.container {
    top: min(30%, 20vw);
  }
}

.masthead {
  min-height: 60vh;
}

.w100 {
  width: 100%;
  height: auto;
  max-height: 100vh;
  object-fit: cover;
}

.meta {
  margin: 1rem;
}

/* #searchBlock {} */

#searchInput {
  margin-top: 0.4rem;
  text-align: center;
}

#searchLabel, #searchInput {
  width: 50%;
}

#searchResults {
  background-color: var(--back-color-3);
  margin-top: 1rem;
}

/* #searchResults a {
  
} */

#searchResults a:hover, #searchResults a:focus {
  background-color: var(--back-color-3);
}

#top-nav {
  z-index: 4;
  top: 0;
  left: 0;
  right: 0;
  font-size: 1.4em;
}

@media only screen and (min-width:576px) {
  #top-nav {
    position: absolute;
  }
}

#top-nav ul {
  list-style-type: none;
}

.nav-link, #searchLabel {
    color: var(--text-color);
    background-color: var(--back-color-soft);
}

.nav-link {
  display: inline-block;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  border: solid;
  border-radius: 5px;
  padding-top: 0;
  padding-right: 1rem;
  padding-bottom: 0;
  padding-left: 1rem;
  width: 100%;
  text-decoration: none;
  text-align: center;
}

.nav-link:hover, .nav-link:focus, button:hover, button:focus {
  color: var(--link-active-color-3);
}

/* samll todo switch to mobile first */
@media only screen and (max-width:992px) {
  #top-nav {
    width: 100%;
    font-size: 1.25em;
  }

  #searchInput {
    margin-top: 0.6rem;
  }
  #searchResults {
    position: relative;
    left: -25px;
    padding-left: 3px;
    list-style-type: none;
  }
}

.post-article-nav {
  border-top: dotted;
  padding-top: var(--big-spacing);
  background-color: var(--back-color-2);
}

header.masthead .page-heading, header.masthead .site-heading {
  text-align: center;
  background-color: var(--back-color-soft);
}

header.masthead .page-heading h1, header.masthead .site-heading h1 {
  margin-top: 0;
  font-size: 3.6em;
}

header.masthead .page-heading .subheading, header.masthead .site-heading .subheading {
  display: block;
  margin: 10px 0 0;
  font-size: 1.5em;
  font-weight: 300;
  line-height: 1.1;
}

.post-preview>a {
  color: var(--text-color);
}

.post-preview>a:focus, .post-preview>a:hover {
  text-decoration: none;
  color: var(--link-active-color-2)
}


.post-meta {
  margin-top: 0;
  font-style: italic;
  color: var(--text-color);
}

.post-meta>a {
  text-decoration: none;
  color: var(--text-color);
}

.post-meta>a:focus, .post-meta>a:hover {
  text-decoration: underline;
  color: var(--link-active-color-2);
}

@media only screen and (min-width:768px) {
  .post-preview>.post-title {
    font-size: 1.5em;
  }
}

footer .list-inline {
  margin: 0;
  padding: 0;
}

link {
  display: none;
}