:root {
  --background: rgb(210, 210, 210);
  --hovered-background: rgb(230, 230, 230);
  --pannel: treansparent;
  --tabs: transparent;
  --text: rgb(10, 10, 10);
  --hovered-pannel: var(--hovered-background);
  --transparent-background: rgba(240, 240, 240, 0.5);
  --hovered-tabs: var(--hovered-background);
  --active-tabs: var(--background);
  --shadows: rgb(100, 100, 100);
  --borders: transparent;
  --right-width: 280px;
  --masks: none;
  --hovered-tab-z-index: 0;
  --hovered-tab-height: 50px;
  --hovered-tab-box-shadow: none;
  --transition: 0.25s;
  --search-bar-height: 0rem;
  --radius: 1.25rem;
  --nec-radius: 1.25rem;
  --button-scale: 0.75;
  --maximum-tab-width: 100%;
  --tab-width: calc(33% / var(--button-scale));
  --tab-margin: calc((3.125rem - (3.125rem * var(--button-scale))) / 2 / var(--button-scale));
  --blur-amount: 0.625rem;
  --highlight-colour: rgb(0, 0, 255);
  --slider-height: 0.4375rem;
  --highlight-text: var(--hovered-pannel);
  --main: rgb(240, 240, 240);
  --hovered-main: rgb(255, 255, 255);
  --shadow-weight: 0.3125rem;
  --hovered-hovered-main: rgb(240, 240, 240);
  --input-width: fit-content;
  --minimum-tab-width: 1rem;
  --main-transparent-background: rgba(240, 240, 240, 0.5);
}
html {
  content-visibility: auto;
  width: 100%;
  height: 100%;
  font-family:'Times New Roman', Times, serif;
}
body:has(#search-bar:focus-within) #fade-cover {
  opacity: 100;
  pointer-events: all;
}
h1 {
  font-size: 2rem;
  font-family:'Times New Roman', Times, serif;
}
.document-dark-mode {
  --background: rgb(50, 50, 50);
  --hovered-background: rgb(100, 100, 100);
  --shadows: rgb(225, 225, 225);
  --borders: transparent;
  --right-width: 280px;
  --highlight-colour: rgb(0, 200, 255);
  --highlight-text: rgb(25, 25, 25);
  --main: rgb(10, 10, 10);
  --hovered-main: rgb(75, 75, 75);
  --text: rgb(220, 220, 220);
  --transparent-background: rgba(100, 100, 100, 0.5);
  --main-transparent-background: rgba(10, 10, 10, 0.5);
;}
body {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  color: var(--text);
  content-visibility: auto;
  background: var(--background);
  transition: var(--transition);
}
#top-bar {
  width: calc((100% - (3.125rem - 3.125rem * var(--button-scale))) / var(--button-scale));
  height: 3.125rem;
  background: var(--pannel);
  display: block;
  z-index: 3;
  border-radius: var(--radius);
  position: absolute;
  scale: var(--button-scale);
  transform-origin: left center;
  left: calc((3.125rem - 3.125rem * var(--button-scale)) / 2);
  z-index: 7;
}
#top-bar button {
  position: absolute;
  top: 0px;
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 0px;
  background: none;
  border: var(--borders);
  transition: var(--transition);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius);
  color: var(--text);
}
#top-bar button:hover {
  background: var(--hovered-pannel);
}
#top-bar button:focus-visible { 
  outline: none;
  background: var(--hovered-pannel);
  scale: 1.1;
  box-shadow: 0 4px var(--shadow-weight) var(--shadows);
}
#settings-button {
  left: 0px;
}
#settings-button div:not(#settings-button div:nth-child(1)):not(#settings-button div:nth-child(2))::before{
  background: var(--background);
}
#settings-button:hover div:not(#settings-button div:nth-child(1)):not(#settings-button div:nth-child(2))::before {
  background: var(--hovered-pannel);
}
#settings-button:focus-visible div:not(#settings-button div:nth-child(1)):not(#settings-button div:nth-child(2))::before {
  background: var(--hovered-pannel);
}
#settings-button:active div:not(#settings-button div:nth-child(1)):not(#settings-button div:nth-child(2))::before{
  transition: 0s;
}
.gear:nth-child(1){
  width: 0.625rem;
  height: 0.625rem;
  border: 0.09375rem solid var(--text);
  border-radius: 50%;
}
.gear:nth-child(2) {
  position: absolute;
  width: 1.175rem;
  height: 1.175rem;
  border-radius: 50%;
  border: 0.09375rem solid var(--text);
}
.gear:not(.gear:nth-child(1)):not(.gear:nth-child(2)) {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 3.125rem;
  height: 3.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gear:not(.gear:nth-child(1)):not(.gear:nth-child(2))::before {
  content: "";
  width: 0.313rem;
  height: 0.313rem;
  border: 0.09375rem solid var(--text);
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  border-top: none;
  background: var(--pannel);
  margin-top: 1.5rem;
  transition: var(--transition);
}
.gear:nth-child(3) {
  rotate: 45deg;
}
.gear:nth-child(4) {
  rotate: 90deg;
}
.gear:nth-child(5) {
  rotate: 135deg;
}
.gear:nth-child(6) {
  rotate: 180deg;
}
.gear:nth-child(7) {
  rotate: 225deg;
}
.gear:nth-child(8) {
  rotate: 270deg;
}
.gear:nth-child(9) {
  rotate: 315deg;
}
#top-bar button:active {
  transition: 0s;
  scale: 1.1;
}
#pannelButton {
  left: calc(3.125rem + (3.125rem - 3.125rem * var(--button-scale)) / 2 / var(--button-scale));
}
#pannelButton div:not(#pannelButton div div){
  width: 3rem;
  height: 3rem;
  border: calc(0.09375rem / 0.6) solid var(--text);
  border-radius: var(--radius);
  position: absolute;
  scale: 0.6;
}
#pannelButton div:nth-child(1)::before{
  content: "";
  position: absolute;
  left: 40%;
  top: 0px;
  width: calc(0.09375rem / 0.6);
  height: 100%;
  background: var(--text);
}
#pannelButton div div{
  position: absolute;
  left: 0.375rem;
  width: calc(40% - 0.75rem);
  height: calc(0.09375rem / 0.6);
  background: var(--text);
}
#pannelButton div div:nth-child(1){
  top: 25%;
}
#pannelButton div div:nth-child(2){
  top: 50%;
}
#pannelButton div div:nth-child(3){
  top: 75%;
}
#search-bar {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 3.125rem;
  padding: 0px;
  background: var(--pannel);
  transition: var(--transition);
  font-size: 2rem;
  font-family: "Times New Roman", times, serif;
  cursor: pointer;
  position: absolute;
  left: calc(6.25rem + (3.125rem - 3.125rem * var(--button-scale)) / var(--button-scale));
  content-visibility: auto;
  min-height: 3.125rem;
  border-radius: var(--radius);
  z-index: 1;
  position: absolute;
  max-height: calc(var(--screen-height) / var(--button-scale) - (3.125rem - 3.125rem * var(--button-scale)));
  overflow: scroll;
  width: calc(100% - 12.5rem - (3.125rem - 3.125rem * var(--button-scale)) * 2 / var(--button-scale));
}
#search-bar input {
  width: calc(100%);
  height: 3.125rem;
  padding: 0px;
  margin: 0px;
  border: var(--border);
  background: none;
  text-align: center;
  font-size: 2rem;
  font-family: "Times New Roman", times, serif;
  transition: var(--transition);
  cursor: pointer;
  color: var(--text);
}
#search-bar input::-webkit-scrollbar {
  display: none;
}
#search-bar:has(input:focus){
  z-index: 5;
}
#search-bar input:focus {
  outline: none;
  cursor: text;
}
#search-bar input::placeholder {
  color: var(--text);
  opacity: 1;
  transition: var(--transition);
  width: 100%;
}
#search-bar input::-ms-input-placeholder {
  color: var(--text);
  opacity: 1;
  transition: var(--transition);
}
#search-bar input:focus::placeholder {
  color: var(--text);
  opacity: 0.5;
}
#search-bar input:focus::-ms-input-placeholder {
  color: var(--text);
  opacity: 0.5;
}
#search-bar:hover {
  background: var(--hovered-pannel);
}
#search-bar:focus-within {
  cursor: text;
  outline: none;
  height: var(--search-bar-height);
  box-shadow: 0 4px var(--shadow-weight) var(--shadows);
  border-radius: var(--nec-radius);
  backdrop-filter: blur(var(--blur-amount));
  background: var(--transparent-background);
}
#search-bar div:not(#search-bar div div) {
  width: 100%;
  position:absolute;
  left: 0px;
  top: 3.125rem;
}
#search-bar div div{
  width: 100%;
  height: 3.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--nec-radius);
}
#search-bar div span {
  width: 100%;
  height: 3.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}
#search-bar div div:hover {
  background: var(--highlight-colour);
  color: var(--highlight-text);
}
#new-tab {
  right: 0px;
  font-size: 2.5rem;
  font-family: "Times New Roman", times, serif;
}
#editIcon {
  right: calc(3.125rem + (3.125rem - 3.125rem * var(--button-scale)) / 2);
  background: blue;
}
#tab-bar {
  position: absolute;
  left: 0px;
  top: calc(3.125rem + (3.125rem * var(--button-scale) - 3.125rem) / 2);
  width: calc(100%);
  height: 3.125rem;
  background: var(--tabs);
  z-index: 3;
  overflow-x: scroll;
  display: flex;
  scrollbar-width: 0px;
  overflow-y: hidden;
  background: transparent;
}
#tab-bar::-webkit-scrollbar {
  display: none;
}
#tab-bar::before {
  content: "";
  width: calc((3.125rem - 3.125rem * var(--button-scale)) / 2);
  height: 100%;
  background: linear-gradient(to right, var(--background) 25%, transparent);
  left: 0px;
  top: 0px;
  z-index: 5;
  position: fixed;
}
#tab-bar::after {
  content: "";
  width: calc((3.125rem - 3.125rem * var(--button-scale)) / 2);
  height: 100%;
  background: linear-gradient(to left, var(--background) 25%, transparent);
  right: 0px;
  top: 0px;
  z-index: 5;
  position: fixed;
}
#tab-holder {
  min-width: calc((var(--screen-width) - (3.125rem - 3.125rem * var(--button-scale))) / var(--button-scale) + var(--tab-margin));
  height: calc(3.125rem + var(--shadow-weight) * 2);
  left: calc((3.125rem - 3.125rem * var(--button-scale)) / 2 - var(--tab-margin) / 2 * var(--button-scale));
  padding: 0px;
  display: flex;
  justify-content: center;
  scale: var(--button-scale);
  transform-origin: left top;
  position: absolute;
  overflow: visible;
  width: fit-content;
  margin: 0px;
  top: calc((3.125rem - 3.125rem * var(--button-scale)) / 2);
}
.tab {
  max-width: var(--maximum-tab-width);
  height: 3.125rem;
  font-size: 1.5rem;
  font-family: "Times New Roman", times, serif;
  cursor: pointer;
  border-radius: var(--radius);
  transition: var(--transition);
  margin: calc(var(--tab-margin) / 2);
  padding: 0px;
  position: relative;
  z-index: 3;
  flex: 1 1 0px;
  min-width: 10rem;
  margin-top: 0px;  
  display: block;
}
.tab:hover {
  background: var(--hovered-tabs);
}
.selectedTab:hover {
  background: transparent;
}
.tab:focus-visible {
  scale: 1.1;
  background: var(--hovered-tabs);
  box-shadow: 0px 0.125rem var(--shadow-weight) var(--shadows);
  outline: none;
  z-index: 0;
}
.tab p {
  z-index: 4;
  pointer-events: none;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px;
  mask-image: linear-gradient(to right, black, black calc(var(--tab-width) - 3.125rem - (3.125rem - 3.125rem * var(--button-scale)) / 2), transparent calc(100% - 3.125rem), transparent);
  transition: var(--transition);
  mask-position: 0px center;
  mask-size: calc(100% + 3.125rem) 100%;
}
.tab:hover p {
  mask-position: -50px center;
  
}
.selectedTab {
  z-index: 2;
}
.tab:active, .tab:focus {
  z-index: 2;
}
.tab:active:not(.tab:has(.closetab:active)):not(.selectedTab) {
  scale: 1.1;
  z-index: 5;
  transition: 0s;
}
.selectedTab .selected-gradient {
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  position: absolute;
  min-width: var(--minimum-tab-width);
  z-index: 2;
  background: transparent;
  pointer-events: none;
}
.tab:not(.selectedTab) .tabEdge {
  display: none;
}
.tabEdge {
  width: var(--radius);
  height: var(--radius);
}
.tab .tabEdge:nth-of-type(1) {
  rotate: -90deg;
  position: absolute;
  left: 0px;
  top: 0px;
}
.tab .tabEdge:nth-of-type(2) {
  position: absolute;
  right: 0px;
  top: 0px;
}
.selected-gradient::before {
  content: "";
  pointer-events: none;
  right: 100%;
  width: calc(var(--screen-width) / var(--button-scale));
  position: absolute;
  background: var(--background);
  height: calc(100% + (3.125rem - 3.125rem * var(--button-scale)) / var(--button-scale) / 2);
  border-bottom-right-radius: calc(var(--radius) / var(--button-scale));
}
.selected-gradient::after {
  content: "";
  pointer-events: none;
  left: 100%;
  width: calc(var(--screen-width) / var(--button-scale));
  position: absolute;
  background: var(--background);
  height: calc(100% + (3.125rem - 3.125rem * var(--button-scale)) / var(--button-scale) / 2);
  margin: 0px;
  border-bottom-left-radius: calc(var(--radius) / var(--button-scale));
}
.selectedTab .selected-gradient {
  pointer-events: all;
}
#main {
  position: absolute;
  top: calc(3.125rem - (3.125rem - 3.125rem * var(--button-scale)) / 2);
  left: 0px;
  width: calc(100%);
  bottom: 0px;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  z-index: 2;
}
#main::before {
  content: "";
  width: calc(100% - (3.125rem - 3.125rem * var(--button-scale)));
  position: fixed;
  left: calc((3.125rem - 3.125rem * var(--button-scale)) / 2);
  top: calc(3.125rem);
  height: calc(3.125rem - (3.125rem - 3.125rem * var(--button-scale)) / 2);
  background: var(--main-transparent-background);
  backdrop-filter: blur(var(--blur-amount));
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  z-index: 3;
  mask-image: linear-gradient(to top, transparent, black calc((3.125rem - 3.125rem * var(--button-scale)) / 2), black)
}
#main .tabEdge:nth-of-type(1) {
  rotate: -90deg;
  position: absolute;
  left: 0px;
  top: 3.125rem;
}
#main .tabEdge:nth-of-type(2) {
  position: absolute;
  right: 0px;
  top: 3.125rem;
}
#main::-webkit-scrollbar {
  display: none;
}
#slider {
  position: absolute;
  width: var(--tab-width);
  max-width: var(--maximum-tab-width);
  top: 0px;
  background: var(--highlight-colour);
  z-index: 4;
  left: 0px;
  margin: 0px;
  padding: 0px;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  height: var(--radius);
  border: none;
  padding: 0px;
  clip-path: inset(-10px -10px calc(var(--radius) - var(--slider-height)) -10px);
  overflow: visible;
}
#main .screen {
  width: 100%;
  height: calc(100% - (3.125rem - 3.125rem * var(--button-scale)) / 2);
  position: absolute;
  top: calc((3.125rem - 3.125rem * var(--button-scale)) / 2 - 3px);
  scroll-snap-align: start;
  border: none;
}
.scroller:not(.scroller .scroller) {
  position: absolute;
  top: 3px;
  width: calc(100% - (3.125rem - 3.125rem * var(--button-scale)));
  height: calc(100% - (3.125rem - 3.125rem * var(--button-scale)) / 2);
  margin-left: calc((3.125rem - 3.125rem * var(--button-scale)) / 2);
  background: var(--main);
  border-radius: calc(var(--radius) * var(--button-scale));
  box-shadow: 0 4px var(--shadow-weight) var(--shadows);
  overflow: scroll;
  content-visibility: auto;
  z-index: 2;
  clip-path: inset(50px, -0.3125rem, -0.3125rem, -0.3125rem);
}
@keyframes tabExpand {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.control-top-bar {
  height: 3.125rem;
  background: var(--background);
  box-shadow: 0 4px var(--shadow-weight) var(--shadows);
  scale: var(--button-scale);
  border-radius: var(--radius);
  width: fit-content;
  left: calc(var(--tab-margin) * var(--button-scale));
  background: var(--transparent-background);
  backdrop-filter: blur(var(--blur-amount));
  transition: var(--transition);
  font-size: 2rem;
  color: var(--text);
  align-items: center;
  justify-content: center;
  z-index: 3;
  padding-left: 10px;
  padding-right: 10px;
  margin: auto;
  display: flex;
}
#settings-screen {
  font-size: 1.25rem;
  border: none;
}
.fixer {
  height: calc(3.125rem + 5px);
}
.settings-folder {
  width: calc((100% - (3.125rem - 3.125rem * var(--button-scale))) / var(--button-scale));
  height: 3.125rem;
  display: flex;
  scale: var(--button-scale);
  transition: var(--transition);
  cursor: pointer;
  border-radius: var(--radius);
  transform-origin: left center;
  margin-left: calc((3.125rem - 3.125rem * var(--button-scale)) / 2);
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  overflow: visible;
  position: relative;
}
#settings-top-bar p {
  cursor: pointer;
}
#settings-top-bar p:hover {
  color: var(--highlight-colour);
  text-decoration: underline;
}
.settings-folder:hover {
  background: var(--hovered-main);
}
.hasVisible {
  background: var(--hovered-main);
  box-shadow: 0 4px var(--shadow-weight) var(--shadows);
}
.settings-folder::before {
  content: ">";
  font-size: 2rem;
  color: var(--text);
  transition: var(--transition);
  position: absolute;
  right: 5px;
}
#settings-scroller {
  overflow-x: scroll;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
}

.folder-holder {
  display: none;
  width: calc(var(--screen-width) / var(--button-scale));
  height: fit-content;
  position: absolute;
  left: calc(var(--screen-width) / var(--button-scale));
  top: 0px;
}
.scroll-point {
  width: 50px;
  height: 50px;
  margin: 0px;
  padding: 0px;
  scroll-snap-align: start;
  pointer-events: none;
  position: absolute;
  top: 0px;
  left: 0px;
}
.input {
    width: fit-content;
    background: var(--main);
    border-radius: var(--radius);
    content-visibility: auto;
    display: inline-block;
    height: calc(3.125rem);
    transition: var(--transition);
    position: relative;
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
}
.input div:not(.colour-widget) {
    height: calc(3.125rem - 20px);
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    padding-right: 1.875rem;
    width: fit-content;
}
.input div:not(.colour-widget):hover {
    background: var(--hovered-main);
}
.selected:focus {
    box-shadow: 0 4px var(--shadow-weight) var(--shadows);
    height: var(--menu-height);
    backdrop-filter: blur(var(--blur-amount));
    background: var(--transparent-background);
    z-index: 2;
}
.selected:focus div:not(.colour-widget) {
  transition: none;
  border-radius: var(--radius);
  width: var(--input-width);
}
.selected:focus div:not(.colour-widget):hover {
  background: var(--highlight-colour);
  color: var(--highlight-text);
}
.settingsItemHolder {
  height: calc(3.125rem * var(--button-scale));
  width: fit-content;
  display: flex;
  margin-bottom: 1rem;
}
.settingsItemHolder span {
  height: 3.125rem;
  display: flex;
  align-items: center;
  position: relative;
  margin: 0px;
}
#themeChangeDiv {
  width: fit-content;
  height: 3.125rem;
  display: flex;
  align-items: center;
}
.input::before {
  content: "";
  width: 0px;
  height: 0px;
  border: 0.4375rem solid transparent;
  border-top: 0.625rem solid var(--text);
  position: absolute;
  right: 0.4375rem;
  top: calc(50% - 0.3125rem);
  pointer-events: none;
}
.selected::before {
  display: none;
}
.colour-widget {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  right: 0.4375rem;
  display: none;
}
.selected .colour-widget {
  display: block;
}
#device {
  background: white;
}
#light {
  background: white;
}
#dark {
  background: black;
}
@media (prefers-color-scheme: dark) {
  #device {
    background: black;
  }
}
#editIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.125rem;
  height: 3.125rem;
  position: relative;
  margin: 0px;
}
#editIcon div:not(#editIcon div div) {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  rotate: 30deg;
}
#editIcon div div:nth-of-type(1){
  position: absolute;
  top: 0.5rem;
  bottom: 1rem;
  width: 0.3125rem;
  outline: 0.09375rem solid var(--text);
  left: calc(50% - 0.203125rem);
}
#editIcon div div:nth-of-type(2){
  width: 0px;
  height: 0px;
  border: 0.25rem solid transparent;
  border-top: 0.5rem solid var(--text);
  position: absolute;
  left: calc(50% - 0.25rem - 0.09375rem / 2);
  top: calc(2.125rem + 0.09375rem);
  border-bottom: none;
}
#editIcon div div:nth-of-type(3){
  width: 0px;
  height: 0px;
  border: 0.25rem solid transparent;
  border-top: 0.5rem solid var(--background);
  position: absolute;
  transform: scale(calc((0.5 - 0.09375 * 2) / 0.5));
  border-bottom: none;
  left: calc(50% - 0.25rem - 0.09375rem / 2);
  top: 2.125rem;
}
.edit-top-bar {
  padding: 0px;
}
.createTask {
  width: calc(100% - 6.25rem);
  height: calc(100% - 6.25rem);
  margin-left: 3.125rem;
  margin-top: 3.125rem;
  position: absolute;
  left: 0px;
  top: 0px;
  border-radius: var(--radius);
  background: var(--transparent-background);
  backdrop-filter: blur(var(--blur-amount));
  box-shadow: 0 4px var(--shadow-weight) var(--shadows);
  transition: var(--transition);
  scale: 0%;
  overflow: scroll;
}
.createTask:has(*:focus){
  scale: 100%;
}

.screen:has(.edit-top-bar .editIcon:focus) .createTask, .createTask:focus {
  scale: 100%;
}
.congrats-message {
  font-size: 3rem;
  width: 100%;
  height: calc(100%);
  margin-top: -3.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  pointer-events: none;
}
.congrats-message p{
  text-align: center;
}
.themeChanging * {
  transition: var(--transition);
}
.doneBar {
  background: var(--pannel);
  width: 100%;
  height: 3.125rem;
  position: fixed;
  bottom: 0px;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  z-index: 1;
}
.createScroller {
  padding: 0px;
  height: calc(100% - 3.125rem);
}
.doneBar button:nth-child(1){
  position: absolute;
  left: 0px;
  top: 0px;
  width: calc(fit-content / var(--button-scale) - (3.125rem - (3.125rem * var(--button-scale))) * 2);
  height: 3.125rem;
  scale: var(--button-scale);
  background: transparent;
  transition: var(--transition);
  color: var(--text);
  border: none;
  font-size: 2rem;
  cursor: pointer;
  border-radius: var(--radius);
}
.doneBar button:nth-child(1):hover{
  background: var(--hovered-pannel);
}
.doneBar button:nth-child(2){
  position: absolute;
  right: 0px;
  top: 0px;
  width: calc(fit-content / var(--button-scale) - (3.125rem - (3.125rem * var(--button-scale))) * 2);
  height: 3.125rem;
  scale: var(--button-scale);
  background: transparent;
  transition: var(--transition);
  color: var(--text);
  border: none;
  font-size: 2rem;
  cursor: pointer;
  border-radius: var(--radius);
}
.doneBar button:nth-child(2):hover{
  background: var(--hovered-pannel);
}

.mockTask {
  position: absolute;
  width: 75%;
  left: 0px;
  border-radius: var(--radius);
  margin-left: 12.5%;
  min-height: 10px;
  z-index: 0;
  background: var(--tabs);
  box-shadow: 0 4px var(--shadow-weight) var(--shadows);
  overflow: scroll;
}
.mockTask:before {
  content: var(--mockTaskContent);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  margin-left: 10px;
  max-height: calc(var(--screen-height) - 15.625rem);
  position: absolute;
  bottom: 0px;
}

.createInput {
  transform: scale(var(--button-scale));
  padding-left: 10px;
  padding-right: 10px;
  height: 3.125rem;
  text-align: center;
  width: calc(100% / var(--button-scale) - 20px - (3.125rem - 3.125rem * var(--button-scale)));
  margin-top: calc((3.125rem - 3.125rem * var(--button-scale)) / 2);
  margin-left: calc((3.125rem - 3.125rem * var(--button-scale)) / 2);
  border: 0px;
  font-family: Arial;
  resize: none;
  transform-origin: left top;
  transition: var(--transition);
  border-radius: var(--radius);
  box-sizing: border-box;
  outline: none;
  background: transparent;
  font-size: 1.75rem;
  outline: none;
  z-index: 1;
  color: var(--text);
}

.createInput:focus {
  background: var(--hovered-tabs);
}
.createInput:hover {
  background: var(--hovered-tabs);
}
.mockTaskDescriptionInput {
  height: calc(100% - 9.375rem);
  min-height: 6.25rem;
}
.createInput::placeholder {
  color: var(--text);
  opacity: 0.5;
}
.createInput::-ms-input-placeholder {
  color: var(--text);
  opacity: 0.5;
}
.createInput::-webkit-input-placeholder {
  color: var(--text);
  opacity: 0.5;
}
@media screen and (max-width: 600px) {
  #tab-bar {
    display: none;
  }
  #main {
    top: calc(3.125rem - (3.125rem - 3.125rem * var(--button-scale)) / 2);
    height: calc(100% - 3.125rem + (3.125rem - 3.125rem * var(--button-scale)) / 2);
  }
  .scroller:not(.scroller .scroller){
    bottom: calc((3.125rem - 3.125rem * var(--button-scale)) / 2 * var(--button-scale));
    height: auto;
  }
  #search-bar:has(input:focus){
    width: calc(100% - (3.125rem - 3.125rem * var(--button-scale)));
    left: calc((3.125rem - 3.125rem * var(--button-scale)) / 2);
  }
  #top-bar:has(#search-bar input:focus){
    z-index: 4;
  }
}
.textCheckBox {
  appearance: none;
  width: fit-content;
  height: 3.125rem;
  padding: 0px;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: var(--radius);
  transition: var(--transition);
  cursor: pointer;
  display: flex;
  align-items: center;
  margin: 0px;
  position: relative;
  vertical-align: bottom;
}
.textCheckBox:hover {
  background: var(--hovered-main);
}
.textCheckBox:active {
  scale: calc(1.1);
  transition: 0s;
}
.textCheckBox::before {
  content: "Off";
  font-size: 2rem;
  font-family: 'Times New Roman', Times, serif;
  color: var(--text);
}
.textCheckBox:checked::before {
  content: "On";
}
.closetab {
  width: 3.125rem;
  height: 3.125rem;
  scale: var(--button-scale);
  position: absolute;
  right: 0px;
  border-radius: var(--radius);
  opacity: 0%;
  z-index: 6;
  transition: var(--transition);
  cursor: pointer;
}
.closetab:hover {
  background: var(--main);
}
.selectedTab {
  cursor: default;
}
.selectedTab .closetab:hover {
  background: var(--hovered-main);
}
.tab span {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  border-radius: var(--radius);
  background: var(--tabs);
  transition: var(--transition);
}
.tab:hover span {
  background: var(--hovered-tabs);
}
.closetab::before {
  content: "";
  position: absolute;
  left: 25%;
  top: calc(50% - 0.046875rem);
  width: 50%;
  height: 0.09375rem;
  background: var(--text);
  rotate: 45deg;
}
.hoveredFade {
  opacity: 0%;
  transition: var(--transition);
}
.tab:hover .hoveredFade {
  opacity: 1;
}
.closetab::after {
  content: "";
  position: absolute;
  left: 25%;
  top: calc(50% - 0.046875rem);
  width: 50%;
  height: 0.09375rem;
  background: var(--text);
  rotate: -45deg;
}
.closetab:active {
  scale: calc(var(--button-scale) * 1.1);
  transition: 0s;
}
.tab:hover .closetab {
  opacity: 100%;
}
@keyframes closeTab {
  from {
    flex-grow: 1;
    content-visibility: auto;
  }
  to {
    flex-grow: 0;
    opacity: 0;
    content-visibility: auto;
    flex-basis: 0;
    min-width: 0;
  }
}
.new-tab-link {
  width: calc(100% - (3.125rem - 3.125rem * var(--button-scale)));
  height: calc(3.125rem * var(--button-scale));
  display: flex;
  transition: var(--transition);
  cursor: pointer;
  border-radius: calc(var(--radius) * var(--button-scale));
  transform-origin: left top;
  margin-left: calc((3.125rem - 3.125rem * var(--button-scale)) / 2);
  align-items: center;
  justify-content: center;
  font-size: calc(2rem * var(--button-scale));
  overflow: visible;
  position: relative;
  margin-top: calc((3.125rem - 3.125rem * var(--button-scale)) / 2);
}
.new-tab-link:hover {
  background: var(--hovered-main);
}
#custom-new-tab {
  width: calc(100% - (3.125rem - 3.125rem * var(--button-scale)));
  height: calc(3.125rem * var(--button-scale));
  display: flex;
  transition: var(--transition);
  cursor: pointer;
  border-radius: calc(var(--radius) * var(--button-scale));
  transform-origin: left top;
  margin-left: calc((3.125rem - 3.125rem * var(--button-scale)) / 2);
  align-items: center;
  justify-content: center;
  font-size: calc(2rem * var(--button-scale));
  overflow: visible;
  position: relative;
  margin-top: calc((3.125rem - 3.125rem * var(--button-scale)) / 2);
}
#custom-new-tab:hover {
  background: var(--hovered-main);
}
#custom-new-tab::before {
  content: "Custom Tab...";
}
#custom-new-tab div {
  display: none;
  width: calc(100% - (3.125rem - 3.125rem * var(--button-scale)));
  height: calc(100% - (3.125rem - 3.125rem * var(--button-scale)));
}
#custom-new-tab:focus-within {
  height: 6.25rem;
  background: var(--hovered-main);
  box-shadow: 0px 0.125rem var(--shadow-weight) var(--shadows);
  cursor: default;
}
#custom-new-tab:focus-within div {
  display: block;
}
#custom-new-tab:focus-within::before {
  display: none;
}
#custom-new-tab div input {
  appearance: none;
  width: 100%;
  font-size: calc(2rem * var(--button-scale));
  font-family:'Times New Roman', Times, serif;
  padding: 0px;
  height: calc(3.125rem * var(--button-scale));
  border-radius: calc(var(--radius) * var(--button-scale));
  outline: none;
  border: none;
  text-align: center;
  transition: var(--transition);
}
#custom-new-tab div input:hover, #custom-new-tab div input:focus {
  background: var(--hovered-hovered-main);
}
.details {
  width: 100%;
  position: relative;
  font-size: 1.5rem;
}
.details::before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  right: calc(1.5625rem * var(--button-scale) - 0.3125rem);
  pointer-events: none;
  border: 0.45rem solid transparent;
  border-top: 0.625rem solid var(--text);
  top: calc(1.5625rem * var(--button-scale) - 0.3125rem);
  transition: var(--transition);
  transform-origin: 50% 25%;
}
.details-checkbox {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  appearance: none;
  cursor: pointer;
}
.details-title {
  width: 100%;
  height: calc(3.125rem * 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.details:has(.details-checkbox:hover)::before {
  scale: 1.25;
}
.details-content {
  width: 100%;
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  min-height: 0px;
  transition: var(--transition);
}
.details-text {
  min-height: 0;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  opacity: 0;
  transition: var(--transition);
  visibility: hidden;
}
.details:has(.details-checkbox:checked) .details-content {
  grid-template-rows: 1fr;
}
.details:has(.details-checkbox:checked) .details-text {
  opacity: 1;
  visibility: visible;
}
.details:has(.details-checkbox:checked) .details-title {
  font-weight:bold;
}
.details:has(.details-checkbox:checked)::before {
  scale: -1;
}
.details:has(.details-checkbox:checked):has(.details-checkbox:hover)::before {
  scale: -1.25;
}
.details a:hover {
  background: var(--hovered-hovered-main);
}
hr {
  width: 75%;
  margin-left: 12.5%;
  height: 0px;
  border: 0.5px solid var(--background);
  height: 0px;
}
.li {
  width: calc(100% - 2rem);
  text-align: center;
  font-size: 1.1rem;
  position: relative;
  line-height: 1.5rem;
  display: flex;
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
}
.li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--text);
  position: absolute;
  left: 0.25rem;
  top: 0.5rem;
}
@keyframes popUp {
  from {
    scale: 0.75;
    opacity: 0;
  }
  to {
    scale: 1;
    opacity: 1;
  }
}
input[type="checkbox"]{
  margin: 0px;
}