/* NOTE: NEVER USE PX! Use REM (default), EM (borders/margins/paddings/sub-elements), or % (mobile). */

@font-face {
    font-family: 'ChakraPetch';
    font-weight: normal;
    src: url('assets/fonts/chakrapetch-regular-webfont.woff');
    display: block
}

@font-face {
    font-family: 'ChakraPetch';
    font-weight: bold;
    src: url('assets/fonts/ChakraPetch-Bold.woff');
    display: block
}

body {
  background-color: #ff9955;
}

p {
  font-family: 'ChakraPetch', Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 1.5rem;
  color: black;
}

.button {
  font-family: 'ChakraPetch', Arial, sans-serif;
  border: none;
  color: white;
  padding: 0.5em 0.5em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.5rem;
  margin: 0.5em 0.5em;
  cursor: pointer;
}

.button1 {
  background-color: #ff9955; 
  color: black; 
  border: 0.5em solid #0044aa;
}

.button1:hover {
  background-color: #0044aa;
  color: white;
}

.button2 {
  background-color: #ff9955; 
  color: black; 
  border: 0.5em solid #000000;
}

.button2:hover {
  background-color: #000000;
  color: white;
}