/*------------------------------------------------------------------
[Table of contents]

1. Imports & Reset
2. Variables
3. Base Elements
4. Typography & Fonts
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
1. Imports & Reset
-------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&family=Roboto:wght@300;400;700&display=swap");

/*------------------------------------------------------------------
2. Variables
-------------------------------------------------------------------*/
:root {
  --primary-orange: #ec5501;
  --primary-orange-hover: #d14a00;
  --bg-main: #f1ece7;
  --border-grey: #b3b3b3;
  --accent-teal: #1299ad;
  --focus-blue: #4a90e2;
}

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

/*------------------------------------------------------------------
3. Base Elements
-------------------------------------------------------------------*/
html,
body {
  margin: 0px;
  min-height: 100vh;
  background-color: var(--bg-main);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* a blue color as a generic focus style */
button:focus-visible {
  outline: 2px solid var(--focus-blue) !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}

a {
  text-decoration: none;
}

/*------------------------------------------------------------------
4. Typography & Fonts
-------------------------------------------------------------------*/
@font-face {
  font-family: "BBH Bartle-Regular";
  src: url("../../fonts/BBHBartle-Regular.ttf") format("truetype"), local("BBH Bartle-Regular");
}

@font-face {
  font-family: "Signatra";
  src: url("../../fonts/Signatra.ttf") format("truetype");
}