body {

    /* ============================================================= */
    /*
    /* Main Styles
    /*
    /* ============================================================= */
    /* 
    /* This only styles the elements shown on the page.
    /* 
    /* Some CSS knowledge is going to be needed to style these
    /* elements further. If you're just looking for a swatch and
    /* font swap, then you'll only need to edit the variables below.
    /*
    /* ============================================================= */
    /* Primary Color
    ================================================================ */
    --cd-primary-color:                    #AD80E8;
    --cd-primary-text-color:               #fff;
  
    /* ============================================================= */
    /* Secondary Color
    ================================================================ */
    --cd-secondary-color:                  #e280cf;
    --cd-secondary-text-color:             #fff;
  
    /* ============================================================= */
    /* Backgrounds
    ================================================================ */
    --cd-body-background-color:            #f8f8f8;
    --cd-content-background-color:         #ffffff;
    --cd-faded-background-color:           #f8f8f8;
  
    /* Background Extras */
    --cd-body-background-image:             url();
  
    /* ============================================================= */
    /* Text
    ================================================================ */
    --cd-body-text-color:                  #303030;
    --cd-faded-text-color:                 #575757;
  
    /* ============================================================= */
    /* Borders
    ================================================================ */
    --cd-border-color:                     rgba(0, 0, 0, 0.125);
    --cd-border-width:                     1px;
    --cd-border-style:                     solid;
    --cd-border-radius:                    1rem;
  
    /* ============================================================= */
    /* Navbar
    ================================================================ */
    --cd-navbar-background-color:          #564172;
    --cd-navbar-brand-color:               var(--cd-primary-color);
    --cd-navbar-brand-color-hover:         var(--cd-secondary-color);
    --cd-navbar-text-color:                var(--cd-content-background-color);
    --cd-navbar-link-color:                var(--cd-navbar-text-color);
    --cd-navbar-link-color-hover:          var(--cd-primary-color);
    --cd-navbar-font-family:               var(--cd-header-font-family);
    
    /* ============================================================= */
    /* Main Fonts
    ================================================================ */
    --cd-body-font-family:                 'Montserrat', sans-serif;
    --cd-header-font-family:               'Comfortaa', sans-serif;
  
  
    /* ============================================================= */
    /*
    /* Optional Styles
    /* These are just for extra easy styling
    /*
    /* ============================================================= */
    /* Navbar Dropdown 
    ================================================================ */
  
    /* Background */
    --cd-navbar-dropdown-background-color: var(--cd-navbar-background-color);
    --cd-navbar-dropdown-background-hover: var(--cd-primary-color);
  
    /* Link/Text */
    --cd-navbar-dropdown-link-color:       var(--cd-navbar-link-color);
    --cd-navbar-dropdown-link-color-hover: var(--cd-primary-text-color);
  
    /* Divider */
    --cd-navbar-dropdown-divider:          rgba(255,255,255,.12);
    --cd-navbar-dropdown-border-radius:    0 0 var(--cd-border-radius) var(--cd-border-radius);
  
  
    /* ============================================================= */
    /* Footer
    ================================================================ */
    
    /* Background */
    --cd-footer-background-color:          var(--cd-navbar-background-color);
  
    /* Link/Text */
    --cd-footer-text-color:                var(--cd-navbar-text-color);
    --cd-footer-link-color:                var(--cd-navbar-link-color);
    --cd-footer-link-color-hover:          var(--cd-navbar-link-color-hover);
  
  
    /* ============================================================= */
    /* Link
    ================================================================ */
  
    --cd-link-text-color:                  #4c8ebd;
    --cd-link-text-color-hover:            var(--cd-secondary-color);
  
  
    /* ============================================================= */
    /* HR
    ================================================================ */
  
    --cd-hr-border-width:                  var(--cd-border-width);
    --cd-hr-border-color:                  var(--cd-border-color);
    --cd-hr-border-style:                  var(--cd-border-style);
  
  
    /* ============================================================= */
    /* Pagination
    ================================================================ */
  
    /* Background */
    --cd-pagination-background-color:      transparent;
    --cd-pagination-background-hover:      transparent;
  
    /* Text */
    --cd-pagination-text-color:            var(--cd-faded-text-color);
    --cd-pagination-text-color-hover:      var(--cd-primary-color);
  
    /* Border */
    --cd-pagination-border-radius:         var(--cd-border-radius);
    --cd-pagination-border-width:          0;
    --cd-pagination-border-style:          var(--cd-border-style);
    --cd-pagination-border-color:          var(--cd-border-color);
    --cd-pagination-border-color-hover:    var(--cd-primary-color);
  
  
    /* ============================================================= */
    /* Cards
    ================================================================ */
    
    /* Background */
    --cd-card-background-color:            var(--cd-content-background-color);
    --cd-card-header-background-color:     var(--cd-card-background-color);
  
    /* Text */
    --cd-card-header-font-family:          var(--cd-header-font-family);
  
    /* Border */
    --cd-card-border-width:                var(--cd-border-width);
    --cd-card-border-style:                var(--cd-border-style);
    --cd-card-border-color:                var(--cd-border-color);
    --cd-card-border-radius:               var(--cd-border-radius);
  
  
    /* ============================================================= */
    /* Button
    ================================================================ */
    
    /* Background */
    --cd-button-background-color:          var(--cd-primary-color);
    --cd-button-background-color-hover:    var(--cd-secondary-color);
  
    /* Text */
    --cd-button-text-color:                var(--cd-primary-text-color);
    --cd-button-text-color-hover:          var(--cd-secondary-text-color);
  
    /* Border */
    --cd-button-border-width:              var(--cd-border-width);
    --cd-button-border-style:              var(--cd-border-style);
    --cd-button-border-color:              var(--cd-button-background-color);
    --cd-button-border-color-hover:        var(--cd-button-background-color-hover);
    --cd-button-border-radius:             var(--cd-border-radius);
  
  
    /* ============================================================= */
    /* Input
    ================================================================ */
  
    /* Background */
    --cd-input-background-color:           var(--cd-faded-background-color);
  
    /* Text */
    --cd-input-text-color:                 var(--cd-faded-text-color);
  
    /* Border */
    --cd-input-border-width:               var(--cd-border-width);
    --cd-input-border-style:               var(--cd-border-style);
    --cd-input-border-color:               var(--cd-border-color);
    --cd-input-border-color-hover:         var(--cd-primary-color);
    --cd-input-border-radius:              var(--cd-border-radius);
  
  }
  
  
  /* ============================================================= */
  /* General Page Styles
  /* ============================================================= */
  
  body {
  
    /* Global Text */
    color: var(--cd-body-text-color);
    font-family: var(--cd-body-font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  
    /* Global Background */
    background-color: var(--cd-body-background-color);
    background-image: var(--cd-body-background-image);
    background-position: center;
    background-size: cover;
  
  }
  
  
  /* ============================================================= */
  /* Plain Links
  /* ============================================================= */
  
  a,
  a:visited {
    color: var(--cd-link-text-color);
    transition: color .2s ease-in-out;
  }
  
  a:hover,
  a:focus,
  a:active {
    color: var(--cd-link-text-color-hover);
    text-decoration: none;
  }
  
  /* ============================================================= */
  /* Navbar
  /* ============================================================= */
  .navbar {
    background-color: var(--cd-navbar-background-color) !important;
    font-family: var(--cd-navbar-font-family) !important;
    z-index: 2000;
  }
  
  .navbar .navbar-brand {
    color: var(--cd-navbar-brand-color) !important;
    font-size: 2rem;
  }
  
  .navbar .navbar-brand:hover, 
  .navbar .navbar-brand:focus {
    color: var(--cd-navbar-brand-color-hover) !important;
  }
  
  .navbar .navbar-nav .nav-link {
    color: var(--cd-navbar-link-color) !important;
  }
  
  .navbar .navbar-nav .nav-link:hover, 
  .navbar .navbar-nav .nav-link:focus{
    color: var(--cd-navbar-link-color-hover) !important;
  }
  
  .navbar .navbar-toggler {
    color: var(--cd-navbar-link-color) !important;
    border: none !important;
  }
  
  .navbar .nav-link {
      display: flex;
      align-items: center;
  }
  
  .navbar .nav-link-icon {
      font-size: .5rem;
      margin-left: .25rem;
  }
  
  
  /* ============================================================= */
  /* Dropdowns
  /* This is for navbar dropdowns only
  /* ============================================================= */
  
  .navbar .dropdown-menu {
    color: var(--cd-navbar-dropdown-link-color) !important;
    background-color: var(--cd-navbar-dropdown-background-color) !important;
    border-radius: var(--cd-navbar-dropdown-border-radius) !important;
    border: none;
    margin-top: 0;
  }
  
  .dropdown:hover .dropdown-menu,
  .dropdown-menu:hover{
    display: block !important
  }
  
  .navbar .dropdown-divider {
    border-top: 1px solid var(--cd-navbar-dropdown-divider) !important;
  }
  
  .navbar .dropdown-item,
  .navbar .dropdown-item-text {
    color: var(--cd-navbar-dropdown-link-color) !important;
    transition: color .2s ease, background .2s ease;
  }
  
  .navbar .dropdown-item:hover, 
  .dropdown-item:focus,
  .dropdown-item:active {
    color: var(--cd-navbar-dropdown-link-color-hover)!important;
    background-color: var(--cd-navbar-dropdown-background-hover) !important;
  }
  
  .navbar .dropdown-header {
    color: var(--cd-navbar-dropdown-link-color-hover) !important;
  }
  
  
  /* ============================================================= */
  /* Footer
  /* ============================================================= */
  
  .footer{
    background-color: var(--cd-footer-background-color) !important;
    color: var(--cd-footer-text-color) !important;
  }
  
  .footer a,
  .footer a:visited {
    color: var(--cd-footer-link-color) !important;
  }
  
  .footer a:hover,
  .footer a:focus,
  .footer a:active {
    color: var(--cd-footer-link-color-hover) !important;
  }
  
  
  /* ============================================================= */
  /* Pagination
  /* ============================================================= */
  
  .page-link {
    transition: color .2s ease, background .2s ease, border .2s ease;
    border-width: var(--cd-pagination-border-width) !important;
    border-style: var(--cd-pagination-border-style) !important;
  }
  
  .page-link,
  .page-item.disabled .page-link {
    color: var(--cd-pagination-text-color) !important;
    background-color: var(--cd-pagination-background-color) !important;
    border-color: var(--cd-pagination-border-color) !important;
  }
  
  .page-item.active .page-link,
  .page-link:hover,
  .page-link:focus,
  .page-link:active {
    color: var(--cd-pagination-text-color-hover) !important;
    background-color: var(--cd-pagination-background-hover) !important;
    border-color: var(--cd-pagination-border-color-hover) !important;
  }
  
  /* Keeps users from accidentally highlighting */
  .page-link{
    cursor: pointer;
    user-select: none;
  }
  
  /* Fixes my jank nav/pagination hybrid */
  .nav .pagination .page-item:first-child .page-link {
    border-radius: 0 !important;
    border-left: 0 !important;
  }
  
  .nav .pagination .page-item:last-child .page-link {
    border-radius: 0 !important
  }
  
  .nav .page-item:first-child .page-link {
    border-radius: var(--cd-pagination-border-radius) 0 0 var(--cd-pagination-border-radius) !important;
  }
  
  .nav .page-item:last-child .page-link {
    border-radius: 0 var(--cd-pagination-border-radius) var(--cd-pagination-border-radius) 0 !important
  }
  
  
  /* ============================================================= */
  /* Card
  /* ============================================================= */
  
  .card {
    background-color: var(--cd-card-background-color) !important;
    border-width: var(--cd-card-border-width) !important;
    border-style: var(--cd-card-border-style) !important;
    border-color: var(--cd-card-border-color) !important;
    border-radius: var(--cd-border-radius) !important;
  }
  
  .card-header {
    background-color: var(--cd-card-header-background-color) !important;
    border-bottom-color: var(--cd-card-border-color) !important;
    border-bottom-width: var(--cd-card-border-width) !important;
    border-bottom-style: var(--cd-card-border-style) !important;
    font-family: var(--cd-card-header-font-family) !important;
    border-radius: calc(var(--cd-border-radius) - 1px) calc(var(--cd-border-radius) - 1px) 0 0 !important;
  }
  
  
  /* ============================================================= */
  /* Buttons & Badges
  /* ============================================================= */
  
  .btn.btn-primary,
  .badge.badge-primary {
    color: var(--cd-button-text-color) !important;
    background-color: var(--cd-button-background-color) !important;
    border-width: var(--cd-button-border-width) !important;
    border-style: var(--cd-button-border-style) !important;
    border-color: var(--cd-button-border-color) !important;
    border-radius: var(--cd-button-border-radius) !important;
  }
  
  .btn.btn-primary:hover,
  .btn.btn-primary:focus,
  .btn.btn-primary:active,
  a.badge.badge-primary:hover,
  a.badge.badge-primary:focus,
  a.badge.badge-primary:active  {
    color: var(--cd-button-text-color-hover) !important;
    border-color: var(--cd-button-border-color-hover) !important;
    background-color: var(--cd-button-background-color-hover) !important;
    box-shadow: none !important;
  }
  
  
  /* ============================================================= */
  /* Input
  /* ============================================================= */
  
  .form-control {
    background-color: var(--cd-input-background-color) !important;
    color: var(--cd-input-text-color) !important;
    border-width: var(--cd-input-border-width) !important;
    border-style: var(--cd-input-border-style) !important;
    border-color: var(--cd-input-border-color) !important;
    border-radius: var(--cd-input-border-radius) !important;
  }
  
  .form-control:focus,
  .form-control:active {
    background-color: var(--cd-input-background-color) !important;
    border-color: var(--cd-input-border-color-hover) !important;
  }
  
  
  /* ============================================================= */
  /* Scrollbar
  /* ============================================================= */
  
  @media (min-width: 992px) {
    body::-webkit-scrollbar-track {
      background-color: var(--cd-faded-background-color);
      border-width: 0px !important;
    }
  
    body::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
  
    body::-webkit-scrollbar-thumb {
      background-color: var(--cd-primary-color);
    }
  
    body::-webkit-scrollbar-corner,
    body::-webkit-resizer {
      background-color: var(--cd-border-color);
    }
  }
  
  
  /* ============================================================= */
  /* Misc
  /* ============================================================= */
  
  .text-primary {
    color: var(--cd-primary-color) !important;
  }
  
  .bg-faded {
    background-color: var(--cd-faded-background-color) !important;
  }
  
  .text-muted {
    color: var(--cd-faded-text-color) !important;
  }
  
  h1, h2, h3,
  h4, h5, h6 {
    font-family: var(--cd-navbar-font-family) !important;
  }
  
  hr {
    border-top-color: var(--cd-hr-border-color) !important;
    border-top-width: var(--cd-hr-border-width) !important;
    border-top-style: var(--cd-hr-border-style) !important;
  }
  
  img {
    image-rendering: -webkit-optimize-contrast;
  }
  
  /* Fix any border radiuses that were messed from before */
  .rounded {border-radius: var(--cd-border-radius) !important}
  .rounded-circle {border-radius: 100%;}
  .rounded-0 {border-radius: 0 !important;}
  
  /* ============================================================= */
  /* Chee's Tweaks
  /* ============================================================= */
  
  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  #main-container {
      min-height: calc(100vh - 105px);
      padding: 1rem;
      -ms-flex: 1 1 auto!important;
      flex: 1 1 auto!important;
  }
  
  @media (min-width: 768px) {
      #main-container {
          padding: 5rem 1.5rem;
      }
  }
  
  /* Fades container in on load so its not as jarring */
  .softload {
    opacity: 0;
  } .softload.active {
    opacity: 1;
    transition: opacity 2s ease;
  }
  
  /* Remove ugly box shadow */
  button:focus,
  .page-link:focus,
  .form-control:focus {
    outline: none !important;
    box-shadow: none !important;
  }
  
  /* Remove margin from last paragraphs */
  p:last-child {
      margin-bottom: 0 !important;
  }
  
  /* Small container for more compact view */
  .container {
    max-width: 950px !important;
  }
  
  /* Prevents awkward load in stutter */
  #charadex-gallery .list .card-body {
    min-height: calc(200px + 2.5rem);
  } 
  
  #charadex-gallery .list .card-body img {
    max-height: 200px;
  }
  
  .gallery-img {
      max-height: 150px;
  }
  
  /* Combines search and its companion filter */
  #search-filter.form-control {
    border-radius: var(--cd-border-radius) 0 0 var(--cd-border-radius) !important;
    border-right: 0 !important;
  } 
  
  #search.filtered.form-control {
    margin-left: -.5rem;
    width: calc(100% + .5rem) !important;
    border-radius: 0 var(--cd-border-radius) var(--cd-border-radius) 0 !important;
  }
  
  /* Loading Icon */
  #loading {
    width: 5rem; 
    height: 5rem;
    position: absolute;
    top: calc(50% - 2.5rem);
    left: calc(50% - 2.5rem);
    animation-duration: 2s;
    opacity: .5;
    border-color: var(--cd-body-text-color);
    border-right-color: transparent !important;
  }
  
  
  #log-table {
      max-height: 200px;
      overflow-y: auto;
  }
  
  /* ============================================================= */
  /* Custom Classes
  /* ============================================================= */
  
  /* Makes sure your text formatting is preserved from the sheet */
  /* Best for large areas like notes */
  .text-pre {
      white-space: break-spaces;
  }
  
  .hero-title {
      color: var(--cd-primary-text-color);
      background-color: var(--cd-primary-color);
      border-radius: var(--cd-border-radius);
      font-family: var(--cd-header-font-family);
      display: flex;
      padding: 1.5rem;
      min-height: 250px;
      font-weight: 800;
      font-size: 2.5rem;
  }
  
  @media (min-width: 768px) {
      .hero-title {
          letter-spacing: 2px;
          font-size: 5rem;
      }
  }