.alert {
 position: relative;
 padding: 0.75rem 1.25rem;
 margin-bottom: 1rem;
 border: 1px solid transparent;
 border-radius: 0.25rem;
 color: #856404;
 background-color: #fff3cd;
 border-color: #ffeeba;
}
.note {
 position: relative;
 padding: 0.75rem 1.25rem;
 margin-bottom: 1rem;
 border: 1px solid transparent;
 border-radius: 0.25rem;
 color: #004085;
 background-color: #cce5ff;
 border-color: #b8daff; 
}
.code {
 padding: 19px;
 width:100%;
 border:1px solid black;
 margin-bottom:20px;
 color: #383d41;
 background-color: #f7f7f7;
 border-color: #d6d8db;
 border-radius: 0.25rem;
 margin-top: 15px;
}
code {
 color: #000000;
 font-size: 16px;
}
pre {
    margin-bottom: 10px;
    display: block;
    font-size: 87.5%;
    color: #212529;
    background-color: #f7f7f7;
    border-radius: 0.25rem;
    padding: 19px;
    border: 1px solid #d6d8db;
}
@media (max-width: 850px) {

 
 #article .alert {
     margin-left: -5px;
     font-size: 16px;
 }
 #article .note {
     margin-left: -5px;
     font-size: 16px;
 }
 
 

}