@font-face {
  font-weight: 300;
  font-style: normal;
  font-family: 'Roobert';
  src: url('https://assets.evervault.com/fonts/Roobert-Light.woff2')
      format('woff2'),
    url('https://assets.evervault.com/fonts/Roobert-Light.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-weight: 500;
  font-style: normal;
  font-family: 'Roobert';
  src: url('https://assets.evervault.com/fonts/Roobert-Medium.woff2')
      format('woff2'),
    url('https://assets.evervault.com/fonts/Roobert-Medium.woff') format('woff');
  font-display: swap;
}

:root {
  --primary: #63e;
  --secondary: #575772;
  --grey-00: #fff;
  --grey-20: #cad0db;
  --grey-40: #888fa8;
  --grey-60: #535366;
  --grey-80: #22222d;
  --grey-100: #070708;
  --colorNeutral200: #22222d;
  --spacingXsmall: 12px;
  --fontSizeXlarge: 24px;
  --system-fonts: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue';
}

html {
  background-color: var(--grey-100);
  font-family: 'Roobert', var(--system-fonts), sans-serif;
}

body {
  background-color: var(--grey-100);
  color: var(--grey-00);
  font-family: 'Roobert', var(--system-fonts), sans-serif;
}

#root > div:first-of-type {
  padding: 24px 26px !important;
}

body div {
  background-color: var(--grey-100) !important;
}

footer {
  display: none !important;
}

h2 {
  color: var(--grey-00);
}

p {
  font-weight: 300;
  font-size: 1.1rem;
}

button {
  font-family: 'Roobert', var(--system-fonts), sans-serif;
  background: var(--primary) !important;
  color: vaR(--grey-00) !important;
  border-radius: 2rem !important;
  text-decoration: none !important;
}

button svg {
  fill: var(--grey-00) !important;
}

button:hover {
  background: #502bb4 !important;
}

a:hover {
  color: inherit !important;
}

label {
  color: var(--grey-00) !important;
  font-weight: 300 !important;
  letter-spacing: 0.25px !important;
}

label + div {
  border: 1px var(--grey-60) solid !important;
  border-radius: 10px !important;
}

nav {
  background: var(--grey-100) !important;
}

input {
  color: var(--grey-00) !important;
  font-family: 'Roobert', var(--system-fonts), sans-serif !important;
  font-weight: 300 !important;
  border: 1px var(--grey-60) solid !important;
  padding: 0.8rem 1rem !important;
}

input:focus {
  border: 1px var(--grey-20) solid !important;
}

textarea {
  color: var(--grey-00) !important;
  font-family: 'Roobert', var(--system-fonts), sans-serif !important;
  font-weight: 300 !important;
  border: 1px var(--grey-60) solid !important;
  padding: 0.8rem 1rem !important;
}

textarea:focus {
  border: 1px var(--grey-20) solid !important;
}

.ashby-job-board-heading {
  background: transparent;
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--grey-00);
}

.ashby-department-heading {
  font-size: 1.6rem;
  position: relative;
}

.ashby-department-heading::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background: var(--grey-80);
  bottom: -16px;
  left: 0;
}

.ashby-job-posting-brief {
  background: transparent;
  transition: 0.25s;
}

.ashby-job-posting-brief h3,
.ashby-job-posting-brief p {
  transition: 0.25s;
}

.ashby-job-posting-brief:hover h3,
.ashby-job-posting-brief:hover p {
  opacity: 0.6;
}

.ashby-job-posting-brief-title {
  color: var(--grey-00);
}

.ashby-job-posting-brief-details {
  color: var(--grey-40);
  font-weight: 300;
  letter-spacing: 0.4px;
}

.ashby-job-board-filter {
  background: transparent;
  border: 1px var(--grey-60) solid;
  font-weight: 300;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  border-radius: 2rem;
  cursor: pointer;
  transition: 0.25s;
}

.ashby-job-board-filter:focus {
  font-size: 0.9rem;
}

.ashby-job-board-filter:focus-visible {
  box-shadow: none;
}

.ashby-job-board-filter:hover {
  background: var(--grey-80);
}

.ashby-job-board-filter + div {
  transform: scale(0.6);
  background: transparent !important;
}

.ashby-job-posting-heading {
  color: var(--grey-00) !important;
  padding: 2rem 0 1rem 0 !important;
  font-size: 1.8rem;
  font-weight: 500;
}

button[class*='_filtersAction'] {
  background: transparent !important;
}

@media only screen and (max-width: 768px) {
  nav {
    margin: 0 12px !important;
  }
}