:root {
  /* Fonts */
  /* Regular */
  font-family: "poppins", sans-serif;
  font-weight: 400;
  font-style: normal;

  font-family: "poppins", sans-serif;
  font-weight: 400;
  font-style: italic;

  /* Medium */
  font-family: "poppins", sans-serif;
  font-weight: 500;
  font-style: normal;

  /* Bold */
  font-family: "poppins", sans-serif;
  font-weight: 700;
  font-style: normal;

  font-family: "poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
  /* Extrabold */
  font-family: "poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
  /* Black */
  font-family: "poppins", sans-serif;
  font-weight: 900;
  font-style: normal;

  /* Font Size */
  --font-size-s: 0.9rem;
  --font-size-n: 1rem;
  --font-size-m: 1.12rem;
  --font-size-l: 1.5rem;
  --font-size-xl: 2rem;
  --font-size-xxl: 2.3rem;

  /* Border Radius */
  --border-radius-s: 8px;
  --border-radius-m: 30px;

  /* Colors */
  --strawberry-red: #fb3640ff;
  --muted-teal: #7a9e7eff;
  --white-smoke: #f4f2f3ff;
  --deep-mocha: #362c28ff;
  --turf-green: #04724dff;

  /* Site max-width */
  --site-max-width: 1300px;

  /* Line height Body */
  --line-height-body: 1.5;

}

html,
body {
  width: 500px;
  margin: 0 auto;
  padding: 50px;
  font-family: "poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  scroll-behavior: smooth;
  background-image: url("../images/bg/bg-02.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

a {
  text-decoration: none;
  cursor: pointer;
}

img {
  width: 100%;
}

form {
  color: var(--deep-mocha);
  padding: 1rem 2rem 2rem 2rem;
  justify-content: space-between;
  background-color: var(--white-smoke);
  border-radius: 16px;
  box-shadow: 0 4px 30px var(--muted-teal);
}

.elem-group {
  margin: 20px 0;
}

.elem-group.inlined {
  width: 49%;
  display: inline-block;
}

label {
  display: block;
  padding-bottom: 10px;
  font-size: 1.25em;
}

input,
select,
textarea {
  border-radius: 2px;
  border: 2px solid #777;
  box-sizing: border-box;
  font-size: 1.25em;
  width: 100%;
  padding: 10px;
}

.elem-group.inlined input {
  width: 95%;
  display: inline-block;
}

textarea {
  height: 250px;
}

hr {
  border: 1px dotted #ccc;
}

button {
  height: 50px;
  background: var(--strawberry-red);
  border: none;
  font-size: 1.25em;
  border-radius: 4px;
  cursor: pointer;
}