$breakpoints: (phone: 480px,
  tablet: 768px,
  desktop: 1024px) !default;

[hidden],
.hidden {
  display: none !important;
}

:root {
  font-size: 10px;
  font-family: Open Sans, sans-serif;
  --sib-notifications-theme: #{$color-46-100-50};

  body {
    background-color: $color-210-25-95;
    color: $color-213-4-50;
    font-size: 1.6rem;
    overflow: hidden;
    overflow-wrap: break-word;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
  }
}

img {
  max-height: 100%;
  max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: $color-216-4-22;
  font-weight: 600;
  padding: 0;

  span {
    font-weight: 400;
    padding-left: 0.85rem;

    &:before {
      content: '// ';
    }
  }
}

h1 {
  font-size: 2.1rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.6rem;
}

h4 {
  font-size: 1.2rem;
}

h5 {
  font-size: 2rem;
}

button {
  background: none;
  border: none;
  padding: 0;
}

%padding-main {
  padding: 5rem;
}

.padded-width {
  flex: 1;
  @extend %padding-main;
}

.frame {
  @include window-style-modal();
  @extend %padding-main;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: 2rem 1rem 5rem 2rem;
}

/* Dividing into columns */
@mixin respond-to($breakpoint) {

  @if map-has-key($breakpoints, $breakpoint) {

    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  }

  @else {
    @warn "Sorry, no value could be retrieved from `#{$breakpoint}`."
    +"Available breakpoints are: #{map-keys($breakpoints)}.";
  }
}

// Compatibility layer for non-updated components
@import 'compat';