:root {
	--theme-bg-color: white;
	--theme-secondary-bg-color: #EAEAEA;
	--theme-color: black;
	--theme-secondary-color: #E7584A;
	--theme-dark-color: black;
	--theme-text-color: black;
	--theme-active-color: red;
	--theme-color-preference: light;
}
body {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    background: url(../img/shadow_background.png) repeat;
    overflow:hidden;
    -moz-user-select:none;
    -webkit-user-select:none;
    user-select: none;
    padding: 0 1rem 1rem 1rem;
    margin: 0;
    color-scheme: var(--theme-color-preference);
}
p {
    color: black;
}
a, a:visited {
    color: var(--theme-text-color);
}
a:hover {
    color: var(--theme-active-color);
}
.titleSpan, label {
    color: var(--theme-text-color);
}
.container {
    display: flex;
    flex-wrap: wrap;
}
.break {
    flex-basis: 100%;
    height: 0;
}
.options { 
    margin-right: 1rem;
    visibility: collapse;
    display: none;
}
.titleSpan {
    align-self: center;
    margin: auto;
}
.barActions {
    display: flex;
    justify-content: flex-end;
    flex-grow: 1;
    margin-right: 6rem;
}
.barActions div {
    position: absolute;
    visibility: collapse;
}
.panelToggles {
    margin-right: 2rem;
}
.modifierSelection {
    display: flex;
    font-size: small;
    justify-content: flex-end;
    gap: 1rem;
    height: min-content;
}
.modifierSelectionGroup {
    display: flex;
    gap: 1rem;
    background: var(--theme-secondary-bg-color);
    border: 1px dashed var(--theme-color);
}
.timerStatus {
    background: var(--theme-secondary-bg-color);
    border: 1px dashed var(--theme-color);
    height: min-content;
    font-size: small;
}

@media screen and (max-width: 1150px) {
    .titleSpan {
      visibility: collapse;
      display: none;
    }
    .regenText {
      display: none;
    }
    .regenContainer {
      margin-right: auto;
    }
}
@media screen and (max-width: 500px) {
    .titleSpan {
      visibility: collapse;
      display: none;
    }
    .regenText {
      display: none;
    }
    .regenContainer {
      margin-right: auto;
    }
    #timerStatus {
        visibility: collapse;
        display: none;
    }
    .options, .optionToggle {
        visibility: collapse;
        display: none;
    }
    .modifierSelection {
        gap: revert;
    }
    .barActions {
        justify-content: revert;
    }
    .barActions div {
        bottom: 0px;
    }
}

.progress-ring__circle {
    transition: 0.35s stroke-dashoffset;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}
.regen_circle_face {
    fill: var(--theme-text-color);
}
.regenContainer {
    display: flex;
    padding-left: 2rem;
    isolation: isolate; 
    align-items: center; 
    gap: 0.25rem;
}