@font-face {
    font-family: 'JostRegular';
        src: url('fonts/Jost-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
      }


@font-face {
    font-family: 'JostItalic';
        src: url('fonts/Jost-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
      }

@font-face {
    font-family: 'JostSemibold';
        src: url('fonts/Jost-SemiBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
      }

@font-face {
    font-family: 'JostSemiboldItalic';
        src: url('fonts/Jost-SemiBoldItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
      }

@font-face {
    font-family: 'JostLight';
        src: url('fonts/Jost-Light.ttf') format('truetype');
    font-weight: lighter;
    font-style: normal;
      }

@font-face {
    font-family: 'JostLightItalic';
        src: url('fonts/Jost-LightItalic.ttf') format('truetype');
    font-weight: lighter;
    font-style: italic;
      }

@font-face {
    font-family: 'VelekaRegular';
        src: url('fonts/Veleka-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
      }      

@font-face {
    font-family: 'VelekaItalic';
        src: url('fonts/Veleka-Italic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
      }   

@font-face {
    font-family: 'VelekaBold';
        src: url('fonts/Veleka-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
      }      

@font-face {
    font-family: 'VelekaBoldItalic';
        src: url('fonts/Veleka-BoldItalic.otf') format('opentype');
    font-weight: bold;
    font-style: italic;
      }      

body
{
    max-width: 60em;
    margin: 1em auto;
    margin-top:1.5em;
    color: #5F5F5F;
    background-color: white;
}


h1
{
    text-align: left;
    font-family: JostRegular, Arial, Helvetica, sans-serif;
    font-size: 1.6em;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #5F5F5F;
}

h2
{
    font-family: JostRegular, Arial, Helvetica, sans-serif;
    margin-top: 2em;
}

h3
{
    font-family: JostRegular, Arial, Helvetica, sans-serif;
    margin-top: 2em;
}

h4
{
    font-family: JostRegular, Arial, Helvetica, sans-serif;
    margin-top: 2em;
}

p
{
    font-size: larger;
    font-family: VelekaRegular, Georgia, 'Times New Roman', Times, serif;
    line-height: 150%;
}

figure
{
    position: relative;
    float: right;
    margin: .5em;
    padding: .5em;
    width: 45%;
    border: none;
    background: #5F5F5F;    
}

figcaption
{
    font-size: smaller;
    font-family: JostRegular, Georgia, 'Times New Roman', Times, serif;
    text-align: center;
    padding: .8em;
}


.fright
{
    float: right;
    width: 50%;
    margin-left: 1em;
}

.fleft
{
    float: left;
    width: 50%;
    margin-right: 1em;
}

.full
{
    width: 100%;
    border-radius: 10px;
}

.ppreview
{
    font-family: JostRegular, Arial, Helvetica, sans-serif;
    margin-bottom: 3em;
    hyphens: none;
}

em
{
    font-family: VelekaItalic, Georgia, 'Times New Roman', Times, serif
}

sup
{
    font-size: smaller;
}

strong
{
    font-family: VelekaBold, Georgia, 'Times New Roman', Times, serif
}

ol
{
    font-family: VelekaRegular, Georgia, 'Times New Roman', Times, serif;
    line-height: 150%;
}

ul
{
    font-family: VelekaRegular, Georgia, 'Times New Roman', Times, serif;
    line-height: 150%;
}

nav
{
    border-top-width: 1px;
    border-top-style: none;
    border-top-color: #5F5F5F;
    border-bottom-width: 1px;
    border-bottom-style:dotted;
    border-bottom-color: #5F5F5F;
}

footer
{
    border-top-width: 1px;
    border-top-style: dotted;
    border-top-color: #5F5F5F;
    text-align: center;
    font-family: JostLight, Arial, Helvetica, sans-serif;
    margin-top: 5em;
}


/* for small displays */
@media all and (min-width: 20em) {
    article
    {
        margin-top: 5em;
        margin-left: 1.5em;
        margin-right: 1.5em;
        color: #5F5F5F;
    }

    .featurep
    {
        margin-left: 2.5%;
        margin-top: 0;
        padding-bottom: 0.1em;
    }    
}

/* for wider displays */
@media all and (min-width: 40em) {
    article
    {
        margin-top: 5em;
        margin-left: 0.5em;
        margin-right: 17.5%;
        color: #5F5F5F;
    }

    .index
    {
        margin-top: 2em;
        margin-left: 1.5em;
        margin-right: 17.5%;
        width: 65%;
    }

    .featurep
    {
        margin-left: 2.5%;
        margin-top: 0;
        padding-bottom: 0.1em;
        width: 70%;
    }    
}

.pside
{
    font-family: JostLight, Arial, Helvetica, sans-serif;
    font-size: medium;
}

.author
{
    font-family: JostSemibold, Arial, Helvetica, sans-serif;
    font-size: smaller;   
    margin-bottom: 0; 
}

.date
{
    font-family: JostRegular, Arial, Helvetica, sans-serif;
    font-size: smaller;  
    margin-top: 0;  
}

.menuitems
{
    font-family: JostLight, Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: medium;
}


.footertext
{
    font-family: JostLight, Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: medium;
    margin-left: 25%;
    margin-right: 25%;
}

.h1light
{
    font-family: JostLight, Arial, Helvetica, sans-serif;
}

.menubold
{
    font-family: JostSemibold, Arial, Helvetica, sans-serif;
}

.category
{
    font-family: JostSemibold, Arial, Helvetica, sans-serif;
    font-size: smaller;
    margin-bottom: 0.4em;
    margin-top: 2em;
}

.linkwarnung
{
    color: black;
    font-family: JostLight, Arial, Helvetica, sans-serif;
}

a
{
    color: #6B0ECC;
    text-decoration: none;
    margin-left: 2px;
    margin-right: 2px;
}

.fussnote
{
    font-size: smaller;
    margin-top: 0;
    margin-bottom: 0;
}

.featurearea
{
    width: 100%;
    border-bottom-color: whitesmoke;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: whitesmoke;
    border-top-style: dotted;
    border-top-width: 1px;    
    margin-bottom: 2.5em;
    margin-top: 0.25em;
    background-size:cover;
}

.featureh2
{
    font-size: xx-large;
    margin-left: 2.5%;
    margin-bottom: 0;
    padding-top: 5em;
}

.twopieces
{
    border-bottom-color: black;
    border-bottom-style: dotted;
    border-bottom-width: 1px;
    border-top-color: black;
    border-top-style: dotted;
    border-top-width: 1px;      
}