@import url('https://fonts.googleapis.com/css2?family=Tiny5&display=swap');

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

:root {
  --color-accent: darkolivegreen
}

[data-theme="light"] {
  --color-bg: white;
  --color-bg-accent: #f1f1f1;
  --color-fg-accent: #1a1a1a;
  --color-fg: #101310;
}

[data-theme="dark"] {
  --color-bg: #101310;
  --color-bg-accent: #1a1a1a;
  --color-fg-accent: #f1f1f1;
  --color-fg: white;
}

body {
  font-family: "Tiny5", sans-serif;
  font-optical-sizing: auto;
  background-color: var(--color-bg);
  color: var(--color-fg);
}

.container {
  display: flex;
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  flex-direction: column;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .75rem 1.5rem;
  background-color: var(--color-bg-accent);

  border-bottom: #242424 2px solid;
}

.fa-dice-d20 {
  color: var(--color-accent);
}

nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

nav ul {
  display: flex;
  list-style: none;
  gap: 1rem;
  justify-content: center;
}

nav ul li a {
  font-weight: bold;
  text-decoration: none;
  color: var(--color-fg);
}

nav ul li a:hover {
  color: var(--color-fg-accent);
}

nav ul li a.active {
  color: var(--color-accent);
}

header .wrapper {
  display: flex;
  gap: 1rem;
}

main {
  width: 100%;
  height: 100%;
  display: flex;
}

.hidden {
  display: none;
}

/* Notes page */
.directory {
  display: flex;
  border-right: #242424 2px solid;
  flex: 1;
  flex-direction: column;
  gap: 0;
  user-select: none;
}

.directory .nav {
  display: flex;
  justify-content: space-between;
  padding: .25rem;
  border-bottom: #242424 2px solid;
  margin-bottom: .25rem;
  color: var(--color-fg);
}

.directory .nav .controls i {
  color: #727272;
  transition: color .2s ease-in-out;
}

.directory .nav .controls i:hover {
  color: var(--color-fg);
  scale: 1.05;
}

.directory > button {
  width: 100%;
  height: 1.3rem;
  text-align: left;
  border: none;
  outline: none;
  background-color: transparent;
  color: white;
}

.directory .folder::before {
  color: var(--color-accent);
  font-family: "Font Awesome 5 Free";
  content: "\f07c";
  margin-right: .3rem;
  margin-left: .3rem;
  font-weight: 900;
}

.directory .folder[folded] ~ * {
  display: none;
}

.directory .folder[folded]::before {
  color: var(--color-accent);
  font-family: "Font Awesome 5 Free";
  content: "\e185";
  margin-right: .3rem;
  margin-left: .3rem;
  font-weight: 900;
}

.directory .file::before {
  /* color: var(--color-accent); */
  font-family: "Font Awesome 5 Free";
  content: "\f15c";
  margin-right: .3rem;
  margin-left: .3rem;
  font-weight: 900;
}

.note-wrapper {
  display: flex;
  flex-direction: column;
  flex: 5;
}

.note-wrapper .title-container {
  padding: .3rem;
  border-bottom: #242424 2px solid;
}

.note-wrapper .title-edit {
  color: var(--color-fg);
  font-size: 1.5em; 
  font-weight: bold; 
  border: none; 
  background-color: transparent; 
  margin: 0; 
  padding: 0; 
  outline: none; 
}

.note-container {
  flex: 5;
  padding: 1rem 1rem 1rem 1rem;
  max-height: 100%;
}

.note-edit {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  color: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: inherit;
  height: 100%;
  width: 100%;
  outline: none;
  background-color: transparent;
  border: none;
  color: var(--color-fg);
  resize: none;
  font-size: 1rem;
  font-weight: normal;
}

.note-edit::-webkit-scrollbar {
  width: 0;
}

.note {
  height: 100%;
  width: 100%;
}

.note ul, .note ol {
  padding-left: 1em;
}

/* buttons and general stuff */
.themeSwitch {
  opacity: 0;
  position: absolute;
}

.themeSwitch-label {
  background-color: #111;
  width: 50px;
  height: 26px;
  border-radius: 50px;
  position: relative;
  padding: 5px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fa-moon {color: #f1c40f;}

.fa-sun {color: #f39c12;}

.themeSwitch-label .ball {
  background-color: #fff;
  width: 22px;
  height: 22px;
  position: absolute;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  transition: transform 0.2s linear;
}

.themeSwitch:checked + .themeSwitch-label .ball {
  transform: translateX(24px);
}

.session-center {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
}

.session-center > form {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	height: fit-content;
	padding: 3rem;
	width: 280px;
}

/*  second form */
.session-center > .join {
	border-left: #242424 2px solid;
	border-right: #242424 2px solid;
}