html {

box-sizing: border-box;

} *, *:before, *:after {

box-sizing: inherit;

}

/* material design box shadow */ .card-1 {

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
&:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

}

.card-2 {

box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  &:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.35), 0 10px 10px rgba(0,0,0,0.22);
}

}

.card-3 {

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

}

/* animation keyframes */ @keyframes fadeInUp {

from {
  opacity: 0;
  transform: translate3d(0, 100%, 0);
}
to {
  opacity: 1;
  transform: none;
}

}

.fadeInUp {

animation-name: fadeInUp;

}

.no-select {

-webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
                                supported by Chrome and Opera */

}

/* Google font */ $primary-fomt: 'Fjalla One', sans-serif; $secondary-font: 'Anton', sans-serif;

/* color palette */ $primary-100: #8a9a9a; $primary-500: #CC00FF; $primary-700: #8F00B2;

$accent-100: #B9F6CA; $accent-200: #88B04B; $accent-300: #A4FF19; $accent-400: #44883c;

$primary-link: $accent-400;

$font-small-x: 1.2rem; $font-small: 1.4rem; $font-regular: 1.6rem; $font-large: 2rem;

/* Rules for sizing the icon. */ .material-icons.md-18 { font-size: 18px; } .material-icons.md-24 { font-size: 24px; } .material-icons.md-36 { font-size: 36px; } .material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */ .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); } .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */ .material-icons.md-light { color: rgba(255, 255, 255, 1); } .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

html { font-size: 62.5%; } /* =10px */ body { font-size: 1.6rem; } /* =14px */ h1 { font-size: 2.6rem; } /* =24px */ h2 { font-size: 2.2rem; } /* =24px */ h3 { font-size: 2rem; } /* =24px */

body {

background: #ffffff;

}

header {

display: flex;
justify-content: space-between;
z-index: 10;
position: fixed;
top: 0; left: 0;
width: 100%;
height: 60px;  
padding: 5px 10px;
background: $primary-700;
.header-logo {
    display: flex;
    align-items: center;
    a {
        font-family: $secondary-font;
        font-size: 40px;
        color: $accent-300;
        text-decoration: none;
        @include transition(color .3s ease-out);
        &:hover {
            color: $accent-300;
        }
    }
}

}

.header-navigation {

    position: fixed;
    bottom: 10px;
    right: 10px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
&-icon {
    display: flex;
    flex-direction: column;
    align-items: center;  
    z-index: 10;
    color: #ffffff;
    cursor: pointer;
    @include transition(all .3s ease-out);
    div {
        display: flex;
        border-radius: 50%;
        padding: 5px;
        background: $primary-700;
    }
    &:hover {
        div {
            background: $primary-500;
        }
    }    
    &.enabled {
        div {
            background: #ffffff;
            color: $primary-700;
            transform: rotate(360deg);
        }
    }    
    @include media (">phone") {
    }
}
&-menu {
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    align-items: flex-start;
    z-index: 8; 
    animation: .3s ease-out fadeInUp;
    list-style: none;
    margin: 0;
    &.disabled {
        display: none;
    }
    &.enabled {
        display: flex;
        position: fixed;
        top: 60px; left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba($primary-700, .9);
    }
    a {
        font-size: $font-large;
        font-weight: bold;
        text-transform: uppercase;
        text-decoration: none;
        color: $accent-100;
    }
        @include media (">phone") {
    }
}

}

main {

margin: 20px 0;
padding: 10px 20px;

}