/* Change colors here */
:root {
    --background-color: #202020;
    --primary-color: #706344;    /*#706344;*/
    --highlight-color: #00b0ff;
}

html, body {
    height: 100%;
}

/* Some basic body stylings */
body {
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
    font-family: monospace;
    font-size: 16px;
    color: var(--primary-color);
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
}

/* Width, height and color of the visualizer. The actual visualizer size is derived from this. */
#visualizer-canvas {
    width: 75vw;
    height: 75vh;
    color: var(--primary-color);
    transition: color 2s ease;
}

/* The visualizer is color-aware, e.g. for animation on hover */
#visualizer-canvas:hover {
    color: var(--highlight-color);
}

/* Just some stuff to get my logo rockin' in there */
#logo {
    width: 3rem;
    height: 3rem;
    margin: 2rem;
}

#footer {
    font-size: 12px;
    display: inline-flex;
    height: 3em;
    align-items: center;
    flex-shrink: 0;
    margin-top: auto;
}

/* Fancy colors for the links */
.external-link {
    color: var(--primary-color);
    transition: color 2s ease;
}

.external-link:hover {
    color: var(--highlight-color);
}

#github-logo {
    margin-left: 1em;
}