@import url(reset.css);
@import url(font.css);

:root {
   --yellow-colour: hsl(47 99 51 / 100);
   --orange-colour: hsl(24 98 50 / 100);
   --red-colour: hsl(346 98 51 / 100);
   --purple-colour: hsl(239 100 76 / 100);
   --blue-colour: hsl(204 90 54 / 100);
   --green-colour: hsl(146 99 43 / 100);
   --white: hsl(35 74 95 / 100);
   --gray-dark: hsl(300 13 19 / 100);
   --gray-darkest: hsl(300 13 15 / 100);

   --fontsize-h1: clamp(2.4rem, 8vw, 5rem);
}

body {
   font-family: "NunitoSemibold";
   color: var(--gray-dark);
   background-color: var(--yellow-colour);
}

div.sitebox {
   max-width: 760px;
   margin: 0 auto;
   height: 100dvh;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

header {
   padding: 14px 14px 0;
   text-align: center;
}

.header-logo img {
   max-width: 348px;
   margin: 88px 0 48px;
}

main {
   text-align: center;
}
main > img {
   margin-top: 20px;
   width: 280px;
   margin-bottom: 48px;
}

h1 {
   font-size: clamp(3rem, 5.5vw, 3.5rem);
   font-family: "NunitoBlack";
   letter-spacing: 0.5;
   margin-top: 60px;
}

footer {
   font-size: 0.9rem;
   text-align: center;
   line-height: 1.2rem;
   padding: 14px 0 80px;
   margin-top: 48px;
}

footer p {
   margin: 16px 0 24px;
   opacity: 0.8;
}