/* remove default settings*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

/* CSS variables */

:root {
  --ff: "Outfit", sans-serif;

  --primary-light-clr: hsl(0, 0%, 100%);
  --primary-dark-clr: hsl(212, 45%, 89%);
  --secondary-light-clr: hsl(216, 15%, 48%);
  --secondary-dark-clr: hsl(218, 44%, 22%);

  --fw-light: 400;
  --fw-bold: 700;

  --fs-heading: 22px;
  --fs-base: 15px;
}

/* global view */

/* layout */

body {
  display: grid;
  width: 100%;
  min-height: 100vh;
  place-items: center;
}

main {
  width: 22%;
  margin: auto;
}

img {
  margin: auto;
  width: 100%;
  display: block;
}

/* style */

body {
  background-color: var(--primary-dark-clr);
  font-family: var(--ff);
  font-optical-sizing: auto;
  font-style: normal;
}

main {
  background-color: var(--primary-light-clr);
  border-radius: 20px;
  padding: 16px 16px 40px 16px;
  border: solid 1px #000;
}

img {
  border-radius: 10px;
}

section {
  padding: 16px 0;
}

h1 {
  color: var(--secondary-dark-clr);
  text-align: center;
  font-size: var(--fs-heading);
  font-weight: var(--fw-bold);
  padding-bottom: 16px;
}

p {
  color: var(--secondary-light-clr);
  text-align: center;
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
}