/* app/styles/style.css */
:root {
  --color-peach: #F0404E;
  --color-cream: #EEF3BF;
  --color-green: #3EF157;
  --color-blue: #0068ff;
  --color-black: #000000;
  --color-white: #f9f8f2;
  --color-gray: #91908b;
}
.scroller {
  background-color: #f9f8f2;
  color: #000;
}
.contact {
  color: #363636;
}
::selection {
  text-decoration: var(--color-blue);
  color: var(--color-blue);
  background: none;
}
.bottom-scroller {
  font-family:
    Arial Black,
    Arial,
    sans-serif;
  font-weight: 700;
}
menu a:hover {
  text-decoration: underline;
}
html,
body {
  background-color: #f9f8f2;
  font-family: Arial, sans-serif;
  color: #91908b;
}
.text-brand-cream {
  color: var(--color-cream);
}
.text-brand-blue {
  color: var(--color-blue);
}
.text-brand-peach {
  color: var(--color-peach);
}
.text-brand-green {
  color: var(--color-green);
}
.text-brand-gray {
  color: var(--color-gray);
}
.bg-brand-cream {
  background-color: var(--color-cream);
}
.bg-brand-blue {
  background-color: var(--color-blue);
}
.bg-brand-peach {
  background-color: var(--color-peach);
}
.bg-brand-green {
  background-color: var(--color-green);
}
.bg-brand-black {
  background-color: var(--color-black);
}
.contact a:hover {
  text-decoration: underline;
}
.hosst-translate-y {
  -ms-transform: translateY(50%);
  -webkit-transform: translateY(50%);
  -moz-transform: translateY(50%);
  -o-transform: translateY(50%);
}
.social-links a:hover {
  text-decoration: underline;
}
.social-links h2 {
  font-family: Arial, "sans-serif";
  font-size: 1.3em;
}
.contact-name {
  font-size: 1em;
}
@keyframes taadaa {
  0% {
    opacity: .8;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: .8;
  }
}
.loading-animation {
  animation: taadaa .3s infinite;
}
.safari-fix {
  max-height: 100vw;
}