:root {
    --border-radius: 5px;
    --color-background: hsl(199 36% 35%);
    --color-background-white: hsl(0 0% 100%);
    --color-background-lighter: hsl(199 36% 45%);
    --color-background-darker: hsl(199 36% 15% / 0.5);
    --color-border: hsl(199 36% 45%);
    --color-dark: hsl(201 78% 13%);
    --color-text-dark: hsl(201 78% 13%);
    --color-text: hsl(199 36% 45%);
    --color-light: hsl(0 0% 100%);
    --color-neutral: hsl(168 76% 42%);
    --color-active: hsl(168 76% 42%);
    --color-disabled: hsl(0 0% 50%);
    --color-ochin-green: hsl(67 76% 52%);
    --color-text-web-tools: hsl(199 36% 85%);
    --font-size: calc(1rem * (14 / 16));
    --toolbar-button-padding: 8px 14px;
}

@font-face {
    font-family: "Open Sans";
    src: url("font/OpenSans-Regular.woff2");
}

@font-face {
    font-family: "Open Sans Bold";
    src: url("font/OpenSans-Bold.woff2");
}

@font-face {
    font-family: "Open Sans Light";
    src: url("font/OpenSans-Light.woff2");
}

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

body {
    background-color: var(--color-background-white);
    font-family: "Open Sans";
}

hgroup {
    align-items: center;
    background-color: var(--color-background-lighter);
    display: flex;
    flex-direction: column;
    padding: 20px;
}

hgroup>a {
  background-color: hsl(16,88%,54%);
  border-color: hsl(16,70%,54%);
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  left: 80px;
  color: hsl(0, 0%, 100%);
  padding: 0.375rem 0.75rem;
  position: fixed;
  text-shadow: none;
  top:35px;
  font-size: 0.875rem;
}

hgroup>p {
    color: var(--color-ochin-green);
}

h1 {
    color: var(--color-background-white);
    font-family: "Open Sans Bold";
    font-size: calc(1rem * (40/16));
}

h2 {
    color: var(--color-text);
    font-family: "Open Sans Bold";
    text-align: center;
}

body>section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color: var(--color-active);
    color: var(--color-light);
    padding: 20px;
}

body>section>h2 {
    color: var(--color-light);
    font-family: "Open Sans Light";
}

main {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10vw;
    justify-content: space-around;
    margin: 5vh;
}

main>section>ul>li {
    max-width: 40vw;
}

footer {
    font-size: calc(1rem * (10/16));
}