.container { margin: 0 auto; max-width: 800px; width: 80%; } main, footer, .nav-container { display: block; margin: 0 auto; max-width: 800px; width: 80%; } .alignright { float: right; margin: 5px 0 4px 15px !important; } .alignleft { float: left; margin: 5px 15px 0px 0px !important; } .aligncenter { display: block; margin-left: auto !important; margin-right: auto !important; } .external-icons { color: $default-shade; font-family: $sans-serif; font-size: 2.4rem; line-height: 0.9; text-align: center; a { color: $default-shade; } } .zola-anchor { color: $default-shade; } .nav { box-shadow: 0 2px 2px -2px $shadow-color; overflow: auto; &-container { margin: 1rem auto; position: relative; text-align: center; } &-title { @include transition(all .2s ease-out); color: $default-color; display: inline-block; margin: 0; padding-right: .2rem; &:hover, &:focus { opacity: .6; } } ul { list-style-type: none; margin: 1rem 0 0; padding: 0; text-align: center; } li { @include transition(all .2s ease-out); color: $default-color; display: inline-block; opacity: .6; padding: 0 2rem 0 0; &:last-child { padding-right: 0; } &:hover, &:focus { opacity: 1; } } a { color: $default-color; font-family: $sans-serif; } } .tags { color: $default-tint; font-size: 13px; } .tags:before { margin: 0px 8px 0px 0px; } @media (min-width: 600px) { .nav { &-container { text-align: left; } ul { bottom: 0; position: absolute; right: 0; } } } footer { font-family: $sans-serif; padding: 2rem 0; text-align: center; span { color: $default-color; font-size: .8rem; } } .embed-video { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; margin-bottom: 1em; iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } }