:root {
  color-scheme: dark light;
  --duration: 0.5s;
  --timing: ease;
}
html {
  scroll-behavior: smooth;
  position: relative;
  min-height: 100%;
}
html,
body {
  height: 100%;
}
body img {
  /* opacity: .75; */
  transition: opacity .5s ease-in-out;
}
body img:hover {
  opacity: 1;
}
.content-wrapper {
  padding: 1.5rem;
  text-align: center;
}
.links {
  max-width: 600px;
}
.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


/* Light mode */
@media (prefers-color-scheme: light) {
  body {
    /* padding-top: 5rem; */
    display: flex;
    align-items: center;
    transition:
      color var(--duration) var(--timing),
      background-color var(--duration) var(--timing);
  }

  .btn-primary {
    color: #fff;
    background-color: #003380;
    border-color: #003380;
  }
  .btn-primary:hover {
    color: #fff;
    background-color: green;
    border-color: green;
  }
  .btn-discord {
    color: #fff;
    background-color: #7289da;
    border-color: #7289da;
  }
  .btn-discord:hover {
    color: #fff;
    /* background-color: #2c2f33;
    border-color: #2c2f33; */
    background-color: #5062a5;
    border-color: #5062a5;
  }
  .btn-vrchat {
    color: #fff;
    background-color: #30afa9;
    border-color: #30afa9;
  }
  .btn-vrchat:hover {
    color: #fff;
    background-color: #178a8f;
    border-color: #178a8f;
  }
  .btn-onlyfans {
    color: #fff;
    background-color: #00aff0;
    border-color: #00aff0;
  }
  .btn-onlyfans:hover {
    color: #fff;
    background-color: #0091ea;
    border-color: #0091ea;
  }
  .btn-secondlife {
    color: #fff;
    background-color: #00c0ff;
    border-color: #00c0ff;
  }
  .btn-secondlife:hover {
    color: #fff;
    background-color: #009bcf;
    border-color: #009bcf;
  }
  .btn-twitter {
    color: #fff;
    background-color: #1d9bf0;
    border-color: #1d9bf0;
  }
  .btn-twitter:hover {
    color: #fff;
    background-color: #000;
    border-color: #000;
  }
  .btn-bsky {
    color: #fff;
    background-color: #0085ff;
    border-color: #0085ff;
  }
  .btn-bsky:hover {
    color: #fff;
    background-color: #3399FF;
    border-color: #3399FF;
  }
  .content-wrapper .btn-block {
    max-width: 25rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .content-btn-icon {
    float: right;
  }
  .btn-external {
    display: inline-block;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
  }
  .btn-external span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
  }
  .btn-external span:after {
    font-family: FontAwesome;
    font-style: normal;
    content: '\f35d';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
  }
  .btn-external:hover span {
    padding-right: 25px;
  }
  .btn-external:hover span:after {
    opacity: 1;
    right: 0;
  }
  .btn-telegram {
    color: #fff;
    background-color: #0088cc;
    border-color: #0088cc;
  }
  .btn-telegram:hover {
    color: #fff;
    background-color: #20a0e2;
    border-color: #20a0e2;
  }
  .btn-mastodon {
    color: #fff;
    background-color: #6364ff;
    border-color: #6364ff;
  }
  .btn-mastodon:hover {
    color: #fff;
    background-color: #563acc;
    border-color: #563acc;
  }
}


/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
    display: flex;
    align-items: center;
    background-color: #232323;
    transition:
    color var(--duration) var(--timing),
    background-color var(--duration) var(--timing);
  }
  body .jumbotron {
    background-color: #444;
    color: #fff;
  }
  body .separator-bg {
    background-color: #666;
  }
  
  body > .footer {
    background-color: #333;
  }
  
  /* .footer dark-mode-toggle::before {
    font-family: FontAwesome;
    font-weight: 900;
    content: "\f186";
    margin-right: 4px;
  }
  body.dark > .footer dark-mode-toggle::before{
    content: "\f185";
  } */

  .btn-primary {
    color: #444;
    background-color: #003380;
    border-color: #003380;
  }
  .btn-primary:hover {
    color: #444;
    background-color: green;
    border-color: green;
  }
  .btn-discord {
    color: #444;
    background-color: #7289da;
    border-color: #7289da;
  }
  .btn-discord:hover {
    color: #444;
    /* background-color: #2c2f33;
    border-color: #2c2f33; */
    background-color: #5062a5;
    border-color: #5062a5;
  }
  .btn-vrchat {
    color: #444;
    background-color: #30afa9;
    border-color: #30afa9;
  }
  .btn-vrchat:hover {
    color: #444;
    background-color: #178a8f;
    border-color: #178a8f;
  }
  .btn-onlyfans {
    color: #444;
    background-color: #0091ea;
    border-color: #0091ea;
  }
  .btn-onlyfans:hover {
    color: #444;
    background-color: #00aff0;
    border-color: #00aff0;
  }
  .btn-secondlife {
    color: #444;
    background-color: #00c0ff;
    border-color: #00c0ff;
  }
  .btn-secondlife:hover {
    color: #444;
    background-color: #009bcf;
    border-color: #009bcf;
  }
  .btn-twitter {
    color: #444;
    background-color: #1DA1F2;
    border-color: #1DA1F2;
  }
  .btn-twitter:hover {
    color: #444;
    background-color: #3399FF;
    border-color: #3399FF;
  }
  .btn-bsky {
    color: #444;
    background-color: #3399FF;
    border-color: #3399FF;
  }
  .btn-bsky:hover {
    color: #444;
    background-color: #1B8CD8;
    border-color: #1B8CD8;
  }
  .content-wrapper .btn-block {
    max-width: 25rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .content-btn-icon {
    float: right;
  }
  .btn-external {
    display: inline-block;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
  }
  .btn-external span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
  }
  .btn-external span:after {
    font-family: FontAwesome;
    font-style: normal;
    content: '\f35d';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
  }
  .btn-external:hover span {
    padding-right: 25px;
  }
  .btn-external:hover span:after {
    opacity: 1;
    right: 0;
  }
  .btn-telegram {
    color: #444;
    background-color: #0088cc;
    border-color: #0088cc;
  }
  .btn-telegram:hover {
    color: #444;
    background-color: #20a0e2;
    border-color: #20a0e2;
  }
  .btn-mastodon {
    color: #444;
    background-color: #6364ff;
    border-color: #6364ff;
  }
  .btn-mastodon:hover {
    color: #444;
    background-color: #563acc;
    border-color: #563acc;
  }

}

dark-mode-toggle {
  /* --dark-mode-toggle-light-icon: url(img/moon.svg);
  --dark-mode-toggle-dark-icon: url(/img/sun.svg); */
  --dark-mode-toggle-icon-size: 20px;

  --dark-mode-toggle-light-icon: url(img/toggle-off-solid.svg);
  --dark-mode-toggle-dark-icon: url(/img/toggle-on-solid.svg);
  --dark-mode-toggle-color: #6C757D;
  /* --dark-mode-toggle-icon-filter: invert(80%); */
  position: relative;
  /*top: .1rem;*/
  opacity: 0.9;
}
dark-mode-toggle::part(fieldset) {
  padding: 0;
}




.separator-bg {
  background-color: #ddd;
}


/* -- Button customizations -- */
.btn {
  min-width: 225px;
}



/* -- Back-to-top button -- */
#back-to-top {
  display: inline-block;
  background-color: #003380;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 8px;
  right: 8px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#back-to-top::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 40px;
  color: #fff;
}
#back-to-top:hover {
  cursor: pointer;
  background-color: #003380;
}
#back-to-top:active {
  background-color: #003380;
}
#back-to-top.show {
  opacity: .5;
  visibility: visible;
}

#back-to-top.show:hover {
  opacity: 1;
}

/* -- Footer -- */
.footer {
  position: relative;
  bottom: 0;
  /* margin-top: 16px; */
  width: 100%;
  /* min-height: 56px; */
  /* line-height: 56px; */
  background-color: #f5f5f5;
  transition:
    color var(--duration) var(--timing),
    background-color var(--duration) var(--timing);
}
.footer a {
  color: inherit;
}
.footer .copyright {
  line-height: 56px;
}