/* preparation layer */

* {
  /* quick reset, do not use in production! */
  border: 0;
  padding: 0;
  margin: 0;
}


/* element layer */

body {
  font-family: sans-serif;
}


/* general layer */

/* light theme */
.t--light {
  background-color: hsl(0, 0%, 99.99%);
  color: hsl(0, 0%, 5%);
}

.t--light .t-menu {
  background-color: hsl(200, 50%, 60%);
}

.t--light .t-menu__item {
  background-color: hsl(0, 0%, 85%);
  color: hsl(0, 0%, 5%);
}

/* dark theme */
.t--dark {
  background-color: hsl(0, 0%, 15%);
  color: hsl(0, 0%, 95%);
  
  /* font hack for dark themes */
  -webkit-font-smoothing: antialiased !important;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
  -webkit-text-stroke: 1px transparent;
}

.t--dark .t-menu {
  background-color: hsl(200, 50%, 30%);
}

.t--dark .t-menu__item {
  background-color: hsl(0, 0%, 15%);
  color: hsl(0, 0%, 95%);
}


/* object layer */

.o-menu__item {
  height: 25px;
  width: 100px;
    
  transition-duration: .3s;
  transition-property: *;
}


/* component layer */

.c-container {
  height: 100%;
  width: 100%;
  
  transition-duration: .3s;
  transition-property: *;
}

.c-menu {
  width: calc(100% - 25px);
  height: 40px;
  padding-left: 25px;
  
  transition-duration: .3s;
  transition-property: *;
}