@import url("https://fonts.googleapis.com/css2?family=DynaPuff&display=swap");

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  list-style: none;
  text-decoration: none;
  /* font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif; */
  /* font-family: "DynaPuff", cursive; */
}

:root {
  --color-primary: #ff7b02;
  /* --color-primary: #81393f; */
  --color-primary-variant: #e5a55d;
  --color-bg-1: #000e17;
  --color-bg-2: #001e2d;
  --color-bg-3: #012734;
  --color-bg-4: #85a2b2;
  --color-light: #85a2b2;
  --color-white: hsl(0, 0%, 90%);
  --font: "DynaPuff", cursive;

  --container-width-lg: 88%;
  --container-width-md: 95%;

  --transition: all 400ms ease;
}

/* html {
  scroll-behavior: smooth;
  user-select: none;
  background-image: url(../src/assets/bg-texture.png);
} */

body {
  line-height: 1.7;
}

h1,
h2 {
  line-height: 1.1;
  color: green;
  font-weight: bold;
}

h1 {
  font-size: 2rem;
  color: var(--color-white);
}

h2 {
  font-style: 3.5rem;
}

.btn-primary {
  color: white;
  background-color: var(--color-primary);
  padding: 1rem;
  font-weight: bold;
}

.btn-primary:hover {
  cursor: pointer;
  border: 0.5px solid var(--color-primary);
  color: var(--color-primary);
  background-color: transparent;
  font-weight: bold;
}

.btn-second {
  color: #333;
  background-color: lightgray;
  padding: 1rem;
}

.btn-second:hover {
  background: transparent;
  border: 1px solid var(--color-light);
}

a:hover {
  color: var(--color-primary-variant);
}

.container {
  width: var(--container-width-lg);
}

.emoji-width {
  width: 2rem;
  height: 2rem;
}

.titles {
  color: var(--color-primary);
  font-family: var(--font);
}

input,
textarea {
  font-family: var(--font);
}