:root {
  --font-primary--family: "Work Sans", sans-serif;
  --font-primary--style: normal;
  --font-primary--weight: normal;
  --page-width: 90rem;
  --page-margin: 0px;
  --color-white: #ffffff;
  --color-black: #1e1e1e;
  --color-pink: #fe89e7;
  --color-dark-pink: #de0887;
  --color-green: #a2ff68;
  --style-border-radius-inputs: 5px;
  /* Units without px - used for sizing */
  --xxlarge: 96;
  --xlarge: 64;
  --large: 40;
  --medium: 32;
  --regular: 24;
  --small: 16;
  --xsmall: 12;
  --xxsmall: 8;
  --xxxsmall: 4;
  /* Transform px to rem */
  --base-font-size: 16; /* 16px - base font size */
  --px-to-rem: calc(1rem / var(--base-font-size));
}

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

html {
  scroll-behavior: smooth;

  &:has(dialog[scroll-lock][open], details[scroll-lock][open]) {
    overflow: hidden;
  }
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100svh;
}

html img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
textarea,
select {
  font: inherit;
  border-radius: var(--style-border-radius-inputs);
}

select {
  background-color: var(--color-black);
  color: currentcolor;
}

dialog {
  background-color: var(--color-black);
  color: var(--color-white);
}

p {
  text-wrap: pretty;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

p:empty {
  display: none;
}

:is(p, h1, h2, h3, h4, h5, h6):first-child,
:empty:first-child + :where(p, h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
}

:is(p, h1, h2, h3, h4, h5, h6):last-child,
:where(p, h1, h2, h3, h4, h5, h6) + :has(+ :empty:last-child) {
  margin-block-end: 0;
}

/** Theme styles below */
body {
  font-family: var(--font-primary--family);
  background-color: var(--color-black);
  color: var(--color-white);
}

section {
  display: flex;
  width: 100%;
}

/* Visually hidden elements */

.visually-hidden {
  display: none;
}

/* Buttons */
.button {
  display: inline-block;
  padding: calc(var(--xxsmall) * var(--px-to-rem))
    calc(var(--small) * var(--px-to-rem));
  border-radius: var(--style-border-radius-buttons);
  background-color: var(--color-white);
  color: var(--color-black);
  text-decoration: none;
  font-size: calc(var(--small) * var(--px-to-rem));
  font-weight: 600;
  border-radius: var(--style-border-radius-inputs);

  @media (min-width: 768px) {
    font-size: calc(var(--regular) * var(--px-to-rem));
  }

  &.button--pink {
    background-color: var(--color-pink);
    color: var(--color-black);
  }

  &.button--green {
    background-color: var(--color-green);
    color: var(--color-black);
  }
}

input {
  display: block;
  height: 50px;
  padding: 0 calc(var(--small) * var(--px-to-rem));
  border: 1px solid #ccc;
  font-size: calc(var(--small) * var(--px-to-rem));
  font-weight: 600;
  border-radius: var(--style-border-radius-inputs);
  color: var(--color-black);

  @media (min-width: 768px) {
    font-size: calc(var(--regular) * var(--px-to-rem));
  }
}