Base Styles

base.scss

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: system, -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
  'Segoe UI', Arial, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
  text-decoration-skip-ink: auto;
}

button {
  border: 0;
  outline: 0;
  cursor: pointer;
}

ul,
ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

img {
  width: 100%;
  max-width: 100%;
  vertical-align: middle;
}

@mixin outline {
  outline: 1px solid red;
}

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin flex-between {
  display: flex;
  justify-content: space-between;
}

@mixin background($imgpath, $position:center, $repeat:no-repeat, $size:contain) {
  background: {
    image: url($imgpath);
    position: $position;
    repeat: $repeat;
    size: $size;
  }
}

@mixin smallerThan1440 {
  @media screen and (max-width: 1440px) {
    @content;
  }
}

@mixin smallerThan1280 {
  @media screen and (max-width: 1280px) {
    @content;
  }
}

@mixin smallerThan1024 {
  @media screen and (max-width: 1024px) {
    @content;
  }
}

@mixin smallerThan850 {
  @media screen and (max-width: 850px) {
    @content;
  }
}

@mixin smallerThan768 {
  @media screen and (max-width: 768px) {
    @content;
  }
}

@mixin smallerThan630 {
  @media screen and (max-width: 630px) {
    @content;
  }
}

@mixin smallerThan550 {
  @media screen and (max-width: 550px) {
    @content;
  }
}

@mixin smallerThan480 {
  @media screen and (max-width: 480px) {
    @content;
  }
}

@mixin smallerThan360 {
  @media screen and (max-width: 360px) {
    @content;
  }
}

@mixin smallerThan330 {
  @media screen and (max-width: 330px) {
    @content;
  }
}