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;
}

.hide-on-mobile {
    @include medium-is-phone {        
        display: none;
    }
}

.horizontal-line {
    color:          transparent;
    border-bottom:  4px dotted rgba($color-text, 0.25);
    /*
       Chromium does not interpret the line above, the short notation
       "border-bottom", correctly, since it also delivers
       user-agent specific CSS.
       One needs to add the long notation "border-width" and "border-style"
       for Chromium as well.
    */
    border-width:   4px;
    border-style:   dotted;
    &.across_whole_page {
        width:          100vw;
        margin-left:    -$document-side-margin;
    }
    &.inside_container  {
        border-top:     none;
        width:          100%;
    }
}