body {
  padding: 0px;
  font-family: 'Rubik', sans-serif;
}
.main{
  overflow: hidden;
  min-height: 100vh;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
.menu{
  background-color: white;
  color:  var(--main-sail-color);
  font-weight: 900;
  padding-left: 0;
  padding-right: 0;
  position: fixed;
  top: 0;
  left: 0;
  height: var(--menu-height-xs);
  width: 100%;
  z-index: 2;
}
.content{
  background-color:  var(--main-sail-color);
  color: white;
  min-height: 100vh;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
  padding-top: var(--menu-height-xs);
}
@media(min-width:576px){
 .menu{
   height: var(--menu-height-s);
 }
 .content{
   padding-top: var(--menu-height-s);
 }
}
@media(min-width:768px){
  .menu{
   width: var(--menu-width-m);
   height: 100vh;
   padding-left: 0;
   padding-right: 0;
  }
  .content{
    padding-top: 0;
    padding-left: var(--menu-width-m);
  }
}
@media(min-width:992px){
  .menu{
    width: var(--menu-width-l);
  }
  .content{
    padding-left: var(--menu-width-l);
  }
}
@media(min-width:1200px){}