#l1 {
  margin-bottom: 600px;
  --highlight: #00e09d;
  --highlight-rgb: 0, 233, 156;
  --grey: #333;
  --darkgrey: #111;
}

#l1 ::-webkit-scrollbar {
  display: none !important;
}

#l1 section {
  background-color: var(--darkgrey);
  padding: 8px 8px;
  color: #ccc;
  border: 1px solid #000;
  border-radius: 1px;
  opacity: .8;
  font-size: 18px;
}

#l1 section:hover {
  opacity: 1.0;
  background-color: #252525;
}

#l1 section a.nextState {
  background-color: var(--highlight);
  padding: 8px 12px;
  color: black;
  border-radius: 2px;
}

#l1 section.current {
  background-color: #252525;
  border: 1px solid #2c2c2c;
  color: #fff;
  padding-bottom: 18px;
  opacity: 1.0;
}

#l1 section p {
  margin : 8px 0;
}

#l1 section p:last-of-type {
  margin-bottom: 18px;
}


#l1 .editorSpace {
  display: flex;
  margin: 12px 0;
  border: 1px solid #222;
}

#l1 .editorSpace .cm-editor {
  font-size: 16px;
}

#l1 .editorSpace .info {
  overflow-y: scroll;
  box-sizing: border-box;
  padding-bottom: 90vh;
}

#l1 .editorSpace .info .fade {
    width: 100%;
    position: sticky;
    height: 100px;
    z-index: 999;
    background: linear-gradient(0deg, #00000000, #000000);
    top: 0;
    margin-bottom: -100px;
}

#l1 .editorSpace .column {
  height: 100vh;
  /* this sets the height of the columns to take up the full height of the viewport */
}

#l1 .editorSpace .resizer {
  flex: 0 0 6px;
  cursor: col-resize;
  background-color: var(--darkgrey);
}

#l1 .editorSpace .output iframe {
  width: 100%;
  height: 100%;
  overflow: hidden;
}


#l1 .editorSpace .output a.open {
  position: absolute;
}


#l1 .mark {
  background-color: rgba(var(--highlight-rgb), 0.15);
}

#l1 .ͼw {
  color:var(--highlight);
}
#l2 {
  margin-bottom: 600px;
  --highlight: #00e09d;
  --highlight-rgb: 0, 233, 156;
  --grey: #333;
  --darkgrey: #111;
}

#l2 ::-webkit-scrollbar {
  display: none !important;
}

#l2 section {
  background-color: var(--darkgrey);
  padding: 8px 8px;
  color: #fff;
  border: 1px solid #000;
  border-radius: 1px;
  opacity: .8;
  font-size: 18px;
  max-width: 80%;
  padding: 40px;
}

#l2 section a.next {
  background-color: var(--highlight);
  padding: 8px 12px;
  color: black;
  border-radius: 2px;
}

#l2 section.current {
  background-color: #252525;
  border: 1px solid #2c2c2c;
  color: #fff;
  padding-bottom: 18px;
  opacity: 1.0;
}

#l2 section p {
  margin: 8px 0;
}

#l2 section p:last-of-type {
  margin-bottom: 18px;
}


#l2 section .space, #l2 .diffEditor {
  display: flex;
  border: 1px solid #222;
}

#l2 .cm-editor {
  font-size: 16px;
}

#l2 .space .column {
  height: 100vh;
  /* this sets the height of the columns to take up the full height of the viewport */
}

#l2 .resizer {
  flex: 0 0 6px;
  cursor: col-resize;
  background-color: var(--darkgrey);
}

#l2 .space .output iframe, #l2 .diffEditor iframe {
  width: 100%;
  height: 100%;
  overflow: hidden;
}


#l2 .mark {
  background-color: rgba(var(--highlight-rgb), 0.15);
}

#l2 .ͼw {
  color: var(--highlight);
}

#l2 .ͼo,
#l2 .ͼo .cm-gutters {
  background-color: #111112;
}


#l2 .add {
  background-color: #00e09d17;
  width: 100%;
  display: block;
}

#l2 .same {
  opacity: 0.8;
}

#l2 .remove {
  opacity: 0.8;
  text-decoration: line-through;
  text-decoration-color: hsla(0, 100%, 50%, 0.5);
  background-color: hsla(0, 100%, 50%, 0.1);
  width: 100%;
  display: block;
}

#l2 .remove .ͼw {
  color: #888;
}


#l2 .cm-foldGutter {
  display: none !important;
}

#l2 .diffEditor {
    width: 90%;
    /* margin: 0 auto; */
    border-radius: 3px;
    overflow: hidden;
    min-height: 200px;
    max-height: 80vh;
    margin: 20px 0 60px;
    padding: 8px;
}

#l2 .diffEditor .editor {
  max-height: 80vh;
  overflow-y: scroll;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *




 */

.course-material {
  max-width: 960px;
}

.course-material h1 {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-size: 40px;
  line-height: 52px;
  color: #ffffff;
  margin-bottom: 10px;
}

.course-material h2 {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-size: 32px;
  line-height: 42px;
  color: #ffffff;
  margin-top: 100px;
  margin-bottom: 10px;
}

.course-material h3 {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-size: 28px;
  line-height: 42px;
  color: #ffffff;
  margin-top: 40px;
  margin-bottom: 4px;
}

.course-material p {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 170%;
  color: #eee;
  margin-bottom: 12px;
}

.course-material li {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 170%;
  color: #eee;
  margin-bottom: 6px;
}

.course-material a {
  /* color: #00FFE0; */
  color: #7ae7da;
}

.course-material .video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.course-material ol {
  list-style-type: decimal;
}

.course-material ol ol {
  list-style: lower-alpha;
  margin-left: 40px;
}

.course-material ol ol ol {
  list-style: lower-roman;
}

.course-material ol ol ol ol {
  list-style: decimal;
}

.course-material .code {
  background-color: #333;
  padding: 4px 8px;
  font-family: monospace;
}

/* JAVASCRIPT COURSES */

:root {
  --highlight-color: #00df9c;
  --grey: #00df9c; /* wtf? */
}