* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}

body,
html {
  font-family: var(--body-font);
  width: 100%;
  height: 100%;
  overflow: hidden;
}

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

  min-width: 261px;
  /* min-width: max(calc(235 / 1920 * 100vw), 120px); */
  padding: 18px 24px;

  background-color: var(--white-color);
  border: 4px solid var(--black-color);
  outline: none;
  color: var(--black-color);

  font-family: var(--body-font);
  font-size: max(0.8333vw, 16px);
  font-style: italic;
  line-height: 120%;

  cursor: pointer;
  transform: var(--skew-btn);
  transition: background-color 0.3s;
}

.btn:hover {
  background-color: var(--main-color);
}

.btn > span {
  transform: var(--skew-btn-text);
}

input {
  outline: none;
  font-size: 16px;
  line-height: 150%;
  font-family: var(--body-font);
  letter-spacing: 0.02em;
  padding: 20px 14px;
  color: var(--black-color);
  width: 400px;
  height: 52px;
  border: 4px solid var(--black-color);
}

input::placeholder {
  color: var(--black-color);
  opacity: 0.7;
}