@media(prefers-color-scheme: dark){
  :root{
    --background:         #121212;
    --navigation:         #1f1f1f;
    --table-of-contents:  #1a1a1a;
    --txt:                #e9e9e9;
    --transparent:        #00000000;
    --basic-font:         Arial;
    --white:              #ffffff;
    --pink:               #ff87fb;
    --red:                #e33b4c;
    --orange:             #ffa940;
    --yellow:             #ffd969;
    --lime:               #67ff5c;
    --green:              #0cb300;
    --light-blue:         #00d9ff;
    --blue:               #3b5ae3;
    --purple:             #7b3be3;
    --grey:               #888888;
    --black:              #141414;
  }

  ::selection{
    background-color: #00c5ab;
    color: white;
  }

  :any-link{
    color: white;
  }

  ::marker{
  color:  #b8b8b8;
  }
}

@media(prefers-color-scheme: light){
  :root{
    --background:         #dddddd;
    --navigation:         #e9e9e9;
    --table-of-contents:  #f5f5f5;
    --txt:                #121212;
    --transparent:        #00000000;
    --basic-font:           Arial;
    --white:              #ffffff;
    --pink:               #ff87fb;
    --red:                #e33b4c;
    --orange:             #ffa940;
    --yellow:             #ffd969;
    --lime:               #67ff5c;
    --green:              #0cb300;
    --light-blue:         #00d9ff;
    --blue:               #3b5ae3;
    --purple:             #7b3be3;
    --grey:               #888888;
    --black:              #141414;
  }

  ::selection{
    background-color: #19ffe0;
    color: black;
  }

  :any-link{
    color: black;
  }

  ::marker{
  color:  #b8b8b8;
  }
}

body{
  font-family: var(--basic-font);
  display: flex;
  align-items: flex-start;
  height: 100vh;
  background-color: var(--background);
  margin: 0;
  color: var(--txt);
}

nav{ 
  background-color: var(--navigation);
  width: fit-content;
  max-width: 200px;
  height: 100vh;
  padding: 0px 20px 0px 20px;
  border-radius: 0px 10px 10px 0px;
  position: fixed;
}

nav > a{
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

nav > a:hover{
  transform: scale(1.2);
  transition: transform 0.1s ease;
}

nav > a:link{
  text-decoration: none;
}

nav > a > img{
  height: 50px;
  width: 50px;
}

main{
  margin: 100px 0px 0px 500px;
}

textarea{
  resize: none;
  padding: 10px;
  border-radius: 10px;
  border: none;
  word-wrap: normal;
}

#table-of-contents{
  height: fit-content;
  border-radius: 0px 10px 10px 0px;
  position: fixed;
  margin-left: 190px;
  padding-bottom: 20px;
}

.box{
  border-radius: 10px 10px 10px 10px;
  margin: 50px;
  background-color: var(--navigation);
  padding: 20px;
}

#counter-display{
font-size: 5rem;
}

#button-clicker-reset-btn{
  background-color: var(--red);
  padding: 10px;
  height: 100px;
  width: 100px;
  border-radius: 25px;
  border: none;
}

#button-clicker-reset-btn:hover{
  background-color: #d13747;
}

#button-clicker-reset-btn:active{
  background-color: #bb323f;
}

#increase-btn{
  background-color: var(--light-blue);
  padding: 10px;
  height: 100px;
  width: 100px;
  border-radius: 25px;
  border: none;
}

#increase-btn:hover{
  background-color: #00bddf;
}

#increase-btn:active{
  background-color: #00afce;
}

.box > table, th, tr, td{
  border: 1px solid #7a7a7a;
  padding: 5px;
  text-align: center;
}