/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

:root {
  --compare-header-background: rgb(243,255,236);
  --compare-header-gradient-1: rgba(243,255,236,0.4);
  --compare-header-gradient-2: rgba(236,243,252,0.4);
  --compare-header-gradient-3: rgba(248,241,255,0.4);

  --compare-button-foreground-color: rgb(185,115,255);
  --compare-button-background-color: #fcfcfc;

  --compare-border-color: #808080;

  --compare-dimmed-foreground-color: #808080;
  --compare-more-dimmed-foreground-color: #707070;
}

@supports (color-scheme: dark) {
@media only screen and (prefers-color-scheme: dark) {
:root {
  --compare-header-background: rgb(42,57,33);
  --compare-header-gradient-1: rgba(42,57,33,0.6);
  --compare-header-gradient-2: rgba(45,72,64,0.6);
  --compare-header-gradient-3: rgba(57,42,72,0.6);

  --compare-button-foreground-color: rgb(185,115,255);
  --compare-button-background-color: #171717;

  --compare-border-color: #606060;

  --compare-dimmed-foreground-color: #c0c0c0;
  --compare-more-dimmed-foreground-color: #707070;
}
}
}

body {
    overflow-y: scroll;
}

header input[type="text"] {
    border-radius: 6px;
    padding: 4px 4px;
    border: 1px solid var(--compare-border-color);
}

header input {
    color-scheme: light dark;
}

header select {
    color-scheme: light dark;
}

header {
    padding-top: 8px;
    background: var(--compare-header-background);
    background: linear-gradient(147deg,
                                var(--compare-header-gradient-1) 29%,
                                var(--compare-header-gradient-2) 65%,
                                var(--compare-header-gradient-3) 82%);
}

body > div {
    width: 100%;
}

header h1 {
    font-size: 1.2em;
    margin: 0;
    text-align: center;
    padding: 0 40px;
}

header nav {
    text-align: center;
    padding: 0 40px;
}

header nav a {
    font-size: 0.8em;
    font-weight: bold;
    font-family: sans-self;
    margin-right: 20px;
}

#github-link {
    position: absolute;
    right: 4px;
    top: 4px;
    opacity: 0.3;
}

#logo {
    position: absolute;
    left: 4px;
    top: 4px;
}

.logo-img {
    width: 32px;
    height: 32px;
}

/* ==== round button ==== */

.round-button {
    color: var(--compare-button-foreground-color);
    font-weight: bold;
    border-radius: 8px;
    border: 2px solid var(--compare-button-foreground-color);
    background-color: var(--compare-button-background-color) !important;
    padding: 2px;
    margin-inline-start: 8px;
}

.round-button:hover {
    transform: scale(1.05);
}
.round-button:active {
    transform: scale(0.95);
}