@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Mono&display=swap");
@import url("https://fonts.googleapis.com/css?family=Oxygen+Mono&display=swap");
body {
  margin: 0; }

main {
  background-color: #ffffff;
  margin: 0px;
  display: grid;
  grid-template-columns: 1fr [main-begin one-start] repeat(2, 74px 30px) 74px [one-end] 30px [two-start] repeat(2, 74px 30px) 74px [two-end] 30px [three-start] repeat(2, 74px 30px) 74px [three-end] 30px [four-start] repeat(2, 74px 30px) 74px [four-end main-end] 1fr; }

@media (max-width: 1000px) {
  main {
    grid-template-columns: 1fr     96% 1fr; } }

/* headers and paragraphs */
h1, h2, h3, h4, a {
  font-family: Poppins;
  color: #151515;
  font-style: normal;
  font-weight: 600; }

h1 {
  font-size: 40px;
  font-weight: 700; }

h2 {
  font-size: 30px;
  font-weight: 700; }

h3 {
  font-size: 20px;
  font-weight: 700; }

p, li, i, strong {
  font-family: 'Open Sans';
  color: #888888;
  line-height: 2em; }

p code, ul code {
  background-color: #f3f3f3;
  color: #535353;
  border-radius: 4px;
  margin: 2px 5px;
  padding: 5px;
  font-size: 12px;
  font-family: 'Oxygen Mono'; }

strong {
  animation: rainbow 4s infinite;
  animation-direction: alternate; }

@keyframes rainbow {
  0% {
    color: #ff4747; }
  20% {
    color: #ffba26; }
  40% {
    color: #53ff28; }
  60% {
    color: #1ddafc; }
  80% {
    color: #ff288c; }
  100% {
    color: #ff002b; } }

ul {
  list-style: none;
  padding-inline-start: 40px;
  position: relative; }
  ul li {
    position: relative; }
  ul li:before {
    content: '';
    width: 6px;
    height: 6px;
    height: -webkit-fill-available;
    background-color: #f1f1f1;
    position: absolute;
    left: -40px;
    margin: 4px;
    display: block; }

::selection {
  background: #24272b;
  color: white; }

.highlight {
  background-color: red;
  animation-name: fadeOut;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; }

@keyframes fadeOut {
  from {
    background-color: #afafaf; }
  to {
    background-color: transparent; } }

/* navigation */
nav {
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 80px;
  z-index: 1; }
  nav > div {
    left: 50%;
    transform: translateX(-50%);
    position: relative;
    display: inline-block; }
    nav > div a {
      display: inline-block;
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      color: #8b8b8b;
      text-transform: uppercase;
      letter-spacing: 5px;
      padding: 30px 40px; }

#share {
  display: none;
  position: absolute;
  left: calc((100% - 900px) / 4);
  height: 50px;
  width: 150px;
  cursor: pointer;
  background-color: #ffffff;
  border-radius: 25px;
  box-shadow: 0px 4px 20px 0px #8a97ad2c; }
  #share > p {
    transform: none !important;
    margin: 9px 0px;
    text-align: center;
    opacity: 1 !important; }
  #share:hover {
    box-shadow: 0px 4px 20px 0px #8a97ad4d; }

/* header */
header {
  grid-column: two-start / three-end;
  height: 400px;
  overflow: hidden;
  position: relative; }
  header h1 {
    font-size: 50px;
    width: 100%;
    text-align: center;
    line-height: 1.2em;
    letter-spacing: 0px;
    font-weight: 700; }
  header h4 {
    font-family: 'IBM Plex Mono';
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    color: #3f3f3f;
    width: 100%;
    text-align: center;
    line-height: 1.2em;
    letter-spacing: 0px; }
  header > div {
    top: 200px;
    transform: translateY(-50%);
    position: relative; }

footer {
  height: 300px;
  background-color: #f5f5f5;
  margin-top: 150px; }

/* the main article */
article {
  /*display: grid;
    grid-template-columns: subgrid;*/
  grid-column: one-start / four-end; }

section {
  width: 100%;
  margin-bottom: 100px;
  display: grid;
  grid-template-columns: 1fr [large-margin-start] 120px [small-margin-start] 60px [main-start] 560px [main-end] 60px [small-margin-end] 120px [large-margin-end] 1fr; }
  section > * {
    grid-column: main-start / main-end; }
  section > p {
    color: #2b2b2b;
    line-height: 1.8em; }
  section > ul li {
    color: #888888;
    line-height: 1.8em;
    margin: 30px 0px; }
  section > h2 {
    color: #1f1f1f;
    font-size: 30px;
    font-weight: 700;
    text-transform: capitalize;
    margin-top: 50px;
    margin-bottom: 30px; }
  section > h3 {
    color: #313131;
    font-size: 20px;
    font-weight: 700;
    text-transform: capitalize;
    margin-top: 50px;
    margin-bottom: 10px; }

@media (max-width: 1000px) {
  section {
    grid-template-columns: [large-margin-start] 4% [small-margin-start] 6% [main-start] 80% [main-end] 6% [small-margin-end] 4% [large-margin-end]; } }

.prompt {
  position: relative;
  grid-column: small-margin-start / small-margin-end;
  margin: 100px 0px 60px 0px;
  display: grid;
  grid-template-columns: 60% 40%;
  grid-column-gap: 10px;
  grid-template-rows: 20px 8px 57px 42px auto;
  grid-row-gap: 10px;
  grid-template-areas: "prompt ." "title ." "title due" "title diff" "title ."; }
  .prompt h2 {
    font-size: 59px;
    line-height: 1.2em;
    margin: 5px 0px;
    letter-spacing: 0px;
    color: #2d2d2d;
    grid-area: title; }
  .prompt h4 {
    grid-area: prompt;
    color: #c5c5c5;
    font-weight: 300;
    font-size: 15px;
    margin: 2px 0px;
    line-height: 1em; }
  .prompt h4:nth-of-type(1) {
    grid-area: prompt; }
  .prompt h4:nth-of-type(3) {
    grid-area: due; }
  .prompt h4:nth-of-type(2) {
    grid-area: diff; }
  .prompt .difficulty {
    grid-area: diff; }
    .prompt .difficulty > span {
      height: 12px;
      width: 128px;
      border-radius: 6px;
      background-color: #e8e8e8;
      display: inline-block;
      position: relative;
      overflow: hidden;
      margin-top: 25px; }
    .prompt .difficulty > span > span {
      height: 12px;
      display: inline-block;
      top: 0px;
      left: 0px;
      position: absolute;
      background: #fe733c;
      background: linear-gradient(90deg, #fe733c 0%, #ee3952 100%); }
  .prompt .due {
    grid-area: due; }
    .prompt .due h3 {
      font-size: 17px;
      color: #e8e8e8;
      align-self: center;
      font-weight: 500;
      margin-top: 20px; }

/* links */
.links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 30px 0px; }
  .links .link {
    display: grid;
    grid-template-columns: 34px auto 12px;
    margin: 15px 0px;
    background-color: #f5f5f5;
    padding: 15px;
    margin: 5px 5px;
    border-radius: 6px;
    align-self: center; }
    .links .link > div {
      content: '';
      width: 6px;
      background-color: #f3f3f3;
      height: 50px;
      grid-area: 1 / 1 / 3 / 2;
      display: none; }
    .links .link img {
      grid-area: 1 / 1 / 2 / 2;
      align-self: center; }
    .links .link a {
      font-family: 'Open Sans';
      font-weight: 700;
      color: #444444;
      text-decoration: none;
      font-size: 15px;
      overflow-wrap: break-word;
      grid-area: 1 / 2 / 2 / 2; }
    .links .link a:visited {
      color: #9e9e9e; }
    .links .link p {
      font-family: 'Open Sans';
      color: #c1c1c1;
      font-size: 13px;
      overflow-wrap: break-word;
      line-height: 1em;
      grid-area: 2 / 2 / 3 / 2;
      margin: 5px 0px; }
  .links .link:nth-of-type(2n + 1) {
    margin-left: 0px; }
  .links .link:nth-of-type(2n) {
    margin-right: 0px; }

@media (max-width: 1000px) {
  .links {
    grid-template-columns: 1fr;
    margin: 10px 0px; }
    .links .link {
      grid-template-columns: 20px auto 20px; }
  .link:nth-of-type(2n) {
    grid-column: 1/2 !important; } }

/* codeblock */
pre, .code-opt {
  position: relative;
  background-color: #333d40;
  border-radius: 10px;
  grid-column: small-margin-start / small-margin-end;
  box-shadow: 0px 15px 40px -20px #1b283ee0;
  margin: 40px 0px;
  padding: 10px 30px 10px 30px;
  box-sizing: border-box; }

.code-opt {
  padding-top: 25px; }

.code-opt code {
  height: 0px;
  opacity: 0;
  display: none; }

.code-opt .select {
  height: auto;
  opacity: 1;
  display: block; }

.code-opt input {
  display: none; }

.code-opt input:checked + label {
  opacity: 1.0;
  transition: opacity 0.5s; }

.code-opt label {
  font-family: 'Open Sans';
  color: #dadada;
  font-weight: 500;
  font-size: 15px;
  margin-right: 15px;
  opacity: 0.5;
  cursor: pointer; }

.code-opt form {
  margin-bottom: -20px;
  display: flex; }

/* divider */
.divider {
  background-color: #505050;
  height: 6px;
  width: 6px;
  border-radius: 3px;
  margin: 60px 0px;
  position: relative;
  margin-left: calc(50% - 3px); }
  .divider :after, .divider :before {
    background-color: #505050;
    height: 6px;
    width: 6px;
    content: '';
    position: absolute;
    border-radius: 3px; }
  .divider :after {
    left: 50px; }
  .divider :before {
    left: -50px; }

.note, .warning {
  grid-column: small-margin-start / small-margin-end;
  margin: 20px 0px;
  min-height: 110px;
  display: grid;
  grid-template-columns: 140px auto;
  grid-template-areas: "icon text";
  background-color: #f3f3f3;
  border-radius: 10px; }
  .note > div, .warning > div {
    grid-area: icon;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: #ff5964;
    box-shadow: -1px 4px 12px 0px #c3191954;
    place-self: center; }
  .note > div:before, .warning > div:before {
    content: '';
    width: 6px;
    display: block;
    border-radius: 3px;
    height: 18px;
    margin-left: 22px;
    margin-top: 10px;
    background-color: white; }
  .note > div:after, .warning > div:after {
    content: '';
    width: 6px;
    display: block;
    border-radius: 3px;
    height: 6px;
    margin-left: 22px;
    margin-top: 5px;
    background-color: white; }
  .note > p, .warning > p {
    grid-area: text;
    font-size: 14px;
    padding: 10px 20px 10px 0px;
    text-decoration: wavy;
    line-height: 1.6em;
    align-self: center; }

.image {
  width: 100%;
  margin: 30px 0px;
  position: relative; }
  .image img {
    width: 100%;
    box-shadow: 0px 0px 20px 0px #16304127; }
  .image .caption {
    text-align: center;
    font-size: 15px;
    color: #616161;
    margin: 15px 0px; }
  .image .marker {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #ff1c2f;
    position: absolute;
    opacity: 0.8; }
  .image .marker::after {
    content: '';
    height: 10px;
    width: 10px;
    border-radius: 5px;
    position: absolute;
    animation: beacon 1s infinite;
    animation-direction: normal;
    display: block;
    border: 3px red solid;
    transform: translate(calc(-50% + 5px), calc(-50% + 5px)); }

@keyframes beacon {
  0% {
    border-color: #ff4747;
    height: 5px;
    width: 5px;
    border-radius: 5px; }
  100% {
    border-color: #ff002b00;
    height: 30px;
    width: 30px;
    border-radius: 15px; } }

.footer {
  width: 100%;
  height: 300px; }

@media (max-width: 1000px) {
  h2 {
    font-size: 20px;
    line-height: 1.2em; }
  h2:after {
    display: none; }
  p {
    font-size: 17px;
    line-height: 1.6em; } }

@media (max-width: 1000px) {
  .link {
    width: 100%;
    margin: 20px 0px; } }