/* Shared styles */
@import "./reset.css";
@import "./shared-base.css";
@import "./shared-large.css";
@import "./type.css";

body {
  background: rgb(33, 33, 33);
  -webkit-font-smoothing: antialiased;
}

/* Shared */

.bg-white {
  background: #ffffff;
}
.bg-off-white {
  background: var(--bg-off-white);
}
.bg-cream {
  background: var(--bg-cream);
}

.bg-type {
  background: #ffffff;
}

.bg-riso-red {
  background: var(--bg-red);
}
.bg-orange-red {
  background: #f39369;
}

.bg-riso-yellow {
  background: var(--bg-yellow);
}

.bg-facedock {
  background: var(--bg-facedock);
}
.bg-yellow {
  background: var(--bg-yellow);
}

.text-brown {
  color: var(--text-brown);
}

section {
  letter-spacing: -0.02rem;
  padding: 3rem 0;
}

section-content {
  opacity: 0;
  transition: opacity 0.75s linear;
}

section-content.visible {
  opacity: 1;
}

@media only screen and (min-width: 480px) {
  section {
    padding: 6rem 0;
  }
}

.stroke-button,
button.stroke-button {
  background: transparent;
  border-radius: 20px;
  border-width: 3px;
  border-color: black;
  border-style: solid;
  padding: 0.69rem 1.5rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-decoration: none;
  color: black;
}

.stroke-button:hover {
  background: var(--bg-white);
  color: white;
  cursor: pointer;
}