body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}
.header_img{
  width: 100px;
  height: 100px;
}

/* .code_container{
  margin: 0;
  padding: 0;
 display: flex;
 justify-content: space-between;
 background-color: #F0A500;

}

.code_editor{
  margin: 10px;
  border-radius: 1rem;
  text-align: center;
  background-color: #E45826;
  width: 40rem;
  height: 20rem;
}

.code_text{
  
  width: 100%;
  height: 15rem;
  background: transparent;
  border: none;
} */

.CodeMirror{
  height: 340px !important;
  color: #fff;
}

.CodeMirror-gutters{
  background: #1d1e22 !important;
}

.CodeMirror-scroll{
  background: #400E32;
}

.section_links{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section_nav{
  list-style-type: none;
  text-decoration: none;
  position: relative;
  left: 75rem;
  display: flex;
  justify-content: space-between;
}
.section_nav a{
  color: #fff;
  text-decoration: none;
  
}
p{
  visibility: hidden;
  opacity: 0;
}
.section_nav a:hover p{
  visibility: visible;
 background-color: #1d1e22;
 color: #fff;
 padding: 8px;
 border-radius: 10px;
 opacity: 1;
}