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

.blue {
    --primary-color: hsl(207, 90%, 54%);
    --primary-color-light: hsl(207, 90%, 93.1%);
    --primary-color-light-translucent: hsla(207, 90%, 93.1%, 0.9);
    --primary-color-dark: hsl(207, 90%, 29.7%)
}

.green {
    --primary-color: hsl(122, 39%, 49%);
    --primary-color-light: hsl(122, 39%, 92.35%);
    --primary-color-light-translucent: hsla(122, 39%, 92.35%, 0.9);
    --primary-color-dark: hsl(122, 39%, 26.95%)
}

.orange {
    --primary-color: hsl(14, 100%, 57%);
    --primary-color-light: hsl(14, 100%, 93.55%);
    --primary-color-light-translucent: hsla(14, 100%, 93.55%, 0.9);
    --primary-color-dark: hsl(14, 100%, 31.35%)
}

.pink {
    --primary-color: hsl(340, 82%, 52%);
    --primary-color-light: hsl(340, 82%, 92.8%);
    --primary-color-light-translucent: hsla(340, 82%, 92.8%, 0.9);
    --primary-color-dark: hsl(340, 82%, 28.6%)
}

.purple {
    --primary-color: hsl(291, 64%, 42%);
    --primary-color-light: hsl(291, 64%, 91.3%);
    --primary-color-light-translucent: hsla(291, 64%, 91.3%, 0.9);
    --primary-color-dark: hsl(291, 64%, 23.1%)
}

.red {
    --primary-color: hsl(357, 72%, 49%);
    --primary-color-light: hsl(357, 72%, 92.35%);
    --primary-color-light-translucent: hsla(357, 72%, 92.35%, 0.9);
    --primary-color-dark: hsl(357, 72%, 26.95%)
}

.teal {
    --primary-color: hsl(174, 100%, 29%);
    --primary-color-light: hsl(174, 100%, 89.35%);
    --primary-color-light-translucent: hsla(174, 100%, 89.35%, 0.9);
    --primary-color-dark: hsl(174, 100%, 15.95%)
}

html,
body {
    height: 100%;
    margin: 0;
}

body {
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

svg {
    width: min(50vw, 75vh);
    max-width: 30rem;
}