/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

.dark-primary-color    { background: #303F9F; }
.default-primary-color { background: #3F51B5; }
.light-primary-color   { background: #C5CAE9; }
.text-primary-color    { color: #FFFFFF; }
.accent-color          { background: #009688; }
.primary-text-color    { color: #212121; }
.secondary-text-color  { color: #757575; }
.divider-color         { border-color: #BDBDBD; }

body {
    margin: 0;
}

main {
    margin: 8px;
}

nav {
    background-color: #3F51B5;
    width: 100%;
    display: grid;
    grid-template-columns: max-content max-content auto;
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.20);
}

nav a {
    color: white;
    text-decoration: none;
    font-family: Helvetica, sans-serif;
    font-size: 18px;
    transition: .3s all ease-in-out;
}

nav a:hover {
    background-color: #009688;
}

#nav-toggle {
    display: none;
}

#nav-toggle:checked ~ .left-menu {
    display: grid;
    grid-row: 2;
    grid-column: 1/-1;
}

.burger-menu {
    display: inline-block;
    grid-column: 1;
    align-self: center;
    padding: 1rem;
}

.left-menu {
    display: none;
    grid-column: 1;
    align-self: center;
    text-transform: uppercase;
}

.left-menu a {
    padding: 15px 0 10px 1rem;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: .5px;
}

.right-menu {
    display: inline-block;
    grid-column: 3;
    text-align: right;
    font-size: 12px;
    align-self: center;
}

.right-menu a {
    padding: 1.4rem 1rem 1.35rem 1rem;
    font-size: 16px;
}

.logo {
    grid-column: 2;
    padding: 1rem 1rem 1rem 0;
    font-family: Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 800;
    align-self: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.logo:hover {
    background-color: transparent;
}