@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Medium.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

html {
  color: $color-white;
  font-size: $font-size-5;
  box-sizing: border-box;
}

body {
  // The UI is 100% height so prevent bounce scroll on OSX
  overflow: hidden;
}

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

p {
  font-size: $font-size-6;
  margin-top: $margin-2;
  margin-bottom: $margin-2;
  color: $color-lowgray;
  line-height: 1.3;
}

h1 {
  font-size: $font-size-2;
  margin-bottom: $margin-3;
  font-weight: bold;
}

h2 {
  font-size: $font-size-3;
  margin-bottom: $margin-3;
  font-weight: bold;
}

h3 {
  font-size: $font-size-4;
  margin-bottom: $margin-3;
  font-weight: bold;
}

h4 {
  font-size: $font-size-5;
  margin-bottom: $margin-3;
}

input:focus,
select:focus {
  color: $color-white !important;
  outline: #8e8e8e auto 1px !important;
}

label:hover {
  color: $color-white;
}

.clearfix {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

a {
  color: white;
}

.hide {
  display: none !important;
}