theme.css

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,700;1,300&display=swap');


:root {
  --font-body:   'Roboto Condensed', sans-serif;
  --font-header: 'Roboto Condensed', sans-serif;
  --font-mono:   'Roboto Condensed', sans-serif;

  --color-background:   #494952;
  --color-white:        #fcfcfc;
  --color-text:         #000000;
  --color-hover-over:   #5b5b66;
  --color-buttom:       #57c953;
}

/* 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.                 */



html{
  /*-- Main font sizes --*/
  --title-size:      50px;
  --body-size:       1.06rem;
  --code-size:       14px;
  --aside-size:      12px;
  --fig-cap-size:    13px;
  /*-- Main font colors --*/
  --title-color:     #000000;
  --header-color:    rgba(0, 0, 0, 1);
  --body-color:      rgba(0, 0, 0, 1);
  --aside-color:     rgba(0, 0, 0, 1);
  --fig-cap-color:   rgba(0, 0, 0, 1);
  /*-- Specify custom fonts ~~~ must be imported above   --*/
  --heading-font:    var(--font-header);
  --mono-font:       var(--font-mono);
  --body-font:       var(--font-body);
  --navbar-font:     var(--font-body);  /* websites + blogs only */
}

/*-- ARTICLE METADATA --*/
d-byline {
  --heading-size:    0.6rem;
  --heading-color:   rgba(0, 0, 0, 0.5);
  --body-size:       0.8rem;
  --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.8em;
  --text-color:      rgba(0, 0, 0, 0.5);
}

/*-- WEBSITE HEADER + FOOTER --*/
/* These properties only apply to Distill sites and blogs  */

.distill-site-header {
  --title-size:       18px;
  --text-color:       var(--color-white);
  --text-size:        17px;
  --hover-color:      var(--color-white);
  --bkgd-color:       var(--color-background);
  --navbar-font:      var(--font-body);
}

.distill-site-footer {
  --text-color:       rgba(255, 255, 255, 0.8);
  --text-size:        15px;
  --hover-color:      white;
  --bkgd-color:       #010445;
}

/*-- Additional custom styles --*/
/* Add any additional CSS rules below                      */

d-title h1, h2, h3 {
  text-align: left;
  font-family: var(--font-body);
  grid-column: text;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1em;
  margin: 0 0 0.5rem;
}

/* Modifies color of dropdown menu in navbar*/
.nav-dropdown-content {
  color: var(--color-text);
  background-color: var(--color-white);
  font-family: var(--font-body);
}

/* modifies aesthetics of Research buttom */
.nav-dropdown .nav-dropbtn:hover {
  background-color: var(--color-hover-over);
  font-weight: 700;
}

/* Aesthetics for link images in nav bar*/
.distill-site-header .nav-image:hover {
  background-color: var(--color-hover-over);
}

.distill-site-header a:hover {
  background-color: var(--color-hover-over);
  font-weight: 700;
} 

.distill-site-header .title:hover {
  background-color: var(--color-background);
  font-weight: 700;
}

.distill-site-header .logo:hover {
  background-color: var(--color-background);
}


/* Aesthetics for link buttoms */
.icon-link {
    background-color: var(--color-buttom);
    color: var(--color-text);
    padding: 3px 7px 3px 7px;
    margin: 0 2px 0 2px;
    border-radius: 6px; /* Rounded edges */
}

.icon-link:hover {
    background-color: var(--color-buttom);
    font-weight: 700;
}

.btn {
    display: inline-block;
    font-weight: 700;
    color: var(--color-white);
    text-align: center;
    vertical-align: middle;
    background-color: transparent;
    border: transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn-outline-dark {
    color: var(--color-hover-over);
    border-color: transparent;
}