darkmode colors.css

/* light mode */
html, html[theme="light-mode"] {
    position: relative; 
    min-height: 100%;
    --background-color: #fffefe;
    --text-color: #000;
    --bg-code: #f2efeb;
    --link-color: #354f52;
    --link-hover: #84a98c;
    --link-visited: #2f3e46;
}

/* dark mode */
html[theme="dark-mode"] {
    position: relative;
    min-height: 100%;
    --background-color: #292929;
    --text-color: #fffefe;
    --img-opacity: .75;
    --img-transition: opacity .5s ease-in-out;
    --bg-code: #454545;
    --link-color: #84a98c;
    --link-hover: #354f52;
    --link-visited: #52796f;
}
/* all */

/* dark mode toggle */
@media (prefers-color-scheme: dark) {
  html[theme="dark-mode"] {
    position: relative;
    min-height: 100%;
    background-color: var(--background-color);
    color: var(--text-color);
  } 
  html[theme="light-mode"] {
    position: relative;
    min-height: 100%;
    background-color:var(--background-color);
    color: var(--background-color);
  }
}    

/* all */
body {
  font-family: "Lora", serif;
  margin-bottom: 100px; /* prevents content from being blocked by footer */
  font-size: 18px;
  background-color: var(--background-color);
  color: var(--text-color);
}

/* Spacing */
.tab1 {
    margin-left: 40px;
  }
  
.tab2 {
    margin-left: 60px;
  }
  
.tab4 {
    margin-left: 80px;
  }

/* images */
img-fluid {
    max-width: 100%;
}

html img {
  opacity: var(--img-opacity);
  transition: var(--img-transition);
}

html img:hover {
  opacity: 1;
}


/* lists */
ul {
    list-style: none;
    color: var(--text-color)
}

/* links */
a {
    color: var(--link-color);
}

a:hover {
    color: var(--link-hover);
    text-decoration: none;
}

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

/* navigation bar */
.uci-logo {
    margin-right: 15px;
    height: 40px;
    width: 80px;
}

.nav-item {
    margin-top: 6px;
}

.switch {
    top: 30px;
}

/* masthead */
.jumbotron {
    background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url("/assets/resources/Sequoias.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    min-height: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  @media (max-width: 400px) {   /* adds margin to jumbotron small screens */
    .jumbotron > .container {
        margin-top:100px;
        word-break: break-all;
    }
}

.minborder {    /* white box in header */
    min-height: 190px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
    min-width: 50%;
    }
  
  .border {
    border-width: thick !important;
  }
  
/* tag forest */
.taxonomy-index {
    display: grid;
    grid-column-gap: 2em;
    grid-template-columns: repeat(2, 1fr);
    margin: 0;
    padding: 0;
    font-size: 0.9em;
    list-style: none;
  }
  
.taxonomy-index a {
    display: flex;
    padding: .25em 0;
    -webkit-box-pack: justify;
    justify-content: space-between;
    border-bottom: 1px solid #e7e7e7;
  }
  
  .taxonomy-list {
    list-style: none;
  }
  
  .entry-time {
    font-size: 14px;
  }
  
  /* Groups */
  .blockquote {
    font-size: 25px;
  }

  /* Footer */
.footer-styles {
    padding: 10px;
    position: absolute !important;
    left: 0;
    bottom: 0 !important;
    width: 100%;
    text-align: center;
  }

/* CV */
.h-line {
    background-color: #e7e7e7;
  }
  
  .m-d.expand-list{
    margin: 0;
    padding: 0;
  }
  .m-d.expand-list > li{
    list-style-type: none;
    padding: 15px 0;
    border-bottom: 1px solid #e7e7e7;
    position: relative;
  /*         max-width: 80%; */
    color: var(--text-color)
  }
  .tab_lab {
    color:#008000;
    padding: 10px;
  }
  
  .m-d label[class^="tab"]:hover{
    cursor: pointer;
  }
  .m-d input{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  .m-d input[class^="tab"]{
    width: 100%;
    height: 40px;
    position: absolute;
    left: 0;
    top: 0;
    color: var(--constant); 
  }
  .m-d input[class^="tab"]:hover{
  cursor: pointer;
  }
  .m-d label[class^="tab"]{
    font-weight: bold;
  }
  .m-d .content{
    height: auto;
    max-height: 0;
    max-width: 100%;
  /*        background: yellow;*/
    overflow: hidden;
    transform: translateY(20px);
    transition: all 180ms ease-in-out 0ms; 
  }
  .m-d li[data-md-content="100"] input[class^="tab"]:checked ~ .content{
    max-height: 100px;
    transition: all 150ms ease-in-out 0ms;
  }
  .m-d li[data-md-content="200"] input[class^="tab"]:checked ~ .content{
    max-height: 200px;
    transition: all 200ms ease-in-out 0ms;
  }
  .m-d li[data-md-content="300"] input[class^="tab"]:checked ~ .content{
    max-height: 300px;
    transition: all 250ms ease-in-out 0ms;
  }
  .m-d li[data-md-content="400"] input[class^="tab"]:checked ~ .content{
    max-height: 400px;
    transition: all 250ms ease-in-out 0ms;
  }
  .m-d li[data-md-content="500"] input[class^="tab"]:checked ~ .content{
    max-height: 500px;
    transition: all 250ms ease-in-out 0ms;
  }
  .m-d li[data-md-content="600"] input[class^="tab"]:checked ~ .content{
    max-height: 600px;
    transition: all 250ms ease-in-out 0ms;
  }
  .m-d li[data-md-content="700"] input[class^="tab"]:checked ~ .content{
    max-height: 700px;
    transition: all 300ms ease-in-out 0ms;
  }
  .m-d li[data-md-content="800"] input[class^="tab"]:checked ~ .content{
    max-height: 800px;
    transition: all 300ms ease-in-out 0ms;
  }
  .m-d li[data-md-content="900"] input[class^="tab"]:checked ~ .content{
    max-height: 900px;
    transition: all 300ms ease-in-out 0ms;
  }
  .m-d li[data-md-content="1000"] input[class^="tab"]:checked ~ .content{
    max-height: 1000px;
    transition: all 350ms ease-in-out 0ms;
  }
  .m-d li[data-md-content=""] input[class^="tab"]:checked ~ .content{
    max-height: 1000px;
    transition: all 250ms ease-in-out 0ms;
  }
  .m-d input[class^="tab"]:checked ~ .content{
    margin-bottom: 20px;
  }
  
  .m-d .open-close-icon{
    display: inline-block;
    position: absolute;
    right: 20px;
    transform: translatey(2px);
  }
  .m-d .open-close-icon i{
    position: absolute;
    left: 0;
  }
  .m-d .open-close-icon .fa-minus{
    transform:rotate(-90deg);
    transition: transform 150ms ease-in-out 0ms;
  }
  .m-d input[class^="tab"]:checked ~ .open-close-icon .fa-minus{
    transform: rotate(0deg);
    transition: transform 150ms ease-in-out 0ms;
  }
  .m-d .open-close-icon .fa-plus{
    opacity: 1;
    transform:rotate(-90deg);
    transition: opacity 50ms linear 0ms, transform 150ms ease-in-out 0ms;
  }
  .m-d input[class^="tab"]:checked ~ .open-close-icon .fa-plus{
    opacity: 0;
    transform: rotate(0deg);
    transition: opacity 50ms linear 0ms, transform 150ms ease-in-out 0ms; 
  }