$lines: solid 1px rgba(0, 0, 0, 0.2);
$background-dark: rgb(0, 0, 0);
$backgorund-light: rgb(255, 255, 255);
$break-small: 480px;
$break-macbook: 1200px;
$break-large: 1200px;


/*
@font-face {
    font-family: 'Arapey';
    src: url('/_assets/fonts/arapey/arapey-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
*/

@font-face {
    font-family: 'Printhouse';
    src: url('/_assets/fonts/printhouse/printhouse.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@mixin breakpoint($point) {
    @if $point==desktop {
        @media (min-width: 70em) {
            @content ;
        }
    }
    @else if $point==laptop {
        @media (min-width: 64em) {
            @content ;
        }
    }
    @else if $point==tablet {
        @media (min-width: 50em) {
            @content ;
        }
    }
    @else if $point==phablet {
        @media (min-width: 37.5em) {
            @content ;
        }
    }
    @else if $point==mobileonly {
        @media (max-width: 37.5em) {
            @content ;
        }
    }
}

@function set-notification-text-color($color) {
    @if (lightness($color) > 50) {
        @return #000000; // Lighter backgorund, return dark color
    }
    @else {
        @return #ffffff; // Darker background, return light color
    }
}

@media (min-aspect-ratio: 16/9) {
    .fullscreen-bg__video {
        width: 100%;
        height: auto;
    }
}

@media (max-aspect-ratio: 16/9) {
    .fullscreen-bg__video {
        width: auto;
        height: 100%;
    }
}

@mixin clearfix() {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

@mixin centerer() {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@mixin vertcenterer() {
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
}

@mixin horizcenterer() {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
}

@mixin aspect-ratio($width, $height) {
    position: relative;
    &:before {
        display: block;
        content: "";
        width: 100%;
        padding-top: ($height / $width) * 100%;
    }
    > div.content, > img, div.video {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

@mixin image-2x($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    /* on retina, use image that's scaled by 2 */
    background-image: url($image);
    background-size: $width $height;
  }
}

@mixin font-size($fs-map) {
  @each $fs-breakpoint, $fs-font-size in $fs-map {
    @if $fs-breakpoint == null {
      font-size: $fs-font-size;
    }
    @else {
      @media screen and (min-width: $fs-breakpoint) {
        font-size: $fs-font-size;
      }
    }
  }
}

@mixin line-height($fs-map) {
  @each $fs-breakpoint, $fs-font-size in $fs-map {
    @if $fs-breakpoint == null {
      font-size: $fs-font-size;
    }
    @else {
      @media screen and (min-width: $fs-breakpoint) {
        font-size: $fs-font-size;
      }
    }
  }
}