_general.scss

html,
body {
    font-family:    "Corporate S";

    /*
        Reduce the font size and line height on smaller screens to make better
        use of the reduced screen space.
    */
    @include respond-to-medium(font-size, 20px, 18px, 18px);
    @include respond-to-medium(line-height, 1.5, 1.5, 1.375);
}

/*
    The following allows the body to insert as much space as needed between
    main and footer, pushing the footer to the bottom if the screen is very
    narrow but high and main does not have enough content to fill the screen.
*/
body {
    position:           relative;
    min-height:         100vh;
    display:            flex;
    flex-direction:     column;
    justify-content:    space-between;
    overflow-x:         hidden;
    background-color:   $color-content-light-gray;
}

/*
    Logo-Links are used in the header and footer for logos that are important
    and require to be a bit more exposed. They will be fit to a configured width
    so make sure the images do not bring any extra padding.
*/
a.logo-link {
    display:        inline-block;

    /* Within the link an <img> with class="logo" shall be placed */
    img.logo {
        display:    block;
        height:     auto;

        @include respond-to-medium(width,       $logo-width);
        @include respond-to-medium(min-height,  $logo-min-height);
    }
}

a {
    color:              $color-helmholtz-blue;
    text-decoration:    none;
    transition:         color .2s ease;

    &:hover {
        color:          $color-helmholtz-bright-blue;
    }
}

h3,
h2,
h1 {
    word-wrap:      break-word;
}

h1 {
    @include font-very-large;
}

h2 {
    @include font-large;
}