@import url("palette.css");
@import url("pygments.css");

@font-face {
  font-family: 'droid_sans';
  src: url('/theme/fonts/DroidSans.ttf');
  font-weight: normal;
  font-style: normal;
}

body {
  background: var(--background);
  margin: 0;
  padding: 0;
  color: var(--text);

  font-family: 'droid_sans';

  > header,
  > main,
  > footer {
    padding-left: 5rem;
    padding-right: 5rem;

    @media (width > 600px) and (width < 1000px) {
      padding-left: 3rem;
      padding-right: 3rem;
    }

    @media (width > 600px) and (width < 768px) {
      padding-left: 2rem;
      padding-right: 2rem;
    }

    @media (width < 600px) {
      padding-left: 1rem;
      padding-right: 1rem;
      padding-bottom: 1rem;
    }
  }

  > header {
    box-shadow: 0 4px 6px var(--shadow-1),
    0 1px 3px var(--shadow-2);
  }

  > footer {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}

hgroup {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
  align-items: center;

  a, img {
    height: 4rem;
  }

  h1 {
    margin: 0;
    align-content: center;

    color: var(--text);

    @media (width <= 400px) {
      font-size: 24px;
    }
  }
}

article {
  > footer {
    border-top: 1px dotted var(--link-color-active);
    border-bottom: 1px solid var(--link-color-active);

    padding: 1rem;

    p {
      margin: 0;
      margin-bottom: 1rem;
    }
  }

  .figure img {
    max-width: 100%;
    height: auto;
  }

  .align-center {
    text-align: center;
  }

  .caption, figcaption {
    text-align: center;
    font-style: italic;
    font-size: 14px;
  }

  span.literal {
    border-radius: 0.3rem;
    padding: 0.3rem;
    background: var(--pre-background);

    font-size: 12px;
    font-family: 'Noto Sans Mono';
  }
}

a {
  color: var(--link-color);
  transition: color 0.3s ease;
  &:hover {
    color: var(--link-color-hover);
  }
  &:active {
    color: var(--link-color-active);
  }
  &:visited {
    color: var(--link-color-active);
  }
}

.highlight {
  border-radius: 0.5rem;
  margin: 0.5rem;

  pre {
    padding-top: 1rem;
    padding-left: 1rem;
    padding-bottom: 1rem;

    font-size: medium;

    overflow-x: auto;
  }

  .highlighttable {
    table-layout: fixed;
    width: 100%;

    td.linenos {
      width: 50px;
    }
  }
}

.admonition {
  border: 1px solid var(--link-color-active);
  border-radius: 0.5rem;

  margin: 0.5rem;

  p {
    padding-left: 1rem;
    padding-right: 1rem;

    &.admonition-title {
      margin: 0;
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;

      border-bottom: 1px solid var(--link-color-active);
    }
  }

  &.important {
    .admonition-title:before {
      content: "\26A0";
      margin-right: 0.5em;
      font-size: 12px;
    }
  }

  &.note {
    .admonition-title:before {
      content: "\1f6c8";
      margin-right: 0.5em;
      font-size: 16px;
    }
  }
}

theme-picker {
  display: flex;
  padding-left: 20px;

  label {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
  }

  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 1rem;

    &:before {
      position: absolute;
      content: "";
      height: 22px;
      width: 22px;
      left: 2px;
      bottom: 2px;
      background-color: var(--background);
      -webkit-transition: .4s;
      transition: .4s;
      border-radius: 50%;
    }
  }

  input {
    /* To allow screen reader to still access these. */
    opacity: 0;
    position: absolute;
    pointer-events: none;

    &:checked + .slider:before {
      -webkit-transform: translateX(22px);
      -ms-transform: translateX(22px);
      transform: translateX(22px);
    }
  }

  @media (width <= 550px) {
    padding-left: 0;
  }
}