:root {
  --primary-color: #E20066;
  --white-color: #ffffff;
  --base-font-family: "Plain","Noto Sans";
  --p-font-size: 18px;
  --h1-font-size: 2.5rem;
  --h2-font-size: 2rem;
  --h3-font-size: 1.45em;
  --font-size-name: 34px;

  /*Less than 991px*/
  --font-size-name-mobile: 2em;
  --navbar-font-size-mobile: large;
  --navbar-line-height-mobile: 3em;

  /*Less than 340px*/
  --font-size-name-tiny: 1.2em;
  --navbar-font-size-tiny: small;
  color-scheme: light dark;

  /*Assume light mode*/
  --background-color: #E4E5F1;
  --button-color: #633349;
  --p-color: #23192F;
  --h1-color: #46325E;
  --light-color: #c0c0c0;
  --navbar-bg-color: #1f1b24;
  --link-color: black
}
@media (prefers-color-scheme:dark) {
  :root {
    --background-color: #212129;
    --button-color: #633349;
    --p-color: #FFF7FF ;
    --h1-color: #E5CBFF;
    --light-color: #A3A3A3;
    --navbar-bg-color: #141216;
    --link-color: #e8e8e9
  }
  p, h1, h2, h3 {
    filter: brightness(.82) contrast(1.3);
  }
  img:not(.navbar *) {
    filter: brightness(0.8) contrast(1.2);
  }
  #hero {
    text-decoration: rgb(0, 255, 115) wavy underline;
    color:paleturquoise
  }
}
*, ::after, ::before {
  box-sizing: border-box
}
body {
  margin: 0;
  font-family: var(--base-font-family);
  background-color: var(--background-color)
}
p, ul {
  margin-top: 0;
}
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: .5rem;
  font-weight: 500;
  line-height: 1.2
}
h1 {
  font-size: var(--h1-font-size);
  color: var(--h1-color)
}
h2 {
  font-size: var(--h2-font-size)
}
h3 {
  font-size: var(--h3-font-size)
}
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  min-height: 70px
}
@media (min-width:576px) {
  .container {
    max-width: 540px
  }
}
@media (min-width:768px) {
  .container {
    max-width: 720px
  }
}
@media (min-width:992px) {
  .container {
    max-width: 960px
  }
}
@media (min-width:1200px) {
  .container {
    max-width: 1150px
  }
}
@media (min-width:1350px) {
  .container {
    max-width: 1275px
  }
}
@media (min-width:1500px) {
  .container {
    max-width: 1400px
  }
}
.btn {
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: .375rem .75rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}
@media (prefers-reduced-motion:reduce) {
  .btn {
    transition: none!important
  }
  a {
    transition: none!important
  }
}
.collapse:not(.show) {
  display: none
}
.nav-link {
  display: block;
  padding: .3rem
}
.navbar, .navbar .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between
}
.navbar-nav {
  display: flex;
  text-align: center;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none
}
.navbar-nav *:not(img) {
  width: 100%;
}
.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center
}
.mt-4 {
  margin-top: 1.5rem
}
.mx-auto {
  margin-right: auto;
  margin-left: auto
}
p {
  color: var(--p-color);
  font-size: var(--p-font-size);
  line-height: 2em
}
.section-padding {
  padding: 6rem 1rem 6rem 1rem
}
.nav-button {
  background: var(--button-color);
  padding: 10px 25px;
  height: 48px;
  margin-right: 5px
}
.nav-button-backup {
  display: none
}
.nav-button-backup img {
  float: inline-start
}
.nav-button-backup a {
  text-indent: 1em
}
a {
  color: var(--link-color);
  text-decoration: none;
  transition: .1s linear
}
a:hover {
  color: var(--primary-color)
}
.wavy {
  text-decoration: rgb(174, 0, 255) underline;
}
.wavy:hover {
  text-decoration: rgb(255, 0, 212) wavy underline;
  transition: text-decoration 0.5s ease-out;
}
.navbar {
  background-color: var(--navbar-bg-color);
  padding: .3rem 1rem;
  position: fixed;
  z-index: 99;
  top: 0;
  right: 0;
  left: 0
}
.navbar-brand {
  color: var(--white-color);
  font-size: var(--font-size-name)
}
.nav-button:hover {
  background: var(--primary-color);
  color: var(--white-color)
}
.navbar-expand-lg .navbar-nav .nav-link {
  margin: 0 1.5rem;
  padding: 0
}
.nav-item .nav-link:hover {
  border-bottom-color: var(--primary-color)
}
.nav-link {
  color: var(--light-color);
  border-bottom: 1px solid transparent
}
.flex {
  display: flex;
}
.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: rgba(158, 17, 139, 0.5);
  justify-content:left;
  align-items: center;
}
.flex-container > div {
  margin: .25em;
  padding: .5em;
  background-color: #b24cc7;
  margin: 10px;
  text-align: center;
}
.mod-button {
  background-color: var(--button-color);
  text-align: center
}
.border-dead {
  border-style: solid;
  border-width: thin;
  border-color: #dda52c
}
#tree {
  color:red;
  text-shadow: 2px 2px green;
}
@media screen and (max-width:991px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    display: inline-block;
    margin: 5px .5rem
  }
  .nav-button {
    display: none
  }
  .nav-button-backup {
    display: flex
  }
  .navbar-expand-lg > .container {
    padding: 0;
  }
  #projects {
    text-align: center
  }
  .nav-item {
    line-height: var(--navbar-line-height-mobile);
    font-size: var(--navbar-font-size-mobile)
  }
  .navbar-brand {
    font-size: var(--font-size-name-mobile)
  }
}

@media screen and (max-width:340px) {
  .nav-item {
    line-height: 1em;
    font-size: var(--navbar-font-size-tiny)
  }
  .navbar-brand {
    font-size: var(--font-size-name-tiny)
  }
}

@media (min-width:992px) {
  .navbar-expand-lg .navbar-collapse {
    display: flex;
    flex-basis: auto
  }
  .navbar-expand-lg .navbar-toggler {
    display: none
  }
}

@supports (background-clip: text) {
  @media screen {
    .navbar-brand {
      background-image: repeating-linear-gradient(
        -225deg,
        #D62900 0%,
        #FF9B55 25%,
        #FFFFFF 50%,
        #D461A6 75%,
        #A50062 100%
      );
      background-clip: text;
      text-fill-color: transparent;
      -webkit-text-fill-color: transparent;
    }
  }
}