:root {
    --color-bg: hsl(210, 12%, 96%);
    --color-section: hsl(210, 12%, 92%);
    --color-text-label: hsl(210, 12%, 30%);
    --color-link: hsl(210, 70%, 30%);
    --color-link-hover: hsl(210, 70%, 22%);
    --color-link-active: hsl(210, 70%, 18%);
    --color-link-visited: hsl(210, 40%, 32%);
}

/* Optional theme override example */
.theme-dark {
    --color-bg: hsl(210, 12%, 12%);
    --color-section: hsl(210, 12%, 18%);
    --color-text-label: hsl(0, 0%, 100%);
    --color-link: hsl(210, 70%, 70%);
    --color-link-hover: hsl(210, 70%, 78%);
    --color-link-active: hsl(210, 70%, 82%);
    --color-link-visited: hsl(210, 40%, 68%);
}

body{
    background: var(--color-bg);
    margin: 0;
}

.page{
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

.block-title{
    background: var(--color-section);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding-top: 0px;
    padding-bottom: 60px;
    padding-left: 0px;
    margin: 0;
}

h1, h2{
    color: black;
    text-align: center;
}

h1.main-title{
    text-align: left;
    width: fit-content;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 48px;
    font-size: 4em;
}

h2.selector-title{
    margin: 0;
    padding-top: 32px;
    padding-bottom: 48px;
    text-align: center;

}

.usage-instruction{
    font-size: 12px;
    color: var(--color-text-label);
    text-align: left;
    width: fit-content;
    margin-top: 20px;
    margin-right: 100px;
    max-width: 40%;
    line-height: 20px;
}

#p5canvas {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    padding: 0;
  }

.data-source{
    background: var(--color-section);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 48px;
    font-size: 12px;
    color: var(--color-text-label);
    text-align: left;
    line-height: 20px;
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: color 150ms ease, text-decoration-color 150ms ease;
}

a:hover,
a:focus {
    color: var(--color-link-hover);
    text-decoration: underline;
    text-decoration-color: var(--color-link-hover);
}

a:active {
    color: var(--color-link-active);
}

a:visited {
    color: var(--color-link-visited);
}