@import "../larry/styles.css";

:root {
  --ink: #11212b;
  --paper: #f1f1e9;
  --acid: #c7ef4b;
  --orange: #ff6b35;
  --line: #b9c5bc;
  --muted: #59706b;
  --field: #fbfbf6;
}

html,
body,
#mainscreen,
#layout,
#main-menu,
#taskbar,
#mailboxlist,
#messagelist,
#messageframe {
  background: var(--paper);
  color: var(--ink);
}

body {
  font-family: "Space Grotesk", "Helvetica Neue", sans-serif;
  background-image: linear-gradient(90deg, transparent 49.5%, rgb(17 33 43 / 5%) 50%, transparent 50.5%), linear-gradient(rgb(17 33 43 / 4%) 1px, transparent 1px);
  background-size: 70px 70px, 7px 7px;
}

a,
#taskbar a,
#mailboxlist li a,
#messagelist tr td {
  color: var(--ink);
}

a:hover,
#taskbar a:hover,
#mailboxlist li a:hover {
  color: var(--orange);
}

#taskbar,
#mailboxlist,
#messagelist,
#messagelist-header,
#mailboxlist-header,
.box,
.boxcontent,
.popupmenu,
.menu,
.toolbar {
  border-color: var(--ink);
  box-shadow: none;
}

#taskbar a.selected,
#taskbar a:hover,
#mailboxlist li.selected > a,
#mailboxlist li a:hover,
#messagelist tr:hover td {
  background: var(--acid);
  color: var(--ink);
}

#messagelist tr.selected td {
  background: var(--ink);
  color: var(--paper);
}

input[type="text"],
input[type="password"],
textarea,
select {
  border: 1px solid var(--ink);
  border-radius: 0;
  box-shadow: none;
  background: var(--field);
  color: var(--ink);
}

input:focus,
textarea:focus,
select:focus {
  outline: 3px solid var(--acid);
  outline-offset: 1px;
}

input[type="submit"],
input[type="button"],
button,
.button,
.toolbar .button {
  border: 1px solid var(--ink);
  border-radius: 0;
  box-shadow: none;
  background: var(--ink);
  color: var(--paper);
  font-family: "DM Mono", "Courier New", monospace;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover,
.toolbar .button:hover {
  background: var(--acid);
  color: var(--ink);
}

#login-form,
#login-form .box-inner,
#login-form .boxcontent {
  border-color: var(--ink);
  border-radius: 0;
  box-shadow: none;
  background: var(--paper);
}

#login-form #logo {
  max-width: 260px;
  height: auto;
}

#toplogo {
  display: block;
  width: 180px;
  max-width: calc(100% - 40px);
  height: auto;
  max-height: 36px;
  margin: 8px 12px;
}

#topnav {
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
}

#taskbar a.button-selected,
#taskbar a.button-selected:hover {
  background: var(--acid);
  border-color: var(--acid);
  color: var(--ink);
}

#taskbar a.button-selected::before,
#taskbar a.button-selected:hover::before {
  color: var(--ink);
}