/* base variables */

/* Edit the CSS properties in this file to create a custom
   Distill theme. Only edit values in the right column
   for each row; values shown are the CSS defaults.
   To return any property to the default,
   you may set its value to: unset
   All rows must end with a semi-colon.                      */

/* Optional: embed custom fonts here with `@import`          */
/* This must remain at the top of this file.                 */

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lusitana&family=Markazi+Text&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alata');

html {
  /*-- Main font sizes --*/
  --title-size:      40px;
  --title-weight:    400;
  --body-size:       1.06rem;
  --code-size:       14px;
  --aside-size:      12px;
  --fig-cap-size:    13px;
  /*-- Main font colors --*/
  --title-color:     rgb(61, 90, 128); 
  --title-weight:    400;
  --header-color:    rgb(61, 90, 128);  
  --body-color:      rgba(0, 0, 0, 0.8);
  --aside-color:     rgba(0, 0, 0, 0.6);
  --fig-cap-color:   rgba(0, 0, 0, 0.6);
  /*-- Specify custom fonts ~~~ must be imported above   --*/
  --heading-font:   "Alata", sans-serif; /* edited */
  --mono-font:       Roboto Mono;
  --body-font:       "Lato", sans-serif;
  --navbar-font:     "Alata", sans-serif;  /*edited */
}

/*-- ARTICLE METADATA --*/
d-byline {
  --heading-size:    0.9rem;
  --heading-color:   rgb(61, 90, 128); /* rgba(0, 0, 0, 0.2); */
  --body-size:       0.95rem;
  --body-color:      rgba(0, 0, 0, 0.8);
}

/*-- ARTICLE TABLE OF CONTENTS --*/
.d-contents {
  --heading-size:    18px;
  --contents-size:   13px;
}

/*-- ARTICLE APPENDIX --*/
d-appendix {
  --heading-size:    15px;
  --heading-color:   rgba(0, 0, 0, 0.65);
  --text-size:       0.9em;
  --text-color:      rgba(0, 0, 0, 0.5);
}

/*-- WEBSITE HEADER + FOOTER --*/
/* These properties only apply to Distill sites and blogs rgb(5, 106, 179) */

.distill-site-header {
  --title-size:       20px;
  --text-color:       rgba(255, 255, 255, 1);
  --text-size:        18px;
  --hover-color:      white;
  --bkgd-color:       rgb(61, 90, 128); 
}

.distill-site-footer {
  --width: 100%;
  --overflow: hidden;
  --box-sizing: border-box;
  --text-color:       rgba(255, 255, 255, 1);
  --text-size:        15px;
  --hover-color:      white;
  --bkgd-color:       rgb(61, 90, 128);
}

/*-- Additional custom styles --*/
ul > li::marker {
  color: #2062d4;
}

.distill-site-header { 
  letter-spacing: 2px;
  text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: 2px;
  font-weight: 300;
  color: rgb(61, 90, 128);
}

.distill-site-header .logo img{
  max-height: 40px; /* Makes logo bigger, default was 20px */
}

.distill-site-header {
  padding-top: 1rem;
}

d-title h1,
d-article h2,
.posts-list .description h2,
.posts-list > h1 {
    font-weight: 300;
}

d-appendix {
  background-color: #fdfcf7;
  border-top: none;
}

.btn--info {
    background-color: #d95105;
    color: #fff;
}

.btn, #goog-wm-sb {
    display: inline-block;
    margin-bottom: 0.25em;
    padding: 0.5em 1em;
    text-align: center;
    text-decoration: none;
    border-width: 0;
    border-radius: 4px;
    cursor: pointer;
}

d-article a:link, {
  border-bottom: 2px solid #2062d4;
  text-decoration: none;
}

d-article a:hover {
    color: #2062d4;
    background-color: white
    text-decoration: none;
    border: none;
}

/* Update overall layout (body width) */
@media(min-width: 1180px) {
    .base-grid,
    distill-header,
    d-title,
    d-abstract,
    d-article,
    d-appendix,
    distill-appendix,
    d-byline,
    d-footnote-list,
    d-citation-list,
    distill-footer {
    grid-template-columns: [screen-start] 0.5fr [page-start kicker-start] 30px [middle-start] 45px [text-start kicker-end] 100px 100px 100px 100px 100px 100px 100px 100px [text-end gutter-start] 30px [middle-end] 50px [page-end gutter-end] 0.5fr [screen-end];
      grid-column-gap: 15px;
    }

/* Remove the vertical line between left and right sides on homepage */

html body div.container-fluid.d-none.d-lg-block.d-xl-block div.d-flex.row.flex-row.vh-100 div.d-flex.flex-column.vh-100.border-left {
	display: none !important;
}

/* Buttons on home page */

#icons {
  color: #2062d4;
  background-color: white;
  font-size: 30px;
  margin-top: 0px;
}

.btn {
  border: 1px solid #fafafa;
  border-radius: 10px;
}
/* gets rid of blue text decoration on homepage buttons when window is narrow
but doesn't seem to affect links throughout the rest of the site.
This might be a problem if I ever want links on homepage matching style of rest of site, but this hacky fix will do for now*/
a {
  text-decoration: none!important;
}

/* Change navbar dropdown menu bg color */
.nav-dropdown-content a:hover {
    background-color: #044391;
    color: white;
}