@import "variables";
@import "mixins";

// A generic card style
%card-style {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    text-align: center;
}

// A generic Roboto style
%roboto-font {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
}

html {
    height: 100%;
}

body {
    @extend %roboto-font;
    min-height: 100%;
    background-color: $background-primary;
    color: $font-color-primary;
}


h1, h2, h3, h4, h5, h6 {
    color: $font-color-primary;
    font-family: map-get($roboto-font-settings, 'font-family');
    font-weight: 500; // headings usually have a bit heavier font weight
    text-transform: uppercase;
    margin-top: 0;  // to reset default margins
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.75em;
}

h4 {
    font-size: 1.5em;
}

h5 {
    font-size: 1.25em;
}

h6 {
    font-size: 1em;
}

p {
    color: $font-color-primary2;
    font-family: map-get($roboto-font-settings, 'font-family');
    font-weight: map-get($roboto-font-settings, 'font-weight');
    margin: 0 0 1em;
    line-height: 1.6;
    font-size: 1.5em;
}

a {
    text-decoration: none;
    transition: color 0.3s;

    &:hover {
        text-decoration: underline;
    }
}