/*
  theme-title: Night Owl
  theme-description: The Night Owl CSS theme for Free Flow.
*/

/*
  -- Background Image --

  The background image is called 'Photo of Starry Night'
  which you can download from Pexels here:
  https://www.pexels.com/photo/photo-of-starry-night-1421903/
*/

/*
  -- Font --

  Karla can be found in found in Google Fonts here:
  https://fonts.google.com/specimen/Karla
*/

:root {
  --night-owl-bg: #0d0e0fd9;
  --night-owl-text: #c1c1e7;
  --night-owl-link-default-fg: #5198c6;
  --night-owl-link-hover-fg: #9eecf7;
  --night-owl-light-purple: #3d46b9;
  --night-owl-dark-purple: #222333;
  --night-owl-green: #1fdaa0;
  --night-owl-button-light: var(--night-owl-green);
  --night-owl-button-dark: #000910;

  --avatar-border: var(--night-owl-dark-purple);
  --status-header-background: linear-gradient(#545454, 5%, #0E0E0E);
}

@font-face {
  font-family: "Karla";
  src: url("/assets/fonts/Karla-VariableFont_wght.ttf") format("truetype");
}

html, body {
    scrollbar-color: var(--night-owl-light-purple) var(--night-owl-dark-purple);
}

.page {
  background-image: url("/assets/background.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: "Karla", sans-serif;
  font-weight: 400;
  font-size: 16px;
}

.profile .profile-header {
  background: linear-gradient(#6d9fef, 30%, #000000);
}

.profile .col-header {
  background: var(--status-header-background);
}

.thread .col-header {
  background: var(--status-header-background);
  border: none;
}

.profile .column-split {
  gap: 1rem;
}

.profile .about-user .fields .field:first-child {
  border-top: none;
}

.profile .about-user .fields .field {
  padding: 0.5rem;
  border-style: none none dotted none;
  border-width: 0.1rem;
}

.profile .about-user .fields {
  word-wrap: break-word;
}

.profile .about-user .fields,
.profile .about-user .bio,
.profile .about-user .accountstats,
.status,
.status .status-info,
.status.expanded,
.status.expanded .status-info {
  background: var(--night-owl-bg);
}

.status {
  border: none;
}

.role.admin {
  border: none !important;
  color: var(--night-owl-green) !important;
  background-color: transparent !important;
}

a:link, a:visited {
  color: var(--night-owl-link-default-fg);
  text-decoration: none;
}

a:hover, a:active {
  color: var(--night-owl-link-hover-fg);
}

.button {
  background-color: var(--night-owl-button-dark);
  color: var(--night-owl-button-light);
  border: none;
  box-shadow: none;
  transition: 0.5s
}

.button:hover {
  background-color: var(--night-owl-button-light);
  color: var(--night-owl-button-dark);
  transition: 0.5s
}