HOD2018_website/public/css/style.scss

$breakpoint-phone: 600px;
$breakpoint-tablet: 900px;
$breakpoint-normal-screen: 1200px;
$breakpoint-big-screen: 1800px;

 body {
   margin:0;
   padding:0;
   background: #000001;
   color: #37ffad;
   font-family: monospace;
   main{
     article{
       max-width:42em;
       margin:auto;
     }
   }

   section{
     background-color: lawngreen;
   }

   @media screen and (max-width: $breakpoint-phone) {
     main{
       margin: 0 5% 0 5%;
     }
   }
   @media screen and (min-width: $breakpoint-phone) {
     main{
       margin: 0 20% 0 20%;
     }
   }
   @media screen and (min-width: $breakpoint-tablet) {
     main{
       margin: 0 25% 0 25%;
     }
   }
 }

header {
  background-color: yellow;
}