/* Global styles  */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  src: url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
  font-display: swap;
}
:root {
  --cokelat: #3a1111;
  --yellow: #f9fe00;
  --orange: #ffd600;
  --light-grey: #fafafa;
  --body-bg-col: rgb(248, 248, 248);
}

body {
  color: black;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--body-bg-col);
}

.defaultButton {
  /* text-transform: uppercase; */
  font-family: inherit;
  font-size: 20px;
  font-weight: 500;
  background-color: var(--cokelat);
  color: white;
  height: 50px;
  width: 200px;
  display: grid;
  place-items: center;
  border-radius: 20px;
}

.defaultButton:hover {
  opacity: 0.8;
  background-color: var(--cokelat);
}

.defaultH1 {
  line-height: 70px;
  font-size: 50px;
  color: var(--cokelat);
  font-weight: 700;
  margin-bottom: 25px;
}

@media screen and (max-width: 500px) {
  .defaultButton {
    width: 50%;
    font-size: 16px;
    min-width: 90px;
  }

  .defaultH1 {
    line-height: 50px;
    font-size: 30px;
    color: var(--cokelat);
    font-weight: 700;
    margin-bottom: 25px;
  }
}
