$primBG: rgb(248, 248, 248)
$columns: 12
$navBG: #f1f1f1
$navgap: 1em
$navdefcolor: #2e2e2e
$navhovcolor: #a5a5a5
$primary: #3498db
$primary_dark: #2980b9
$danger: #e74c3c
$danger_dark: #c0392b
$warning: #f1c40f
$warning_dark: #f39c12
$success: #2ecc71
$success_dark: #27ae60
*
  box-sizing: border-box
body   
  margin: 0
  padding: 0
  background: $primBG
  font-family: sans-serif
// Nav Overlapping fix
main
  z-index: 980
  position: relative
  top: 5.5em
  width: 100%
  word-break: break-all

// header classes margin fix
@for $i from 1 through 12
     h#{$i}
       margin: 0
// Dev Classes
.dev
  border: 1px solid black
.display 
  background-color: lightcoral
  border: 1px solid red
  text-align: center
// Container
.container 
  width: calc( 100% - 10em )
  max-width: 90em
  margin: 0 auto
// Alert
.alert-primary
  border-radius: 2px
  background-color: $primary
  border: 1px solid $primary_dark
  padding: 1rem
  color: white
.alert-danger
  border-radius: 2px
  background-color: $danger
  border: 1px solid $danger_dark
  padding: 1rem
  color: white
.alert-warning
  border-radius: 2px
  background-color: $warning
  border: 1px solid $warning_dark
  padding: 1rem
  color: white
.alert-success
  border-radius: 2px
  background-color: $success
  border: 1px solid $success_dark
  padding: 1rem
  color: white
.notification-primary
  width: 100%;
  display: flex
.notification-primary h2
  border-right: 0.3rem solid $primary
  border-radius: 2px
  padding: 5px
  margin-right: 5px;
  min-width: 70px
  height: auto
  display: flex
.notification-danger
  width: 100%;
  display: flex
.notification-danger h2
  border-right: 0.3rem solid $danger
  border-radius: 2px
  padding: 5px
  margin-right: 5px;
  min-width: 70px
  height: auto
  display: flex
.notification-warning
  width: 100%;
  display: flex
.notification-warning h2
  border-right: 0.3rem solid $warning
  border-radius: 2px
  padding: 5px
  margin-right: 5px;
  min-width: 70px
  height: auto
  display: flex
.notification-success
  width: 100%;
  display: flex
.notification-success h2
  border-right: 0.3rem solid $success
  border-radius: 2px
  padding: 5px
  margin-right: 5px;
  min-width: 70px
  height: auto
  display: flex
.notification-body
  line-height: 30pt
  font-size: 15pt
  word-wrap: break-word
// Grid
div[class^="col-"]
  padding: 1rem 0
.row
  display: flex
  flex-wrap: wrap
@for $i from 1 through $columns 
  .col-#{$i}
    flex: 0 0 100% / $columns * $i
  .col-offset-#{$i}
    margin-left: 100% / $columns * $i
// Navigation
header
  background: $navBG
  text-align: center
  position: fixed
  height: 30px
  z-index: 999
  width: 100%
  height: auto
  top: 0
  padding: 10px
.nav-toggle
  display: none
.nav-toggle-label
  position: absolute
  top: 0
  left: 0
  margin-left: 1em
  height: 100%
  display: flex
  align-items: center
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after
  display: block
  background: white
  height: 2px
  width: 2em
  border-radius: 2px
.nav-toggle-label span::before,
.nav-toggle-label span::after
  content: ''
  position: absolute
.nav-toggle-label span::before
  bottom: 30px
.nav-toggle-label span::after
  top: 30px
nav
  position: absolute
  text-align: left
  top: 100%
  width: 100%
  left: 0
  background: $navBG
  display: none
  transform: scale(1, 0)
  transform-origin: top
  transition: transform 400ms ease-in-out
nav ul
  margin: 0
  padding: 0
  list-style-type: none
nav li
  margin-bottom: 1em
  margin-left: 1em
nav a 
  text-decoration: none
  font-size: 1.2rem
  text-transform: uppercase
  color: $navdefcolor
  opacity: 0
nav a:hover
  color: $navhovcolor
.nav-toggle:checked ~ nav
  display: block
  transform: scale(1,1)
.nav-toggle:checked ~ nav a
  opacity: 1
  transition: opacity 150ms ease-in-out
@media screen and (min-width: 800px)
  .nav-toggle-label
    display: none
  header
    display: grid
    grid-template-columns: 1fr auto minmax(600px, 1fr) 1fr
  nav
    all: unset
    display: flex
    align-items: center
  nav a
    opacity: 1
  nav ul
    display: flex
  nav li
    margin-left: $navgap
    margin-bottom: 0
    list-style: none
  // Left sided Navbar for more custumisation
  .nav-logo-left
    grid-column: 2 / span 1
  .nav-left
    all: unset
    grid-column: 3 / 4
    display: flex
    justify-content: flex-end
    align-items: center
  .nav-left ul
    display: flex
    justify-content: flex-end