/* Font registration */
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-v20-latin-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-v20-latin-700.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-v20-latin-italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}


/* Variables */
:root {
  --text-color-light: #202020;
  --bg-color-light: #e0e0e0;
  --panel-color-light: #c0c0c0;
  --input-color-light: #b080ff;

  --text-color-dark: #f0f0f0;
  --bg-color-dark: #202020;
  --panel-color-dark: #404040;
  --input-color-dark: #400080;
}


/* Body */
body {
  /* Font */
  font-family: Inter;
  font-size: 18px;
  /* Layout */
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;

  /* Hidden elements */
  > input {
    display: none;

    &[id="theme-light"]:checked ~ :not(input) {
      --text-color: var(--text-color-light);
      --bg-color: var(--bg-color-light);
      --panel-color: var(--panel-color-light);
      --input-color: var(--input-color-light);

      label[for="theme-light"] {
        text-decoration: overline;
      }
    }

    &[id="theme-dark"]:checked ~ :not(input) {
      --text-color: var(--text-color-dark);
      --bg-color: var(--bg-color-dark);
      --panel-color: var(--panel-color-dark);
      --input-color: var(--input-color-dark);

      label[for="theme-dark"] {
        text-decoration: overline;
      }
    }

    &[id="theme-system"]:checked ~ :not(input) {
      --text-color: var(--text-color-light);
      --bg-color: var(--bg-color-light);
      --panel-color: var(--panel-color-light);
      --input-color: var(--input-color-light);
      @media (prefers-color-scheme: dark) {
        --text-color: var(--text-color-dark);
        --bg-color: var(--bg-color-dark);
        --panel-color: var(--panel-color-dark);
        --input-color: var(--input-color-dark);
      }

      label[for="theme-system"] {
        text-decoration: overline;
      }
    }
  }

  /* Visible elements */
  > :not(input) {
    /* Colors */
    color: var(--text-color);
    background-color: var(--bg-color);
    /* Layout */
    padding: 0.5rem;
  }

  header {
    /* Colors */
    background: var(--panel-color);

    .switches {
      float: inline-end;
    }
  }

  main {
    /* Self layout */
    flex: 1;
    /* Child layout */
    display: flex;
    align-items: center;
    justify-content: center;

    section {
      /* Colors */
      background: var(--panel-color);
      /* Layout */
      display: inline-block;
      padding: 1rem;
      margin: 1rem;
      border-radius: 1rem;

      h1 {
        margin: 0 0 1rem 0;
        text-align: center;
      }

      ul {
        padding: 0;
        margin: 0;

        li {
          list-style: none;
          font-size: 1.5rem;

          &:not(:last-child) {
            margin-bottom: 0.25em;
          }

          a {
            /* Color */
            background: var(--input-color);
            /* Layout */
            padding: 0.33em;
            border-radius: 0.5em;
            display: block;
            /* Text */
            text-align: center;
            line-height: 1;
            /* Transition */
            filter: brightness(1.0);
            transition: filter 0.5s ease-out;

            &:hover {
              filter: brightness(1.25);
              transition: filter 0.5s ease-out;
            }

            img {
              width: 1.5em;
              object-fit: contain;
              float: inline-end
            }

            span {
              padding: 0 0.5em;
            }
          }
        }
      }
    }
  }

  footer {
    /* Colors */
    background: var(--panel-color);
    /* Text */
    font-size: 0.8rem;
    text-align: center;

    p {
      margin: 0;
    }
    summary {
      cursor: pointer;
    }
  }

  a {
    color: var(--text-color);
    text-decoration: none;
  }

  label {
    cursor: pointer;
  }

  img {
    height: 1em;
    vertical-align: center;
  }
}