.code_func{color:purple;}
     .code_text{color:green;}
    .code_comment{color:red;}


    .nav_text {
        font-size:1.4em;
        font-family: Helvetica, sans-serif;
        margin: 0px 10px;
    }
    .page_header{
    margin-top: -30px;
    margin-bottom: -25px;
    text-align: center;
    font-size: 3em;
    
    }    
    .sticky{
        position: relative; /* I am the fallback */

        /* Give it everything you got! (use an auto prefixer...) */
        position: -webkit-sticky;
        position: -moz-sticky;
        position: -ms-sticky;
        position: -o-sticky;
        position: sticky;
        top: 5%;
        
    }
    .dot {
        padding: 5px;
        background-color: #F1F1F1;
        border-radius: 50%;
        display: inline-block;
    }
.tooltip {
    
    position:relative;
    
    text-align:left;
}

.tooltip .top {
    min-width:200px; 
    top:-20px;
    left:50%;
    transform:translate(-50%, -100%);
    padding:10px 20px;
    color:#444444;
    background-color:#EEEEEE;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    display:none;
}

.tooltip:hover .top {
    display:block;
}

.tooltip .top i {
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-12px;
    width:24px;
    height:12px;
    overflow:hidden;
}

.tooltip .top i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg);
    background-color:#EEEEEE;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}
.comment{
    color:green;
    font-size:1.2em;
    background:lightgrey;
    padding:0px 3px;
}


.info, .hint, .note, .ext, .example{
     -moz-border-radius: 6px;
     -webkit-border-radius: 6px;
     background-color: #EEEEEE;
     border-radius: 6px;
     line-height: 120%;
     overflow: hidden;
     padding: 15px 15px;
}

.note{
    border-left: solid 5px #3498db;
}
.note::before {
  font-weight: bold;
  content: "Note: ";
}

.example{
    border-left: solid 5px #542798;
    background-color: #FFFFCD;
    font-style: italic;
}
.example::before {
  font-weight: bold;
  content: "e.g.  ";
  
  
}
.highlight{
    background-color: #D3D3D3;
}

.hint::before {
  font-weight: bold;
  content: "Hint: ";
}
.hint, .c_hint {
     border-left: solid 5px #FF8C00;
}

.ext{
    border-left: solid 5px #6A0DAD;
    background-color: #FFF;
}

.info_image, .note_image, .hint_image{
    font-size:38px;
    margin-right:10px
}

.note_image{
    color:#3498db;
}
.hint_image{
    color:#FF8C00;
}
.ext_image{
        color:#6A0DAD;
}
.video_ratio_container{position:relative;
    padding-top:56.25%;
    }
.video_ratio{position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
            }
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.code {
  background-color: #000000;
  color: #ffffff;
  padding: 25px 0px 20px 20px; /* top right bottom left */
  font-family: Consolas, monospace;
  font-size: 16px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: keep-all;
  border-radius: 10px;
  position: relative;
}

.code::before {
  content: "Python Code Example"; /* This is the text that will be displayed */
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 35px;
  background-color: #333333;
  color: #fff; /* This is the text color */
  text-align: left; /* This is to center the text */
  font-size: 16px; /* This is the text size */
  font-weight: bold; /* This is the text weight */
  padding: 5px; /* This adds 5px of padding to all sides of the text */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.code .string {
  color: #00FF00;
}

.code .keyword {
  color: #ffa500;
}
.code .comments {
  color: #808080;
}
.code .number {
    color:#F83583
}