

.Container {
 /* width: 50%;*/
  border-radius: 6px;
 /* position: relative; */
  background: #282B36;
 
  box-shadow: 0 10px 40px 0 rgba(40, 43, 54, 0.3);
}
.Container nav {
  top: 15px;
  left: 15px;
  position: absolute;
}
.Container nav a {
  z-index: 2;
  color: white; 
  font-size: 13px;
  padding: 5px 15px;
  border-radius: 4px;
  display: inline-block;
  text-decoration: none;width: 80px!important;    
  text-align: center;    
  position: relative;
  font-weight: bolder;
}
.Container nav a:hover, .Container nav a.active {
  color: white;
}
.Container nav .current {
  top: 0;
  left: 0;
  z-index: 0;
  width: 80px!important;
  height: 40px!important;
  border-radius: 15px;
  position: absolute;
  /*background-color: rgba(255, 255, 255, 0.2);*/
  background-color: rgb(0, 215, 65);
}

.Container .Contents {
  width: 100%;
  display: flex;
  overflow: hidden;
  align-items: flex-start;
  min-height: 280px!important;
}

.Container .Content {
  width: 100%;
  flex-shrink: 0;
  color: #FFFFFF;
  font-size: 15px; display: grid;
  line-height: 24px;
  /* padding: 60px 30px 30px 30px;*/
    padding: 30px 30px 30px 30px 
 
}
.Container .Content .hljs {
  padding: 0;
  font-size: 13px;
  line-height: 24px;
  font-family: Consolas, Monaco, monospace;
}

.hljs-number {
  color: #FFC24C;
}
/* Cuando la pantalla es menor a 900px  (tablets y teléfonos inteligentes)*/
@media only screen and (max-width : 900px) {
  .Container .Contents {
    margin-top: 20%;
}
  }