@font-face {
  font-family: "FredokaOne";
  src: url("../../resources/fonts/FredokaOne-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "Aleo";
  src: url("../../resources/fonts/Aleo-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: bold;
}
@font-face {
  font-family: "Aleo";
  src: url("../../resources/fonts/Aleo-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "Aleo";
  src: url("../../resources/fonts/Aleo-Light.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
}
:root {
  --color_01_pink: rgb(243, 205, 226);
  --color_02_green: rgb(41, 61, 39);
  --color_02_1_green: rgb(0, 155, 121);
  --color_03_red: rgb(235, 40, 35);
  --color_04_yellow: rgb(251, 189, 20);
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Aleo", arial, sans-serif;
  line-height: 1;
  margin: 0;
  padding: 0;
}

p, a, h1, h2, h3, h4, h5, h6, input, textarea, label {
  color: var(--color_02_green);
}

p, input, textarea, label {
  font-family: "Aleo";
  font-size: 1.2rem;
  font-weight: normal;
}

h1 {
  font-family: "FredokaOne";
  font-size: 6.35rem;
}

h2 {
  font-weight: 300;
  font-size: 3rem;
}

h3 {
  font-family: "FredokaOne";
  font-size: 2rem;
  font-weight: bold;
  color: var(--color_01_pink);
}

h4 {
  font-size: 1.8rem;
  font-weight: bold;
}

h5 {
  font-size: 1.2rem;
  font-weight: bold;
}

h6 {
  font-size: 1.6rem;
  font-weight: normal;
}

ul, ol, li {
  border: 0;
  list-style-type: none;
}

img {
  border-style: none;
}

a {
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  color: rgb(20, 20, 20);
}
a:hover {
  color: var(--color_01_pink);
}

button {
  width: 360px;
  height: 100px;
  border-radius: 100px;
  border-style: none;
  font-family: "Aleo";
  font-weight: bolder;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

/*BUTTONS*/
.button_pop_01 {
  border: 3px solid var(--color_02_green);
  -webkit-transition: -webkit-filter 400ms, -webkit-box-shadow 400ms;
  transition: -webkit-filter 400ms, -webkit-box-shadow 400ms;
  transition: filter 400ms, box-shadow 400ms;
  transition: filter 400ms, box-shadow 400ms, -webkit-filter 400ms, -webkit-box-shadow 400ms;
  color: var(--color_02_green);
  background-color: rgba(0, 0, 0, 0);
}
.button_pop_01:hover {
  -webkit-filter: drop-shadow(5px 5px 0px var(--color_03_red));
          filter: drop-shadow(5px 5px 0px var(--color_03_red));
}

.button_pop_02 {
  border: none;
  -webkit-transition: -webkit-filter 400ms, -webkit-box-shadow 400ms;
  transition: -webkit-filter 400ms, -webkit-box-shadow 400ms;
  transition: filter 400ms, box-shadow 400ms;
  transition: filter 400ms, box-shadow 400ms, -webkit-filter 400ms, -webkit-box-shadow 400ms;
  color: var(--color_01_pink);
  background-color: var(--color_02_green);
}
.button_pop_02:hover {
  -webkit-box-shadow: 5px 5px 0px var(--color_03_red);
          box-shadow: 5px 5px 0px var(--color_03_red);
}

/* ANIMATIONS APPEARS */
.anim_appear {
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
  opacity: 0;
}

.anim_up {
  -webkit-transition: opacity ease-out 1800ms, -webkit-transform ease-out 1800ms, -webkit-filter 400ms, -webkit-box-shadow 400ms;
  transition: opacity ease-out 1800ms, -webkit-transform ease-out 1800ms, -webkit-filter 400ms, -webkit-box-shadow 400ms;
  transition: opacity ease-out 1800ms, transform ease-out 1800ms, filter 400ms, box-shadow 400ms;
  transition: opacity ease-out 1800ms, transform ease-out 1800ms, filter 400ms, box-shadow 400ms, -webkit-transform ease-out 1800ms, -webkit-filter 400ms, -webkit-box-shadow 400ms;
  opacity: 100;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}/*# sourceMappingURL=style.css.map */