@font-face {
  font-family: 'Excon'; /* Give your font a name */
  src: url('fonts/Excon-Variable.ttf') format('truetype'); /* Path to the file */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Array'; /* Give your font a name */
  src: url('fonts/Array-Regular.ttf') format('truetype'); /* Path to the file */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi'; /* Give your font a name */
  src: url('fonts/Satoshi-Variable.ttf') format('truetype'); /* Path to the file */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Bebas Neue'; /* Give your font a name */
  src: url('fonts/BebasNeue-Regular.ttf') format('truetype'); /* Path to the file */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'RX100'; /* Give your font a name */
  src: url('fonts/RX100-Regular.ttf') format('truetype'); /* Path to the file */
  font-weight: normal;
  font-style: normal;
}

:root {
  --base-clr: 	#0f0f10;
  --line-clr: #282829;
  --hover-clr: 	#232326;
  --text-clr: #adadad;
  --accent-clr: #7367a4;
  --secondary-text-clr: #a6a6a7;
  --head-foot-clr: var(--base-clr);
  --connection-success: #2db434;
  --connection-failure: #ce4040;

  --line-width: 2px;

  --hover-push: 2em;
}

body {
    background-color: var(--base-clr);
    font-family: 'Excon';
    display: grid;
    margin: 0;
    padding: 0;
    height: 100dvh;
    color: var(--text-clr);
}

header {
    background-color: var(--head-foot-clr);
    font-family: 'Array';
    font-size: 5em;
    text-align: left;
    padding: 0;
    margin: 0;
    height: 10dvh;
    align-items: center;

    user-select: none;
}

header span {
    margin: 0.25em;
}

header .material-symbols-outlined {
    font-size: 70%;
}

footer {
    background-color: var(--head-foot-clr);
    text-align: center;
    padding: 0;
    margin: 0;
    height: 5dvh;
    font-size: 80%;
}

#primary {
    font-family: 'RX100';
    display: flex;
    width: 100%;
    height: 85dvh;
    box-sizing: border-box;
    
    border: var(--line-width) solid var(--line-clr);    
    border-left-width: 0;
    border-right-width: 0;
}

main {
    flex: 1;
    height: 100%;
    padding: 0;
    display: flex;

    border: 0 solid var(--line-clr);
    border-left-width: var(--line-width);
}

.title {
    flex: 1;
    display: flex;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    justify-content: center;
    text-align: center;
    font-family: 'RX100';
    font-weight: 700;
    font-size: 4em;
}

#sidebar {
    display: flex;
    align-self: flex-start;
    width: 20%;
    height: 100%;
    position: sticky;
    text-wrap: nowrap;
}

#sidebar ul {
  list-style: none;
  width: 100%;
  padding: 0;
  margin: 0;
}

#sidebar li {
  box-sizing: border-box;
  height: 20%;
  padding-left: 1em;
  text-decoration: none;
  color: var(--text-clr);
  display: flex;
  align-items: center;
  gap: 1em;
  font-size: 130%;
  border-left: 0em solid hsla(calc(200 + sibling-index() * 60) 0% 100% / 0%);

  user-select: none;

  margin-left: 0;
  
  transition: all 250ms ease;
}


#sidebar li:nth-child(1) { --i: 0; }
#sidebar li:nth-child(2) { --i: 1; }
#sidebar li:nth-child(3) { --i: 2; }
#sidebar li:nth-child(4) { --i: 3; }
#sidebar li:nth-child(5) { --i: 4; }
#sidebar li:nth-child(6) { --i: 5; }

#sidebar li:hover {
  background-color: var(--hover-clr);
  border-left: var(--hover-push) solid hsla(calc(200 + sibling-index() * 60) 80% 75% / 100%);
  font-size: 130%;
  color: hsl(calc(200 + sibling-index() * 60) 80% 75% / 100%);
}

#eink, #knob, #lights, #switch {
    display: none;
}

.clickable {
    cursor: pointer;
}

#toggleSidebar {
    padding: 0;
    margin: 0;
    width: 3em;
    height: 3em;
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center;
}

#toggleSidebar span {
    font-size: 3em;
    user-select: none;
    cursor: pointer;
}

#serial-connect {
    display: flex;
    position: absolute;
    left: 100%;
    transform: translate(-100%, 0);
    width: 0em;
    height: 3em;
    text-wrap: nowrap;
    background: #00000000;
    color: var(--text-clr);
    font-size: 0.2em;
    align-items: center;
    justify-content: right;
    font-family: 'RX100';
    padding-right: 15px;
    border-right: 0 solid #59507c;

    transition: all 250ms;
}

#serial-connect:hover {
    background: var(--hover-clr);
    width: 9em;
    color: var(--accent-clr);
    border-right-width: 0.4em;
}

#connection-status {
    display: flex;
    font-family: 'RX100';
    font-size: 0.7em;
    color: var(--connection-failure);
    text-align: center;
    align-items: center;
}