/* 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 {
  /* Photon color variables used on the aboutdevtools page */
  --blue-50: #0a84ff;
  --blue-50-alpha20: rgba(10, 132, 255, 0.2);
  --blue-60: #0060df;
  --blue-70: #003eaa;
  --blue-80: #002275;
  --grey-30: #d7d7db;
  --grey-90: #0c0c0d;
  --grey-90-alpha-10: rgba(12, 12, 13, 0.1);
  --grey-90-alpha-20: rgba(12, 12, 13, 0.2);
  --grey-90-alpha-30: rgba(12, 12, 13, 0.3);
  --grey-90-alpha-40: rgba(12, 12, 13, 0.4);
  --grey-90-alpha-50: rgba(12, 12, 13, 0.5);
  --red-50: #ff0039;
  --white: #ffffff;

  /* Shared variables */
  --line-height: 1.5em;
}

html, body {
  min-width: 600px;
}

body {
  margin-top: 17vh;
}

p {
  line-height: var(--line-height);
}

.box {
  max-width: 850px;
  display: flex;
  flex-shrink: 0;
  padding: 0 0 50px 0;
  /* Compensate for the optional scrollbar. */
  margin-right: calc(100% - 100vw);
}

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.left-pane {
  width: 300px;
  height: 300px;
  margin-inline-end: 20px;
  background-image: url(images/otter.svg);
  background-size: 100%;
  background-position: 50%;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.features {
  max-width: 980px;
  border-top: 1px solid var(--grey-30);
}

.features-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 40px 20px;
  margin: 60px 20px;
  padding: 0;
}

.feature-icon {
  width: 55%;
}

.feature {
  list-style: none;
  text-align: center;
  margin: 10px 0;
}

.feature-name {
  font-size: 28px;
  font-weight: 300;
  margin: 10px 0;
}

.feature-desc {
  margin: 1em 20px;
}

.feature-link {
  display: block;
  margin-top: 10px;
}

.external,
.external:hover,
.external:visited,
.external:hover:active {
  color: var(--blue-60);
}

.external::after {
  content: "";

  display: inline-block;
  height: 16px;
  width: 16px;

  margin: -.3rem .15rem 0 0.25rem;
  vertical-align: middle;

  background-image: url(images/external-link.svg);
  background-repeat: no-repeat;
  background-size: 16px 16px;

  -moz-context-properties: fill;
  fill: var(--blue-60);
}

.title {
  font-weight: 300;
  font-size: 32px;
  margin-top: 16px;
  line-height: 44px;
}

.buttons-container {
  display: flex;
  margin-top: 5px;
}

.buttons-container button:not(:last-child) {
  margin-right: 10px;
}

button {
  margin: 20px 0 0 0;
  padding: 10px 20px;

  border: none;
  border-radius: 2px;

  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  cursor: pointer;

  box-shadow: 0 1px 0 rgba(0,0,0,0.23);
}

/* Remove light gray outline when clicking on the button */
button::-moz-focus-inner {
  border: 0;
}

.primary-button {
  background-color: var(--blue-60);
  color: var(--white);
}

.primary-button:enabled:hover {
  background-color: var(--blue-70)
}

.primary-button:active,
.primary-button:hover:active,
.primary-button:enabled:hover:active {
  background-color: var(--blue-80);
}

.default-button {
  background-color: var(--grey-90-alpha-10);
}

.default-button:enabled:hover {
  background-color: var(--grey-90-alpha-20)
}

.default-button:active,
.default-button:hover:active,
.default-button:enabled:hover:active {
  background-color: var(--grey-90-alpha-30);
}

[hidden="true"] {
  display: none;
}

footer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 300px;
  flex-grow: 1;
  padding-bottom: 15px;
  color: var(--white);
  background: linear-gradient(0, var(--blue-60), var(--blue-80));
}

.dev-edition-logo {
  flex-shrink: 0;
  width: 165px;
  margin: 20px 50px 0 0;
}

.footer-message {
  max-width: 460px;
}

.footer-message-title {
  color: var(--white);
}

.footer-link {
  display: block;
  margin-top: 10px;
}

.footer-link::after {
  fill: var(--white);
}

.footer-link,
.footer-link:hover,
.footer-link:visited,
.footer-link:hover:active {
  color: var(--white);
}