:root {
  font-size: $root-font-size;
}

body {
  font-family: 'Rubik', sans-serif;
  color: $mine-shaft;
  background-color: $alabaster;

  &.lock-body-scroll {
    overflow: hidden;
  }
}

button {
  display: inline-block;
  border: none;
  padding: 0;
  margin: 0;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
}

input {
  width: 100%;
  color: $mine-shaft;
  border-radius: 5px;
  border: 1px solid $mine-shaft;
  @include rem-calc(height, 50px);
  @include rem-calc(padding-left, 16px);
}

textarea {
  resize: none;
  border: 1px solid $mine-shaft;
}

textarea:focus,
input:focus,
button:focus{
  outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: $font-light;
  margin: 0;
}

h1 {
  @include rem-calc(font-size, 64px);
  @include rem-calc(margin-bottom, 30px);
  line-height: 1.2;
}

h2 {
  @include rem-calc(font-size, 28px);
  @include rem-calc(margin-bottom, 30px);
}

h3 {
  @include rem-calc(font-size, 21px);
  @include rem-calc(margin-bottom, 30px);
}

h4 {
  @include rem-calc(font-size, 18px);
  @include rem-calc(margin-bottom, 30px);
  font-weight: 500;
}

h5 {
  font-weight: 400;
}

h6 {
  @include rem-calc(font-size, 14px);
  @include rem-calc(margin-bottom, 20px);
}

p {
  @include rem-calc(font-size, 15px);
}

label {
  @include rem-calc(font-size, 16px);  
}

strong {
  font-weight: 800;
}