:root {
  --p1: calc(1rem / 2);
  --p-half: calc(var(--p1) / 2);
  --p2: calc(var(--p1) * 2);
  --p3: calc(var(--p1) * 3);
  --p4: calc(var(--p1) * 4);

  --icon: 1rem;
  --icon2: calc(var(--icon) * 2);
  --small-font: 0.85rem;
  --ssmall-font: 0.75rem;

  --shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  --shadow-reverse: 0 -4px 4px 0 rgba(0, 0, 0, 0.25);
  --border-radius: var(--p1);

  --card-inner-size: 300px;
  --sidebar-desktop-width: 22rem;
  --sidebar-header-height: 0px; /* programmatically set by sidebar.js */
}

/* Global Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body.light {
  --white: #ffffff;
  --white-values: 255, 255, 255;
  --black: #000000;
  --black-values: 0, 0, 0;
  --grey: #808080;
  --grey-values: 128, 128, 128;
  --light-grey: #d9d9d9;
  --light-grey-values: 217, 217, 217;
  --llight-grey: #f5f5f5;
  --llight-grey-values: 245, 245, 245;
  --dark-grey: #333333;
  --dark-grey-values: 51, 51, 51;
  --ddark-grey: #111111;
  --ddark-grey-values: 17, 17, 17;
  --shadow-border: 1px solid var(--light-grey);

  --blue: #1f6feb;
  --blue-values: 31, 110, 235;
  --dark-blue: #1050e0;
  --dark-blue-values: 16, 80, 224;
  --green: #2ea043;
  --green-values: 46, 160, 67;
  --dark-green: #199030;
  --red: #d73a49;
  --red-values: 215, 58, 73;
  --dark-red: #b52c3a;
  --pink: #f778ba;
  --pink-values: 247, 120, 186;
  --dark-pink: #ee77aa;
  --yellow: #f6c700;
  --yellow-values: 246, 199, 0;
  --dark-yellow: #e6b700;
}

body.dark {
  --white: #0D1116;
  --white-values: 13, 17, 22;
  --black: #ffffff;
  --black-values: 255, 255, 255;
  --grey: #888;
  --grey-values: 136, 136, 136;
  --light-grey: #30363d;
  --light-grey-values: 48, 54, 61;
  --llight-grey: #161B22;
  --llight-grey-values: 22, 27, 34;
  --dark-grey: #8b949e;
  --dark-grey-values: 139, 148, 158;
  --ddark-grey: #e9e9e9;
  --ddark-grey-values: 233, 233, 233;
  --shadow-border: 1px solid var(--light-grey);

  --shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.4);
  --shadow-reverse: 0 -4px 4px 0 rgba(0, 0, 0, 0.4);
  --shadow-inset: inset 0 8px 24px rgba(0,0,0,0.4);

  --blue: #1f6feb;
  --blue-values: 31, 110, 235;
  --dark-blue: #388bfd;
  --dark-blue-values: 56, 139, 253;
  --green: #2ea043;
  --green-values: 46, 160, 67;
  --dark-green: #30aa4a;
  --red: #d73a49;
  --red-values: 215, 58, 73;
  --dark-red: #e63946;
  --pink: #f778ba;
  --pink-values: 247, 120, 186;
  --dark-pink: #ff99cc;
  --yellow: #f6c700;
  --yellow-values: 246, 199, 0;
  --dark-yellow: #f6c700;
}

html,
body {
  width: 100vw;
  height: 100vh;
  font-family: "Roboto", sans-serif;
  background: var(--white);
  color: var(--black);
  overflow: hidden;
}

body > #windowing-environment {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

i {
  color: var(--black);
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }

.sublabel {
  font-size: var(--ssmall-font) !important;
  width: 100%;
  color: var(--grey);
  text-align: center;
  transition: color 0.2s;
}

.shadow {
  box-shadow: var(--shadow);
  border: var(--shadow-border);
}

.dark .shadow {
  background-color: var(--llight-grey);
  box-shadow: var(--shadow);
}

.language-selector-container {
  display: none;
}

button, input, select, textarea {
  background-color: var(--white);
  border-radius: var(--border-radius);
  border: var(--shadow-border);
  box-shadow: var(--shadow);
  color: var(--black);
  padding: var(--p-half) var(--p1);
}

button:hover {
  background-color: var(--llight-grey);
}

button:disabled {
  background-color: var(--light-grey);
  color: var(--grey);
}

button:hover:disabled {
  background-color: var(--light-grey);
  color: var(--grey);
}

.btn-primary {
  background-color: var(--blue);
  color: var(--black);
}

.btn-secondary {
  background-color: var(--light-grey);
  color: var(--black);
}

a {
  color: var(--grey);
}

.top-right-btn {
  position: absolute;
  top: var(--p2);
  right: var(--p2);
}

.bottom-left-btn {
  position: absolute;
  bottom: var(--p2);
  left: var(--p2);
}

.top-left-btn {
  position: absolute;
  top: var(--p2);
  left: var(--p2);
}

.bottom-right-btn {
  position: absolute;
  bottom: var(--p2);
  right: var(--p2);
}

.circle-btn {
  border: var(--shadow-border);
  border-radius: 50%;
  width: var(--icon2);
  height: var(--icon2);
}

.circle-btn-popover {
  border-radius: var(--icon2);
  border: var(--shadow-border);
  color: var(--black);
  padding: var(--p-half);
  z-index: 1000;
}

.circle-btn-popover .popover-content {
  display: flex;
  flex-direction: row;
  gap: var(--p1);
}

.circle-btn-popover .popover-content button {
  padding: 0 var(--p2);
  height: var(--icon2);
  border-radius: var(--icon);
  box-shadow: none;
}