:root {
  --blue: rgba(0, 0, 183, 1);
  --gray-dark: rgba(80, 80, 80, 1);  
  --gray-light: rgba(179, 179, 179, 1);  
  --cyan-dark: rgba(0, 159, 179, 1);
  --cyan-light: rgba(66, 255, 255, 1);
  --yellow: rgba(255, 255, 75, 1); 
  --purple: rgba(190, 13, 181, 1);
  --green-dark: rgba(0, 146, 0, 1); 
  --green-light: rgba(68, 245, 77, 1);
  --red: rgba(192, 0, 0, 1);
  --brown : rgba(186m 84, 0, 1);
  --black: rgba(0, 0, 0, 1);   
  --white: rgba(255, 255, 255, 1);   
  --transparent: rgba(0, 0, 0, 0);
  --placeholder: rgba(255, 255, 255, 0.5);
  
  --u-height: 19px; /* line height for font-family: Consolas, "Courier New", monospace;	and font-size: 16px; */
  
  --cursor-yellow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="19"><rect width="8" height="19" fill="%23FFFF4B" /></svg>') 6 8, auto;
  --cursor-red: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="19"><rect width="8" height="19" fill="%23C00000" /></svg>') 6 8, auto;
  --cursor-purple: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="19"><rect width="8" height="19" fill="%23BE0DB5" /></svg>') 6 8, auto;
  --cursor-brown: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="19"><rect width="8" height="19" fill="%23BA5400" /></svg>') 6 8, auto;
}

/* === GENERAL === */
html {
  font-family: Consolas, "Courier New", monospace;	
  font-size: 16px;
  font-weight: bold;
}
	
body {
  height: 100vh;
  display: grid;
  align-items: center;
  justify-content: center;
  cursor: var(--cursor-yellow);
  margin: 0px;
}

:focus {
  outline: none !important;
}

:focus-visible {
  outline: none !important;
}

/* === MAIN TURBO CONTAINER === */
#turbo-container {
  line-height: var(--u-height);
  position: relative;
  background-color: var(--gray-light);
  background-image: radial-gradient(var(--blue) 1px, transparent 1px);
  background-size: 4px 4px;
}

#header-bar {
  position: relative;
  background-color: var(--gray-light);
  color: var(--black);
  display: flex;
}

#header-bar .header-options {
  z-index: 2;
  position: inherit;
  display: flex;
}

#header-bar .header-option {
  padding-left: 5px;
  padding-right: 5px;
}

#header-bar .title-bar {
  position: absolute;
  z-index: 1;
  width: 100%;
  display: flex;
  top: 0;
}

#header-bar .title-bar div {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

#header-bar .title-bar img {
  height: var(--u-height);
  margin-right: 6px;
}

#back-to-home {
  color: var(--black);
  text-decoration: none;
  margin-left: auto;
  margin-right: 0;
  z-index: 2;
  padding-left: 5px;
  padding-right: 5px;
}

#footer-bar {
  position: relative;
  background-color: var(--gray-light);
  color: var(--black);
}

#footer-bar .footer-items {
  z-index: 2;
  position: inherit;
  display: flex;
  place-content: space-between;
}

#footer-bar .footer-item {
  display: flex;
  gap: 5px;
  padding-left: 5px;
  padding-right: 5px;
}

#turbo-container .highlightRed {
  text-decoration: none;
  color: var(--red) !important;
}

#turbo-container .highlightYellow {
  text-decoration: none;
  color: var(--yellow) !important;
}

#turbo-container .item-element-option.active {
  color: var(--cyan-dark);
}

#turbo-container .item-element-option:hover {
  color: var(--cyan-light);
}

#turbo-container .item-element {
  display: flex;
  margin-left: 3px;
  margin-right: 3px;
}

#turbo-container .header-option,
#turbo-container .item-element-url {
  text-decoration: none;
  cursor: var(--cursor-purple);
  color: inherit;
}

#back-to-home:hover,
#turbo-container .header-option:hover,
#turbo-container .header-option.selected,
#turbo-container .item-element-url:hover,
#turbo-container .item-element-url.selected {
  background-color: var(--green-dark);
}

/* === TURBO BOXES === */
#turbo-container .turbo-border {
  white-space: pre;
  display: inline-block;
  overflow: clip;
}

#turbo-container .turbo-border > * {
  display: inline-block;
  overflow: clip;
}

#turbo-container .top {
  z-index: 3;	
}

#turbo-container .box {
  display: none;
  position: absolute;
  font-weight: bold;
  top: var(--u-height);
  left: 0;
}

#turbo-container .turbo-box {
  color: white;
  background-color: #0000AA;
}

#turbo-container .turbo-infobox {
  color: white;
  background-color: var(--gray-light);
}

#turbo-container .turbo-box.active,
#turbo-container .turbo-infobox.active  {
  display: inline-block;	
}

#turbo-container .block-bg {
  background: #00AAAA;
  color: #0000AA;
}

#turbo-container .block-bg2 {
  background: #00AAAA;
  color: #0000AA;
}

#turbo-container .cursor-position .cursor-position-on {
  display: none;
}

#turbo-container .b-background,
#turbo-container .b-resize,
#turbo-container .b-exit {
  color: lime;
}

#turbo-container .box:not(.saved) .status-saved,
#turbo-container .box.saved .status-unsaved {
  display: none;	
}

#turbo-container .box:not(.saved) .status-unsaved,
#turbo-container .box.saved .status-saved {
  display: block;	
}

#turbo-container .b-h-scroll {
  position: absolute;
}

#turbo-container .b-v-scroll {
  position: absolute;
}
	
#turbo-container .item-element-lnk-red {
  cursor: var(--cursor-red);
}

#turbo-container .item-element-lnk-purple {
  cursor: var(--cursor-purple);
}

#turbo-container .item-element-lnk-brown {
  cursor: var(--cursor-brown);
}

#turbo-container .turbo-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

#turbo-container .turbo-box:not(.top) .turbo-overlay {
  z-index: 2;
  background: var(--black);
  filter: opacity(0.5);
}

#turbo-container .turbo-clip {
  top: 0;
  left: 0;
  margin: 19px auto auto 10px;
  overflow: clip;
  position: absolute;
}

#turbo-container .turbo-clip-box {
  width: calc(100% - 20px);
  height: calc(100% - 38px);
}

#turbo-container .turbo-clip-infobox {
  width: calc(100% - 20px);
  height: calc(100% - 32px);
}

#turbo-container .turbo-content{
  display: flex;
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  z-index: 0;
}

#turbo-container .turbo-box.active.top .turbo-content {
  z-index: 1;
}

#turbo-container .b-ok {
  position: absolute;
  bottom: 2.5ch;
  left: calc(50% - 4ch);
  background: var(--green-dark);
  width: 8ch;
  text-align: center;
  z-index: 2;
  color: var(--cyan-light);
}

#turbo-container button,
#turbo-container .btn {
  margin-top: 19px;
  position: absolute;	
  font-weight: bold;
  border: unset;
  left: calc(50% - 4ch);
  background: var(--green-dark);
  width: 8ch;
  text-align: center;
  color: var(--cyan-light);	
}

#turbo-container .box.active.top button,
#turbo-container .box.active.top .btn {
  z-index: 2;
}

#turbo-container .box-shadow {
  box-shadow: 10px 10px 0px var(--black), inset 0 0 0 2px var(--transparent);
}

#turbo-container .box-middle-fill {
  color: var(--red);
  filter: opacity(0.2);
}

#turbo-container .turbo-box.active.top .box-title.content-copied {
  background: var(--purple);
}

/* === "About" === */
#about .turbo-content { 
  text-align: center;
}

/* === "Message" === */
#response-content { 
  display: grid;
  place-content: flex-end;
  margin: auto;
  text-align: center;
  margin-top: 0;
  gap: 10px;
}

#response-status {
  color: var(--red);
}

#response-message {
  color: var(--black);
}