/* Husky color palette */
$husky-light-dark: #252E3C;
$husky-dark: #182230;
$husky-accent: #D8A070;
$husky-foreground: white;
$husky-red: #d87073;

/* Material Design Lite variables*/
$color-primary: 37, 46, 60;
$color-primary-dark: 24, 34, 48;
$color-accent: 216, 160, 112;
$color-primary-contrast: 255, 255, 255;
$color-accent-contrast: 0, 0, 0;
$footer-bg-color: darken($husky-dark, 1.5);
$button-secondary-color: $husky-foreground;
$input-text-highlight-color: $husky-accent;
$input-text-label-color: opacify(white, 0.26);
$input-text-bottom-border-color: opacify(white, 0.12);
$text-color-primary: transparentize($husky-foreground, 0.13);
$input-text-error-color: $husky-red;

@import "material-design-lite.scss";

body { background-color: $husky-dark; }
hr { border-top-color: darken($husky-dark, 3.5); }

.inline-image { height: 2rem; }

/* Fade out credits, as they're secondary information, even in the footer. */
.credit {
    transition: opacity 250ms;

    &:not(:hover) {
        opacity: .5;
    }
}

.landing-section {
    background: $husky-light-dark;
    height: 100vh;
    /* with header
    padding-bottom: 64px;
    height: calc(100vh - 128px);
    */

    @media screen and (max-width: $grid-desktop-breakpoint) {
        text-align: center;
    }

    .landing-title {
        font-family: "Noto Serif", serif;
        font-size: 32pt;
    }

    .landing-content { height: 90%; }
    .landing-image { width: 80%; }

    .app-icon { margin-bottom: 24px; }

    .scroll-hint {
        text-align: center;
        height: 10%;
        color: transparentize($husky-foreground, .5);
        font-size: 48px;
    }
}

.section-icon {
    $iconSize: 48px;
    $padding: 12px;
    $size: $iconSize + ($padding * 2);

    background-color: $husky-accent;
    color: black;

    border-radius: $size;
    padding: $padding;

    margin-right: 24px;

    margin-top: 1em;

    width: $size;
    height: $size;

    font-size: $iconSize;
    line-height: $iconSize;
}

#followForm .mdl-textfield {
    width: 100%;
}

/* Remove this, if more content is added to the footer. */
.mdl-mini-footer {
    justify-content: center;
}

/* Undo Fontello's margin, as we don't need and aren't incorporating it in any text */
[class^="icon-"]:before, [class*=" icon-"]:before {
    margin: 0 !important;
}