* {
    box-sizing: border-box;
}

#myTopnav {
  background-color: #33a1fd;
}

p {
    font-family: "Roboto" !important;
    font-size: 18px;
}


a {
    color: #33a1fd;
    text-decoration: none;
    margin-right: 5px;
}
a:hover {
    color: #820263;  
} 

body {
   /* background-color: #686963;*/
   background-color: #686963;

}

h1, h2, h3 {
    margin-bottom: 0;
    font-family: 'Roboto' !important;
}

h1 {
    
}

h2 {
    font-weight: 400;
    font-size: 30px !important;
}

h3 {
    font-weight: 300;
    font-size: 22px;
    color: #820263;
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
}
h3:after {
    display: inline-block;
    content: "";
    height: 1px;
    width: 100%;
    vertical-align: middle;
    background: linear-gradient(to right,#820263,transparent 90%);
    margin-left: 24px;
}

/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 33.33%;
    padding: 10px;
    /* Should be removed. Only for demonstration */
}

.column-two {
    float: left;
    width: 50%;
    padding: 10px;
    /* Should be removed. Only for demonstration */
}

.row {
    max-width: 1500px;
    margin: 0 auto;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;

    clear: both;
}

/* max-width ursprünglich 600px */
@media screen and (max-width: 960px) {
    .column {
        width: 50%;
    }
}

@media screen and (max-width: 600px) {
    .column {
        width: 100%;
    }
    .column-two {
        width: 100%;
    }
}

pre {
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    
    margin-bottom: 0px !important;     
}
/* für eine weiter codebox darunter: */
.pre-second {
    margin-top: 0 !important;
    border-top: 1.5px solid grey;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

code {
    font-size: 0.9em;
}
.codebox {
    box-shadow: 3px 3px 2px #434547;
    border-bottom-left-radius: 0.3em;
    border-bottom-right-radius: 0.3em;
}

/* font-weight 300, und 400 sind nur verfügbar */
.info {
    background-color: #898994;
    font-family: Roboto;
    border-bottom-left-radius: 0.3em;
    border-bottom-right-radius: 0.3em;
    padding: 0.5em;
    font-weight: 300;
    line-height: 22px;
}


/* diese klasse wird geadded, wenn kein code da ist, nur reine infobox*/
.justInfo {
    border-top-left-radius: 0.3em;
    border-top-right-radius: 0.3em;
    margin-top: 8px;

}
.info a {
    color: #820263;
    text-decoration: underline;
}
.justInfo a {
    color: #820263;
    text-decoration: underline;
}


.code-box-text {
    display: inline-block; 
    max-width: 90%;
}


b {
    font-weight: 400;
}

.footer {
    text-align: center;
    margin-top: 100px;
    margin-bottom: 100px;
    font-family: "Roboto";
    font-size: 20px;
}

.topnav {
    background-color: #33a1fd;
}

/* ab hier aus der nav bar */ 
body {margin:0;}

.topnav {
  overflow: hidden;
  background-color: #333;
  font-family: "Roboto";
}


.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  vertical-align: middle;
}
/* nav bar ende */ 

/**
 * atom-dark theme for `prism.js`
 * Based on Atom's `atom-dark` theme: https://github.com/atom/atom-dark-syntax
 * @author Joe Gibson (@gibsjose)
 */

 code[class*='language-'],
 pre[class*='language-'] {
   color: #c5c8c6;
   text-shadow: 0 1px rgba(0, 0, 0, 0.3);
   font-family: 'Cousine';
   direction: ltr;
   text-align: left;
   white-space: pre;
   word-spacing: normal;
   word-break: normal;
   line-height: 1.5;
 
   -moz-tab-size: 4;
   -o-tab-size: 4;
   tab-size: 4;
 
   -webkit-hyphens: none;
   -moz-hyphens: none;
   -ms-hyphens: none;
   hyphens: none;
 }
 
 /* Code blocks */
 pre[class*='language-'] {
   padding: 1em;
   margin: 0.5em 0;
   overflow: auto;
   border-radius: 0.3em;
 }
 
 :not(pre) > code[class*='language-'],
 pre[class*='language-'] {
   background: #1d1f21;
 }
 
 /* Inline code */
 :not(pre) > code[class*='language-'] {
   padding: 0.1em;
   border-radius: 0.3em;
 }
 
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
   color: #7c7c7c;
 }
 
 .token.punctuation {
   color: #c5c8c6;
 }
 
 .namespace {
   opacity: 0.7;
 }
 
 .token.property,
 .token.keyword,
 .token.tag {
   color: #96cbfe;
 }
 
 .token.class-name {
   color: #ffffb6;
   /* hier habe ich das underlining von keywords deaktiviert
    text-decoration: underline; */
 }
 
 .token.boolean,
 .token.constant {
   color: #99cc99;
 }
 
 .token.symbol,
 .token.deleted {
   color: #f92672;
 }
 
 .token.number {
   color: #ff73fd;
 }
 
 .token.selector,
 .token.attr-name,
 .token.string,
 .token.char,
 .token.builtin,
 .token.inserted {
   color: #a8ff60;
 }
 
 .token.variable {
   color: #c6c5fe;
 }
 
 .token.operator {
   color: #ededed;
 }
 
 .token.entity {
   color: #ffffb6;
   cursor: help;
 }
 
 .token.url {
   color: #96cbfe;
 }
 
 .language-css .token.string,
 .style .token.string {
   color: #87c38a;
 }
 
 .token.atrule,
 .token.attr-value {
   color: #f9ee98;
 }
 
 .token.function {
   color: #dad085;
 }
 
 .token.regex {
   color: #e9c062;
 }
 
 .token.important {
   color: #fd971f;
 }
 
 .token.important,
 .token.bold {
   font-weight: bold;
 }
 
 .token.italic {
   font-style: italic;
 }