h1
{
  font-family: 'Varela Round', 'Roboto', sans-serif;
  color: white;
}

/* _______HEADER_______ */

.sidebar 
{
  margin-top: 6.6vh;
  height: 100%;
  width: 26vh;
  min-width: 130px;
  position: fixed;
  left:-80%;
  top: 0;
  background-color: #0F0F0F;
  z-index: 201;
  aspect-ratio: 1920/1080;
  transition: 0.3s;
  /* transform: translateX(-100%); */
}

 /*_______TOGGLE______ */
hr
{
  border: 1px solid;
}

.sidebar-toggle
{
  width: 100%;
  height: 4vh;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.toggle-btn {
  height: 100%;
  width: 50%;
  background: #212121;
  color: white;
  border: none;
  font-family: 'Varela Round', 'Roboto', sans-serif;
  font-size: 2vh;
}

#toggle-services
{
  background: #0F0F0F;
}

#toggle-tools
{
  background: hsl(0, 0%, 13%);
}

 /*_________SERVICES________ */
.sidebar-services
{
  position: absolute;
  background-color: #0F0F0F;
  height: 100%;
  width: 100%;
}

.services-side
{
  margin: 0;
  font-size: 1.6vh;
  padding: 1.3vh 0vh 0vh 0vh;
  text-align: center;
}

.sidebar ul {
  list-style: none;
  margin: 1.6vh;
  padding: 0;
  text-align: center;
  border-color: white;
  border-radius: 3px;
  background-color: #212121;
  border: .3vh solid #fff;
}

ul li 
{
  padding: .7vh 0vh .7vh 0vh;
}

a 
{
  font-family: 'Varela Round', 'Roboto', sans-serif;
  text-decoration: none;
  text-align: center;
  color: rgb(255, 255, 255);
  font-size: 1.6vh;
}

a:hover
{
  color: gold;
}

/* __________TOOLS__________ */

.sidebar-tools
{
  position: absolute;
  background-color: #0F0F0F;
  height: 100%;
  width: 100%;
  display: none;
}