@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Fira+Mono:wght@400;500;700&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
/** fuentes integradas
* IBM Plex Sans
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 100; 100 al 700
  font-style: normal;
  
* Fira Code
  font-family: "Fira Code", monospace
  font-style: normal;

* Fira Mono
  font-family: "Fira Mono", monospace;
  font-weight: 400; 400,500,700
  font-style: normal;

* Ubuntu
  font-family: "Ubuntu", sans-serif;
  font-weight: 300; 300,400,500,
  font-style: normal;

* Ubuntu Mono
  font-family: "Ubuntu Mono", monospace;
  font-weight: 400; 700,
  font-style: normal;

*  Roboto
  font-family: "Roboto", sans-serif;
  font-weight: 100; 100,300,400,500,700,900
* 
**/

.hljs {
  display: block;
  overflow-x: auto;
  /* Custom font is optional */
  /*
  font-family: "Operator Mono", "Fira Code", "Menlo", "Monaco", "Courier New",
    "monospace";
  */
  font-family: "Ubuntu Mono", monospace;
  font-weight: 400;
  font-style: normal;
  line-height: 1.45;
  padding: 1rem;
  margin-bottom: 1rem;
  background: #2d2b57; /* #2d2b57 */
  font-weight: normal;
  border-radius: 0.25rem;
}

.hljs-title {
  color: #fad000;
  font-weight: normal;
}

.hljs-name {
  color: #a1feff;
}

.hljs-tag {
  color: #ffffff;
}

.hljs-attr {
  color: #f8d000;
  font-style: italic;
}

.hljs-built_in,
.hljs-selector-tag,
.hljs-section {
  color: #fb9e00;
}

.hljs-keyword {
  color: #fb9e00;
}

.hljs,
.hljs-subst {
  color: #e3dfff;
}

.hljs-string,
.hljs-attribute,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-code,
.hljs-regexp,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-template-tag,
.hljs-quote,
.hljs-deletion {
  color: #4cd213;
}

.hljs-meta,
.hljs-meta-string {
  color: #fb9e00;
}

.hljs-comment {
  color: #ac65ff;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-name,
.hljs-strong {
  font-weight: normal;
}

.hljs-literal,
.hljs-number {
  color: #fa658d;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

* {
  box-sizing: border-box;
}
:root {
  --color-bg-1: #f2f2f9;
}

/* Demo */
body {
  /* max-width: 75ch;
  margin: auto; */
  font-family: sans-serif;
  margin: 0;
  min-height: 100vh;
}
main {
  height: 100vh;
  display: grid;
  grid-template-areas:
    "examples preview"
    "examples history";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 2fr 1fr;
}
p {
  max-width: 75ch;
}

/* 
h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 1.75rem;
} */

/* 
h3 {
  margin-bottom: 0;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #7942fa;
}
*/

main > * {
  outline: 1px solid #f2f0f4;
}
.wrapper {
  max-width: 100ch;
  margin: auto;
}
.examples {
  grid-area: examples;
  overflow: auto;
}
.history {
  grid-area: history;
  overflow: auto;
}
.preview {
  grid-area: preview;
  display: flex;
  flex-direction: column;
}
.paste-box {
  flex: 1;
  padding: 1rem;
  margin: 0;
  background-color: var(--color-bg-1);
}
.log-item {
  background-color: var(--color-bg-1);
  border-radius: 0.5rem;
  margin: 0 0.5rem 0.5rem 0.5rem;
}
summary {
  cursor: pointer;
  padding: 1rem;
}
details {
  border-bottom: 1px solid var(--color-bg-1);
  animation: flash 700ms ease-out;
  animation-fill-mode: forwards;
}
@keyframes flash {
  from {
    background-color: #ffff0044;
  }
  to {
    background-color: transparent;
  }
}

.p-1 {
  padding: 1rem;
}
.p-2 {
  padding: 2rem;
}

.turn {
  background-color: #171D30;
}

.nav-pills .bg-html {
  background-color: #be3d0a !important;
  color: #A7A7A7 !important;
  font-size: 14px !important;
  text-decoration: none;
  cursor: pointer;
  margin-right: 5px;
}

.nav-pills .bg-html:hover {
  background-color: #d65906 !important;
  color: #A7A7A7 !important;
  font-size: 14px !important;
  text-decoration: none;
  cursor: pointer;
  margin-right: 5px;
}


.nav-pills .bg-css {
  background-color: #0C1728 !important;
  color: #628DD5 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  cursor: pointer;
  margin-right: 5px;
}

.nav-pills .bg-css:hover {
  background-color: #0c3066 !important;
  color: #628DD5 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  cursor: pointer;
  margin-right: 5px;
}

.nav-pills .bg-javascript {
  background-color: #1f1c50 !important;
  color: #A7A7A7 !important;
  font-size: 14px !important;
  text-decoration: none;
  cursor: pointer;
}

.nav-pills .bg-javascript:hover {
  background-color: #2d2b57 !important;
  color: #A7A7A7 !important;
  font-size: 14px !important;
  text-decoration: none;
  cursor: pointer;
}

.nav-pills .bg-scss {
  background-color: #A91111 !important;
  color: #A7A7A7 !important;
  font-size: 14px !important;
  text-decoration: none;
  cursor: pointer;
}

.nav-pills .bg-scss:hover {
  background-color: #900C3F !important;
  color: #A7A7A7 !important;
  font-size: 14px !important;
  text-decoration: none;
  cursor: pointer;
}

.nav-pills {
  background-color: #171D30 !important;
  
}

.btn-link {
  color: #BCC1C9 !important;
  text-decoration: none !important;
}



@media screen and (max-width: 40rem) {
  main {
    grid-template-areas: "examples" "preview" "history";
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 1fr 1fr;
  }
  .p-1 {
    padding: 0.5rem;
  }
  .p-2 {
    padding: 1rem;
  }
}