.blog{
  font-size: 1em;
  word-wrap: break-word;
  line-height: 2em;
  margin-top: 10px;
  margin-left: 200px;
  margin-right: 200px;
}

@media(max-width:820px){
.blog{
  margin-left: 20px;
  margin-right: 20px;
}
}
.blog h1 {
    font-size: 1.8em;
    max-width: 800px;
    color: var(--primary-darker);
}

.blog h2 {
    font-size: 1.4em;
    max-width: 800px;
    color: var(--primary-darker);
}
.blog image {
    width: 100%;
}
.blog p {
    line-height: 2em;
    font-size: 1em;
    color: var(--primary-darker);
}


.blog h1, .blog h2, .blog h3, .blog h4, .blog h5, .blog h6 {
  color: var(--primary-darker);
  line-height: 1.5em;
}

.blog a {
  color: #0066cc;
  text-decoration: none;
}

.blog a:hover {
  text-decoration: underline;
}

.blog blockquote {
    background-color: #fdfdea;
    border: 1px #99bbd8 solid;
    padding: 1em;
    max-width: 640px;
    margin: 20px 0;
    border-radius: 12px;
    font-size: 1.2em;
}


.blog ol {
    list-style-type: circle;
    margin-bottom: 20px;
    padding-left: 20px; 
    color: var(--primary-darker);
}

.blog ul {
    list-style-type: circle;
    margin-bottom: 20px; 
    color: var(--primary-darker);
}

.blog li {
    margin-bottom: 5px;
    color: var(--primary-darker);
}


.codeblock {
    color: #eee;
    font-family: "Lucida Console", Monaco, monospace;
    padding: 0;
    font-size: 15px;
    border: 4px solid #a8c2d7;
    overflow: auto;
    height: auto;
    margin-bottom: 2em;
    background-color: #343432;
    border-style: outset;
    opacity: 1;
  }

.codeblock pre {
    max-width: 100%;
    padding: 10px 10px 10px 20px;
    overflow: overlay;
    line-height: 1.5em;
  }



.copy-highlite {
    background-color: #ccc !important; 
  }
.copy-btn{
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer;
    padding: 0px;
  }