planetposen/frontend/styles/global.scss

@import 'frontend/styles/variables';

@font-face {
  font-family: "Mabry";
  font-style: normal;
  font-weight: 400;
  src: url("assets/fonts/mabry/Mabry-Regular-Pro.woff") format("woff");
}

body {
  font-family: "Mabry", sans-serif; 
  background-color: #19171A;
  color: white;

  margin-bottom: 2rem;
}

h1,h2,h3,h4,h5 {
  margin: 0;
  padding: 0;
}

h1 {
  font-size: var(--text-xxl);

  @include mobile {
    font-size: var(--text-xl);
  }
}

h2 {
  font-size: var(--text-lg);

  @include mobile {
    font-size: var(--text-md);
  }
}
h3 {
  font-size: var(--text-lg);

  &.h3-alt {
    font-size: calc(0.785 * var(--text-lg));
  }
}



.flex {
  display: flex;
}

.justify-content-center {
  justify-content: center;
}

.align-items-center {
  align-items: center;
}

.flex-direction-column {
  display: flex;
  flex-direction: column;
}

.justify-around {
  display: flex;
  justify-content: space-around;
}

@include desktop {
  .mobile-only {
    display: none;
  }
}

@include mobile {
  .desktop-only {
    display: none;
  }
}

.col-wrap {
  padding-left: 120px;
  padding-right: 120px;

  @include tablet {
    padding: 0 48px;
  }

  @include mobile {
    padding-left: 12px;
    padding-right: 12px;
  }
}

.max-width {
  max-width: 1520px;
  margin: auto;
}

.top-show {
  box-sizing: border-box;
  padding-bottom: var(--space-xxl);
  padding-top: var(--space-xxxxl);

  &-sm {
    padding-top: var(--space-xxl);
  }

  @include mobile {
    padding-top: var(--space-xl);
  }
}


.page-header {
  @include mobile {
    margin-top: 2rem; 
  }
}



// Colors
.bg-green {
  background-color: var(--color-background-green);
}
.bg-pink {
  background-color: var(--color-background-pink);
}
.bg-yellow {
  background-color: var(--color-background-yellow);
}
.bg-blue {
  background-color: var(--color-background-blue);
}


.accent--xl {
    font-size:calc(1.375 * var(--text-base-size))
}

@media (max-width: 992px) {
    .accent--xl {
        font-size:calc(1.25 * var(--text-base-size))
    }
}

@media (max-width: 520px) {
    .accent--xl {
        font-size:calc(1.125 * var(--text-base-size))
    }
}

.accent--lg {
    font-size:calc(1.25 * var(--text-base-size))
}

@media (max-width: 992px) {
    .accent--lg {
        font-size:calc(1.125 * var(--text-base-size))
    }
}

.accent--md {
    font-size:calc(1.125 * var(--text-base-size))
}

@media (max-width: 992px) {
    .accent--md {
        font-size:calc(1 * var(--text-base-size))
    }
}