/* CSS Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html,
body {
  height: 100%;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
input,
button,
textarea,
select {
  font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
#root,
#__next {
  isolation: isolate;
}

/* Page styles */

:root {
  --color-primary: hsl(143, 53%, 43%);
  --color-white: white;
  --color-bg: var(--color-white);
  --color-text: black;
  --spacer: 12px;
  --spacer-small: calc(var(--spacer) * 0.5);
  --spacer-large: calc(var(--spacer) * 2);
  --font-family: Arial, sans-serif;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  display: grid;
  font-family: var(--font-family);
  justify-content: center;
}

main {
  margin: calc(var(--spacer) * 3) var(--spacer) 0 var(--spacer);
  max-width: 600px;
  display: flex;
  flex-direction: column;
  row-gap: var(--spacer-large);
}

h1 {
  font-size: clamp(2rem, 4vw + 1rem, 4rem);
}

p {
  font-size: clamp(1rem, 1vw + 0.5rem, 2rem);
}

.logo {
  max-width: 200px;
}

.logo img {
  width: 100%;
}

.img-code {
  border: var(--spacer) solid var(--color-text);
}