/* generelle style settings */

/* inconsolata-300 - latin */
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('../fonts/inconsolata-v20-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/inconsolata-v20-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* inconsolata-regular - latin */
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/inconsolata-v20-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/inconsolata-v20-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* inconsolata-600 - latin */
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('../fonts/inconsolata-v20-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/inconsolata-v20-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* inconsolata-800 - latin */
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 800;
  src: local(''),
       url('../fonts/inconsolata-v20-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/inconsolata-v20-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* digital-7 mono */
@font-face {
  font-family: 'digital-7';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('../fonts/digital-7 (mono).ttf') format('truetype');
}
@font-face {
  font-family: "Digital-7MonoItalic";

  src: url("./fonts/digital-7monoitalic.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}
/* vollkorn-regular - latin */
@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/vollkorn-v12-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/vollkorn-v12-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* vollkorn-600 - latin */
@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('../fonts/vollkorn-v12-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/vollkorn-v12-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* vollkorn-800 - latin */
@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 800;
  src: local(''),
       url('../fonts/vollkorn-v12-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/vollkorn-v12-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* vollkorn-italic - latin */
@font-face {
  font-family: 'Vollkorn';
  font-style: italic;
  font-weight: 400;
  src: local(''),
       url('../fonts/vollkorn-v12-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/vollkorn-v12-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* vollkorn-600italic - latin */
@font-face {
  font-family: 'Vollkorn';
  font-style: italic;
  font-weight: 600;
  src: local(''),
       url('../fonts/vollkorn-v12-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/vollkorn-v12-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* vollkorn-800italic - latin */
@font-face {
  font-family: 'Vollkorn';
  font-style: italic;
  font-weight: 800;
  src: local(''),
       url('../fonts/vollkorn-v12-latin-800italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/vollkorn-v12-latin-800italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* m-plus-code-latin-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'M PLUS Code Latin';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/m-plus-code-latin-v11-latin-100.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('../fonts/m-plus-code-latin-v11-latin-100.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* m-plus-code-latin-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'M PLUS Code Latin';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/m-plus-code-latin-v11-latin-200.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('../fonts/m-plus-code-latin-v11-latin-200.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* m-plus-code-latin-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'M PLUS Code Latin';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/m-plus-code-latin-v11-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('../fonts/m-plus-code-latin-v11-latin-300.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* m-plus-code-latin-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'M PLUS Code Latin';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/m-plus-code-latin-v11-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('../fonts/m-plus-code-latin-v11-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* m-plus-code-latin-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'M PLUS Code Latin';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/m-plus-code-latin-v11-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('../fonts/m-plus-code-latin-v11-latin-500.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* m-plus-code-latin-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'M PLUS Code Latin';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/m-plus-code-latin-v11-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('../fonts/m-plus-code-latin-v11-latin-600.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* m-plus-code-latin-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'M PLUS Code Latin';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/m-plus-code-latin-v11-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('../fonts/m-plus-code-latin-v11-latin-700.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

h1 {
  font-family: 'M PLUS Code Latin';
  font-size: 48pt;
  font-weight: normal;
  color: #029ea0;
}
h2 {
  font-family: 'M PLUS Code Latin';
  font-size: 24pt;
  font-weight: normal;
}
h3 {
  font-family: 'M PLUS Code Latin';
  font-size: 20pt;
  font-weight: normal;
}
h4 {
  font-family: 'M PLUS Code Latin';
  font-size: 18pt;
  font-weight: normal;
}

BODY  { font-family: 'Vollkorn'; color: #000000; font-size: 16pt;
        background-image: url(../pics/velo.jpg);

        /* Background image is centered vertically and horizontally at all times */
        background-position: center center;

        /* Background image doesn't tile */
        background-repeat: no-repeat;

        /* Background image is fixed in the viewport so that it doesn't move when
           the content's height is greater than the image's height */
        background-attachment: fixed;

        /* This is what makes the background image rescale based
           on the container's size */
        background-size: cover;
        height: auto;
        outline: ;
        width: auto;
        max-width: 100%;

      }

p                 { font-family: 'Vollkorn', monospace; color: #000000;}
img               { max-width: 100%; height: auto;}
table             { max-width: 100%; bgcolor="#7C3E32"}
td                { max-width: 100%;}

a:link            { color: #000000; text-decoration:none; font-family: 'Vollkorn', monospace; }
a:visited         { color: #000000; text-decoration:none; font-family: 'Vollkorn', monospace; }
a:active          { color: #BFBFBF; text-decoration:none; font-family: 'Vollkorn', monospace; }
a:hover           { color: #BFBFBF; text-decoration:none; font-family: 'Vollkorn', monospace; }

/* Reset Grundlayout bezüglich div-Elemente */

main > div {
        background: none;
        border: none;
        height: auto;
        margin: 0;
        padding: 0;
        width: auto;
}

div > div {
        display: inline-block;
        vertical-align: top;
        height: auto;
        width: 100%;
        margin: 0.2em;
}


main > code {
        display: block;
}

.max_10 {
        max-width: 10em;
}
.max_20 {
        max-width: 20em;
}

.max_40 {
        max-width: 40em;
}

.max_60 {
        max-width: 900px;
}

.min_10 {
        min-width: 10em;
}
.min_20 {
        min-width: 20em;
}

.width_10 {
        width: 10em;
}

.width_20 {
        width: 20em;
}

.width_40 {
        width: 40em;
}
.width_60 {
        width: 60em;
}

.width_60p {
        width: 60%;
}

.width_80p {
        width: 80%;
}

.box {
        background-color: #7C3E32bf;
}