/* Theme colors */
:root {
  --link-fg: var(--gray1);
  --bg-translucent: rgba(255, 255, 255, 0.5);
  --bg-nearly-opaque: rgba(255, 255, 255, 0.8);
  --trans-flag: linear-gradient(#b6b6b6, #6d6d6d, #b6b6b6, #6d6d6d, #b6b6b6, #6d6d6d);
  font-size: large;
}

/* Funky bounce animation courtesty of https://stackoverflow.com/a/29786270 */
@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

@keyframes bounce { 
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

/* Define + use cool background animation */
@-webkit-keyframes BackgroundAnimation {
  0%{background-position:76% 0%}
  50%{background-position:25% 100%}
  100%{background-position:76% 0%}
}

@keyframes BackgroundAnimation {
  0%{background-position:76% 0%}
  50%{background-position:25% 100%}
  100%{background-position:76% 0%}
}

.page {
  background: var(--trans-flag);
  background-size: 1000% 1000%;
  -webkit-animation: BackgroundAnimation 60s ease infinite;
  animation: BackgroundAnimation 60s ease infinite;
}

/* Deploy atkinson hyperlegible if present on server */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-weight: 400;
  src: url(/assets/Atkinson-Hyperlegible-Regular-102.ttf) format('truetype');
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-weight: bold;
  src: url(/assets/Atkinson-Hyperlegible-Bold-102.ttf) format('truetype');
}

html, body {
  font-family: "Atkinson Hyperlegible", "Noto Sans", sans-serif;
  color: var(--gray1);
}

/* Instance display name */
header a h1 {
  color: var(--gray1);
}

/* Header card */
.profile .header {
  background: var(--bg-translucent);
  color: var(--re1);
  border: 1px solid var(--gray1);
}

/* Header card username */
.profile .header .basic-info .username {
  color: var(--gray1);
}

/* Make avatars bounce on mouseover */
.avatar:hover {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* About + Pinned posts headers */
.profile .col-header {
  background: var(--bg-translucent);
  border: 1px solid var(--gray1);
}

.profile .about-user .col-header {
  border-bottom: none;
  margin-bottom: 0;
}

.profile .about-user .fields, .profile .about-user .bio, .profile .about-user .accountstats {
  background: var(--bg-translucent);
  border-left: 1px solid var(--gray1);
  border-right: 1px solid var(--gray1);
}

.profile .about-user .fields .field:first-child {
  border-top: 1px dashed var(--gray1);
}
.profile .about-user .fields .field {
  border-bottom: 1px dashed var(--gray1);
}
.profile .about-user .accountstats {
  border-top: 1px dashed var(--gray1);
  border-bottom: 1px solid var(--gray1);
}

.toot, .toot.expanded {
  background: var(--bg-translucent);
}

.toot .text .content pre, .toot .text .content code {
  background: var(--bg-nearly-opaque);
}

.toot .media .media-wrapper {
  border: 0.15rem solid transparent;
}

.toot .info, .toot.expanded .info {
  background: var(--bg-nearly-opaque);
  color: var(--gray1);
}