:root{
  color-scheme: light dark; /* enables both light and dark mode */

  /* standardized theme colours*/
--dark-main:         #121212;
--dark-navigation:   #1f1f1f;
--dark-tab:          #1a1a1a;
--dark-txt:          #e9e9e9;

--light-main:        #e9e9e9;
--light-navigation:  #dddddd;
--light-tab:         #f5f5f5;
--light-txt:         #121212;

--transparent:       #00000000;
}

::selection{
  background-color: rgb(0, 217, 255);
  color: white;
}

:any-link{color: white;}
::marker{color:  green;}

body{
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  align-items: flex-start;
  height: 100vh;
  background-color: var(--dark-main);
  margin: 0;
}

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

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

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

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

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

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

#table-of-contents{
  border-left: 1px rgb(83, 83, 83) solid;
  position: fixed;
  margin-left: 190px;
}

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

#increase-btn{
  background-color: rgb(0, 217, 255);
  padding: 10px;
}