:root {
    --gray: rgb(100, 100, 100);
    --dark-gray: rgb(72, 72, 72);
    --regularText: calc(16px + 0.5vw);
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    /* overflow-y: scroll; */
    font-family: Helvetica, Arial;
    /* background-color: var(--dark-gray); */
}

p {
    font-size: var(--regularText);
}

.topOfTabs {
    background-color: var(--gray) !important;
    margin: -10px;
    padding: 10px;
    padding-bottom: 0px;
}

.hidden {
    display: none;
}

a {
    color: inherit;
}

.flexbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    max-height: 100vh;
    /* min-height: 100vh; */
}

#leftCol {
    /* background-color: rgb(205, 205, 205); */
    flex-basis: 800px;
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;
    max-height: 100vh;
    background-color: var(--gray);
    /* background-color: rgb(100, 157, 101); */
}

canvas {
    /* background: radial-gradient(circle, #e73956 0%, #205e7b 100%); */
    background: conic-gradient(from 90deg at 50% 50%, #e46161 0% 25%, #ba3c3c 25% 50%, #e46161 50% 75%, #ba3c3c 75% 100%);
    /* background: conic-gradient(from 90deg at 50% 50%, #eee 0% 25%, #ccc 25% 50%, #eee 50% 75%, #ccc 75% 100%); */
    background-size: 20px 20px;
}

#rightCol {
    background-color: var(--dark-gray);
    color: white;
    flex-basis: 200px;
    flex-grow: 1;
    min-width: 0;
    padding: 10px;
    border-color: white;
    max-height: 100vh;
    overflow-y: scroll;
}

button {
    color: inherit;
    border-color: inherit;
    border-width: calc(var(--regularText) * 0.1);
    border-radius: calc(var(--regularText) * 0.5);
    background-color: transparent;
    font-size: var(--regularText);
    padding: calc(var(--regularText) * 0.3);
    margin: calc(var(--regularText) * 0.3);
}

.indented {
    margin-left: var(--regularText);
}

.colorInputBtn {
    border-width: 2px;
    border-color: cyan;
    border-radius: 10px;
    background-color: transparent;
}

.dot {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 0;
}

.dotWrapper {
    display: inline-block;
    padding: 5px;
    border-radius: 50%;
    height: 30px;
}

.selected {
    border-color: cyan;
    background-color: cyan;
}

.selectedTab {
    color: cyan;
    /* border-bottom: 2px solid cyan !important; */
    background-color: var(--dark-gray);
}

.settings_tab_btn {
    padding: 3px;
    font-size: 22px;
    /* border-bottom: 2px solid white; */
    margin-right: 10px;
}

.accent {
    color: rgb(218, 218, 0);
}

.homescreen {
    text-align: center;
    padding: 20px;
    color: black;
}

.homeImg {
    max-width: 100%;
    max-height: 40vh;
    display: block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}