.code-box {
  background: #2d2d2d;
  border: 1px solid #2d2d2d;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
}
.footer {
  
  margin-left: 250px;
  width: calc(97.4vw - 250px);
  padding: 12px;
  background: white;
  box-shadow: 0 0 4px silver;
}
.contenedor
{
  width: 90%;
  margin: auto;
}
.option
{
  margin-top: 12px;
  width: 90%;
  display: flex;
  padding: 12px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
}
.option i{
  margin-right: 12px;
}
.option:hover {
  background: #4f6ebd;
  color: #c9d6ff;
  transition: all .45s;
}
.active
{
  background: #4f6ebd;
  color: #c9d6ff;
}
*{
    margin: 0;
}
.logo
{
  width: 150px;
  display: block;
  margin: 20px auto;
}
.contenido
{
  width: 80%;
}
.code-header {
  background: #020617;
  padding: 10px 15px;
  color: #94a3b8;
  font-size: 14px;
  border-bottom: 1px solid #1e293b;
  font-family: Arial, Helvetica, sans-serif;
}

body {
    background: #F8FAFC;
    font-family: Arial, Helvetica, sans-serif;
}

.lateralMenu {
  width: 250px;
  background: white;
  position: fixed;
  height: 100vh;
  box-shadow: 0px 4px 5px silver;
  top: 0%;
  z-index: 10;
}
.alert {
  position: relative;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
}
.link{
    color: black;
    text-decoration: none;
  }

  .content-menu{
    width: 85%;
    position: fixed;
    z-index: 1;
    padding: 20px;
    background: white;
    top:0%;
    display: none;
  }
.alert-danger {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}
.button-menu
{
  display: none;
  font-size: 30px;
}
.cont-95{
  width: 95%;
}
.cont-5{
  width: 5%;
}
@media (prefers-color-scheme: dark) {
  body {
    background: #0a0c10 !important;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
  }
  .lateralMenu {
    background: #121820;
    box-shadow: 0px 4px 5px black;
  }
  .option:hover {
    background: #121A2E;
    color: #3D6BF5;
    transition: all .45s;
  }
  .active
  {
    background: #121A2E;
    color: #3D6BF5;
  }
  .link{
    color: white;
    text-decoration: none;
  }
  .content-menu
  {
    background: #0a0c10;
  }
  .footer {
    margin-left: 250px;
    width: calc(97.4vw - 250px);
    padding: 12px;
    background: #0a0c10;
    box-shadow: 0 0 4px #0a0c10;
  }
}
.styled
{
  color: #992757;
}

.card{
  background: #161B22;
  padding: 12px;
  width: 100%;
  border-radius: 12px;
}

.wrap{
  width: 80%;
  transform: translateX(22%);
  margin-top: 3%;
  padding: 5px;
}

@media(max-width:1300px)
{
  .wrap{
    width: 80%;
    transform: translateX(13%);
    margin: 5% auto;
    padding: 5px;
  }
}


@media(max-width:1024px)
{
  .wrap{
    width: 90%;
    transform: translateX(0%);
    margin: 10% auto;
    padding: 5px;
  }
  .button-menu
  {
    display: block;
  }
  .contenedor
  {
    width:100%;
  }
  .contenido
  {
    width: 90%;
  }
  .lateralMenu
  {
    transform: translateX(-100%);
    transition: all .45s;
    width: 80%;
  }
  .content-menu
  {
    display: flex;
  }
  .showmenu
  {
    transform: translateX(0%);
    transition: all .45s;
  }
}

@media(max-width:790px)
{
  .wrap{
    width: 90%;
    margin: 20% auto;
  }
  .contenido
  {
    width: 100%;
  }
}