/* Colors
-------------------------------------------------- */
:root {
  --dark: 34, 34, 34;
  --light: 236, 231, 225;
  --accent: 239, 0, 56; }

svg {
  --dark-hex: #222222;
  --light-hex: #ECE7E1;
  --accent-hex: #ff00ff; }

/* Home
-------------------------------------------------- */
.intro {
  height: 40vh;
  width: 100vw;
  background-size: cover;
  background-position: top center; }

main {
  position: relative; }

.slogan {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100vw;
  height: 40vh;
  font-size: 20vw;
  font-style: italic;
  text-shadow: 1px 1px 25px #222; }

@media screen and (min-width: 40rem) {
  .intro {
    height: calc(100vh - 150px); }
  .slogan {
    height: calc(100vh - 150px);
    font-size: 15vw; } }

.slogan a {
  color: #EF0038;
  color: rgba(var(--accent), 1);
  border: none; }

.typewrite > .wrap {
  border-right: 0.05em solid #EF0038;
  border-right: 0.05em solid var(--accent);
  -webkit-animation: blink-caret 1s step-end infinite;
          animation: blink-caret 1s step-end infinite;
  padding-right: 0.1em;
  padding-bottom: 0.1em; }

/* The typewriter cursor effect */
@-webkit-keyframes blink-caret {
  from, to {
    border-color: #EF0038;
    border-color: rgba(var(--accent), 1); }
  50% {
    border-color: transparent; } }
@keyframes blink-caret {
  from, to {
    border-color: #EF0038;
    border-color: rgba(var(--accent), 1); }
  50% {
    border-color: transparent; } }

/* Section Styles
-------------------------------------------------- */
main section {
  font-size: 1.4rem;
  line-height: 1.5; }

main .content {
  padding-top: 0;
  margin: 0 auto; }

.content > section {
  padding-top: 3rem;
  padding-bottom: 3rem; }

@media screen and (min-width: 40rem) {
  main section {
    font-size: 1.8rem;
    line-height: 1.5; }
  .content > section {
    padding-top: 6rem;
    padding-bottom: 6rem; } }

section.akzent {
  background-color: #EF0038;
  background-color: rgba(var(--accent), 1);
  color: #ECE7E1;
  color: rgba(var(--light), 1); }

section.black {
  background-color: #222222;
  background-color: rgba(var(--dark), 1);
  color: #ECE7E1;
  color: rgba(var(--light), 1);
  font-weight: 200; }

section.home-font-feature h2 {
  font-weight: normal;
  text-transform: none;
  padding-bottom: 0.2em;
  border-bottom: 2px solid #EF0038;
  border-bottom: 2px solid rgba(var(--accent), 1); }

section.topic-feature > h2 {
  text-transform: none;
  padding-bottom: 0.2em;
  border-bottom: 2px solid #222222;
  border-bottom: 2px solid rgba(var(--dark), 1); }

ul.home-font-feature-list {
  margin: 2rem 0;
  list-style: none;
  display: grid; }

ul.home-font-feature-list li {
  margin: 0.5rem 0; }

.home-font-feature .best-of-2021-fs svg {
  width: 3rem;
  margin-right: 1rem;
  float: left;
  transform: translateY(-1rem); }

.home-font-feature p {
  font-size: 1rem;
  color: rgba(236, 231, 225, 0.6);
  color: rgba(var(--light), 0.6); }

.home-font-feature a {
  color: #ece7e1;
  color: rgba(var(--light), 1); }

.home-font-feature a:hover {
  color: #ef0038;
  color: rgba(var(--accent), 1); }

.home-font-feature img {
  -webkit-filter: grayscale(100%) contrast(1.3) brightness(1.5);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%) contrast(1.3) brightness(1.5); }

.home-font-feature img:hover {
  -webkit-filter: none;
  /* Safari 6.0 - 9.0 */
  filter: none; }

@media screen and (min-width: 40rem) {
  ul.home-font-feature-list {
    margin: 4rem 0;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 1rem; }
  .home-font-feature .inner {
    padding: 0 1.5rem 1rem 1.5rem; }
  .home-font-feature .best-of-2021-fs svg {
    transform: translateY(-2rem); } }
/*# sourceMappingURL=home.css.map */