/* Variables */
:root {

  --test0: white;
  --test1: aquamarine;
  --test2: lightblue;
  --test3: orange;
  --test4: lightpink;

  --colorLink: aquamarine;
  --colorText: #020605;
  --colorBackground: #f2ead4;

  --accent1: orange;
}

* {
  scrollbar-width: thin;
  scrollbar-color: lightgrey white;
}

body {
  background-color: var(--test0);
  color: var(--colorText);
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  margin: 0;
  height: 100vh;
}


main {
  display: flex;
  flex: 1 1 auto;
  flex-flow: row nowrap;
  align-items: flex-start;
  background-color: var(--test4);
}

main > .sidebar {
  flex: 2 2 10em; /*flex-grow flex-shrink flex-basis (start)*/
	max-width: 200px;
  height: 100%;
	padding: 1em;
  background-color: var(--test1);
}

main > .content {
	display: block;
  flex: 1 1 1200px;
	max-width: 1200px;
  height:100%;
	padding: 1em;
  background-color: var(--test2);
}

.content .guestbook {
  width: 100%;
  min-width: 400px;
  max-width: 800px;
  height: 600px;
  margin: 0 0 0 80px;
}

.content .logbox {
  border-style: groove;
  border-color: var(--accent1);
  width: 100%;
  max-width: 300px;
  height: 600px;
}

.content .row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.content .empty {

}

h1, h2, h3 {
    font-family: 'Montserrat';
  }
  
  h1 {
    margin-top: 20px;
  }
  
  h3 {
    font-size: larger;
  }
  
  .row {
    display: flex;
    flex-direction: row;
  }
  

header {
  position: relative;
  background-color: var(--test3);
}

footer {
  background-color: var(--test3);
}

summary {
  cursor:pointer;
}

.logdate {
  font-family:'Montserrat';
  font-weight: 600;
}

.todo {
  position: relative;
  padding-left: 5px;
  list-style: none;
}

/*Pseudo element -> absolute position makes it fixed and doesn't move the text around*/
.todo::before {
content: "\2610"; /* Unicode code point for ☐ */
position: absolute;
left: -20px;
top: 0;
}

.done {
position: relative;
padding-left: 5px;
color: lightgray;
list-style: none;
}

.done::before {
content: "\2612"; /* Unicode code point for ☒ */
position: absolute;
left: -20px;
top: 0;
}

.highlight {
  background-color: yellow;
}