:root {
  --primary-color: #04aa6d;
  --primary-hover-color: #45a049;
  --background-gradient: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  --font-family: Arial, Helvetica, sans-serif;
  --font-color: aliceblue;
  --padding: 40px;
}

body {
  background: var(--background-gradient);
  background-size: 400% 400%;
  animation: gradient 10s ease infinite;
  will-change: background-position;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

div.traits {
  padding: var(--padding);
}

div.traits > p {
  font-family:  var(--font-family);
  font-weight: bold;
  font-size: clamp(1.5rem, 9.011vw + -1.209rem, 6rem);
  line-height: clamp(2.25rem, 11.114vw + -1.091rem, 7.8rem);
  color: var(--font-color);
}

div.company {
  text-align: center;
  margin-top: 4em;
}

div.company > p {
  align-self: flex-end;
  font-family: var(--font-family);
  font-weight: lighter;
  font-size: clamp(0.625rem, 0.501vw + 0.474rem, 0.875rem);
  line-height: clamp(0.938rem, 0.401vw + 0.817rem, 1.138rem);
  color: var(--font-color);
}

div.contact {
  font-family: var(--font-family);
  font-size: 1.5em;
  font-weight: bold;
  border-radius: 20px;
  background-color: var(--font-color);
  padding: 20px;
}

input[type=text], input[type=email], textarea {
  font-family: inherit;
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

button#my-form-button {
  background-color: var(--primary-color);
  color: var(--font-color);
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button#my-form-button:hover {
  background-color: var(--primary-hover-color);
}
