/**/
/**/
/**/
/**/
@font-face {
  font-family: Marker;
  src: url(../fonts/PermanentMarker-Regular.ttf);
}
@font-face {
  font-family: Merienda;
  src: url(../fonts/Merienda-VariableFont_wght.ttf);
}
body {
  box-sizing: border-box;
  margin: 0;
  font-family: Merienda, Arial, Helvetica, sans-serif;
}

h2 {
  font-size: 1.3em;
}

h2, h3, p {
  margin: 0px 0px 7px 0px;
}

p {
  font-size: 1em;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-box {
  color: rgb(35, 35, 35);
  position: relative;
  padding: 15px;
  max-width: 500px;
}

.text-box {
  padding: 20px;
  border-radius: 20px;
  margin-bottom: 20px;
  position: relative;
  background: transparent;
}

.text-box::before {
  content: "";
  position: absolute;
  width: 95%;
  height: 95%;
  border-radius: 15px;
  background-image: linear-gradient(to bottom right, rgb(202, 234, 255), lightskyblue);
  background-size: 100% 100%;
  transform: rotate(3deg) skew(2deg, -2deg);
  z-index: -1;
  top: 5px;
  left: 8px;
  box-shadow: 8px 15px rgb(16, 114, 155), -8px -4px rgb(13, 81, 126);
}

.green::before {
  background-image: linear-gradient(to bottom right, rgb(239, 255, 236), rgb(142, 231, 156));
  box-shadow: 8px 15px rgb(16, 155, 44), -8px -4px rgb(11, 108, 14);
  transform: rotate(-1deg) skew(2deg, -2deg);
}

.lila::before {
  background-image: linear-gradient(to bottom right, rgb(254, 227, 255), rgb(233, 185, 254));
  box-shadow: 8px 15px rgb(122, 51, 176), -8px -4px rgb(100, 12, 132);
  transform: rotate(4deg) skew(4deg, -2deg);
}

.orange::before {
  background-image: linear-gradient(to bottom right, rgb(255, 246, 227), rgb(255, 218, 186));
  box-shadow: 8px 15px rgb(255, 183, 82), -8px -4px rgb(255, 153, 0);
  transform: rotate(-1deg) skew(2deg, -2deg);
}

li {
  list-style-type: none;
}

#answers {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

button {
  background-color: #0167ab;
  border-radius: 15px;
  color: white;
  font-family: Merienda, Arial, Helvetica, sans-serif;
  padding: 10px;
  font-size: 1em;
  margin: 10px;
}

.btn0 {
  transform: rotate(-1deg);
}

.btn1 {
  transform: rotate(5deg);
}

.btn2 {
  transform: rotate(-2deg);
}

.text-box > button {
  text-align: center;
}

.page-style {
  text-align: center;
}

#kromi {
  position: relative;
  top: -30px;
  right: -30px;
  float: right;
  margin: 0px 0px -25px -25px;
  width: 150px;
}/*# sourceMappingURL=style.css.map */