@font-face {
  font-family: Humble Nostalgia;
  font-weight: 400;
  src: url('../assets/fonts/humble-nostalgia-regular.otf') format('opentype');
  font-display: swap;
}

@font-face {
  font-family: Brandon Grotesque;
  font-weight: 300;
  src: url('../assets/fonts/brandon-grotesque-light.otf') format('opentype');
  font-display: swap;
}

@font-face {
  font-family: Brandon Grotesque;
  font-weight: 400;
  src: url('../assets/fonts/brandon-grotesque-regular.otf') format('opentype');
  font-display: swap;
}

@font-face {
  font-family: Brandon Grotesque;
  font-weight: 500;
  src: url('../assets/fonts/brandon-grotesque-bold.otf') format('opentype');
  font-display: swap;
}

:root {
  --pears-grey: #303030;
  --pears-green: #BADE5B;
  --pears-black: #050B06;
  --pears-white: #F6F6F6;
  --pears-light-grey: #BABABA;
}

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  height: -webkit-fill-available;
  scroll-behavior: smooth;
}

body {
  background-color: #fff;
  margin: 0;
  padding: 0;
  transition: opacity ease-out 400ms;
}

html,
body {
  min-height: 100vh;
}

h1,
h2 {
  font-family: Humble Nostalgia, serif;
  font-weight: 400;
}

body,
p {
  font-family: Brandon Grotesque, serif;
}

button:focus,
a:focus {
  outline: none;
}

.custom-checkbox {
  position: relative;
}

.custom-checkbox input[type="checkbox"] {
  display: none;
}

.custom-checkbox div.checkbox {
  width: 25px;
  height: 25px;
  background-color: var(--pears-light-grey);
  border-radius: 50%;
  cursor: pointer;
}

.custom-checkbox input[type="checkbox"]:checked + div.checkbox {
  background-color: var(--pears-green);
}

.custom-checkbox input[type="checkbox"]:disabled + div.checkbox {
  background-color: var(--pears-light-grey) !important;
  cursor: not-allowed;
}

.custom-checkbox .tick-icon {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 7px;
  background-image: url('../assets/images/checked.svg');
  background-size: cover;
  pointer-events: none;
}

.custom-checkbox input[type="checkbox"]:checked + div.checkbox + .tick-icon {
  display: block;
}