* {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
  direction: rtl;
  font-family: 'Shabnam', serif;
  background: $colorBG;
  overflow-x: hidden;
}

body::-webkit-scrollbar {
  width: 12px;
}

body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px $colorScrollbarShadow;
  -moz-box-shadow: inset 0 0 6px $colorScrollbarShadow;
  box-shadow: inset 0 0 6px $colorScrollbarShadow;
}

body::-webkit-scrollbar-thumb {
  background-color: $colorScrollbarBG;
  outline: 1px solid $colorScrollbarColor;
}

::selection {
  background: $colorSelection;
  color: white;
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

a {
  text-decoration: none;
  color: $colorTitle;
  transition: color .25s;

  &:hover {
    color: $colorLinkTitle;
  }
}

ul {
  list-style: none;
}

label {
  cursor: pointer;
}

.holder {
  float: right;
  width: 1024px;
  overflow: hidden;
  margin: 0 calc(50vw - 512px);
}

.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

header {
  padding: 32px 0;

  #section-right {
    float: right;
    width: 75%;

    img {
      float: right;
      width: auto;
      height: 64px;
      padding-left: 12px;
    }

    h1 {
      font-size: 22px;
      line-height: 36px;
    }

    p {
      color: $colorSubtitle;
      font-size: 16px;
      line-height: 36px;
    }

  }

  #section-left {
    float: left;
    width: 25%;
    overflow: hidden !important;

    * {
      overflow: hidden !important;
    }

    .toggle-btn {
      position: relative;
      float: left;
      width: 72px;
      height: 36px;
      margin: 18px calc(50% - 36px);
      border-radius: 40px;
      overflow: hidden !important;

      * {
        direction: ltr !important;
      }

    }

    input[type="checkbox"] {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: 0;
      cursor: pointer;
      opacity: 0;
      z-index: 2;
      overflow: hidden !important;
    }

    #mode-switch span {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: hidden !important;
      opacity: 1;
      background-color: #fff;
      box-shadow: 0 2px 25px $colorSpanBoxShadow;
      border-radius: 40px;
      transition: 0.2s ease background-color, 0.2s ease opacity;
    }

    #mode-switch span:before,#mode-switch span:after {
      content: '';
      position: absolute;
      top: 4px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      transition: 0.5s ease transform, 0.2s ease background-color;
      overflow: hidden !important;
    }

    #mode-switch span:before {
      background-color: $colorModeLightSwitchBG;
      transform: translate(-28px,0px);
      z-index: 1;
      overflow: hidden !important;
    }

    #mode-switch span:after {
      background-color: $colorModeSwitchBG;
      transform: translate(4px,0px);
      z-index: 0;
      overflow: hidden !important;
    }

    #mode-switch input[type="checkbox"]:checked + span {
      background-color: $colorModeSwitchBG;
      overflow: hidden !important;
    }

    #mode-switch input[type="checkbox"]:active + span {
      opacity: 0.5;
      overflow: hidden !important;
    }

    #mode-switch input[type="checkbox"]:checked + span:before {
      background-color: $colorModeSwitchBG;
      transform: translate(27px,-9px);
      overflow: hidden !important;
    }

    #mode-switch input[type="checkbox"]:checked + span:after {
      background-color: $colorModeLightSwitchBG;
      transform: translate(38px,0px);
      overflow: hidden !important;
    }

  }

}

#main-container {

  header {

    p {
      display: block;
      text-align: center;
      font-size: 19px;
      color: $colorSubtitle;
      font-weight: bold;
      padding: 0;
      line-height: 2;
    }

    .terminal {
      float: right;
      width: calc(70% - 24px);
      margin: 24px 15%;
      padding: 12px;
    }

    .hint {
      float: right;
      width: 80%;
      margin: 24px 10% 6px;
      font-size: 16px;
      font-weight: normal;
      text-align: justify;
      color: $colorParagraph;
      line-height: 2;
    }

  }

  section.section-holder {
    float: right;
    width: 100%;
    margin: 0;
    padding: 0;
    border-bottom: 2px solid $colorSectionHolderBorder;

    &:last-of-type, &.subject, &.no-border-bottom {
      border-bottom: none !important;
    }

    h1, h2 {
      float: right;
      width: 100%;
      text-align: center;
      padding: 0;
      margin: 0;
      color: $colorParagraph;
      opacity: 0.9;
      font-size: 20px;
      transition: color .25s;

      &:hover {
        color: $colorLinkTitle;
      }
    }

    h1 {
      color: $colorSubtitle;
      font-size: 24px;
      padding: 6px 0;
    }

    &.subject {
      margin-top: 24px;
      span {
        height: 0;
        border-top: 6px dotted $colorBorderDividerSubject;
        margin: 12px 0;
      }
    }

    p {
      float: right;
      width: 100%;
      text-align: justify;
      color: $colorParagraph;
      font-size: 16px;
      line-height: 2;
      font-weight: normal;
    }

    .section-container {
      float: left;
      width: 45%;
      margin: 32px 0;

      &:first-of-type {
        margin-right: 10%;
      }

      .section-code {
        float: left;
        width: 100%;
        margin: 0;
        border-radius: 15px;
        overflow: hidden;

        &.second-box {
          margin-top: 24px;
        }

        span.caption {
          float: left;
          width: auto;
          background: $colorSectionCaptionBG;
          color: $colorSectionCaptionText;
          padding: 10px 48px;
          font-size: 16px;
          border-bottom-right-radius: 500px;
          cursor: pointer;
        }

        .widgets {
          float: right;
          padding: 8px 8px 0 0;
        }

        code {
          float: left;
          width: calc(100% - 32px);
          margin: 0;
          padding: 16px;
          font-size: 15px;
        }

      }

    }
  }

}

kbd {
  background: $colorKBDBg;
  color: $colorKBDText;
  padding: 3px 6px;
  border-radius: 3px;
}

.terminal {
  background: $colorTerminalBG;
  border-radius: 15px;

  .widgets {
    direction: rtl !important;

    &:before {
      content: "";
      position: relative;
      top: 4px;
      right: 44px;
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: $colorWidgetsGreen;
      box-shadow: 20px 0 0 $colorWidgetsYellow, 40px 0 0 $colorWidgetsRed;
    }

  }

  * {
    direction: ltr;
  }

}

span.divider {
  float: right;
  width: 100%;
  margin: 8px 0;
  padding: 0;
  text-align: center;
  font-size: 48px;
  color: $colorParagraph;
  line-height: 32px;
  height: 48px;
  overflow: hidden;
  opacity: 0.4;
}

.caution {
  float: right;
  width: 100%;
  margin: 32px 0 0;
  padding-top: 32px;
  font-size: 16px;
  font-weight: normal;
  text-align: justify;
  color: $colorParagraph;
  line-height: 2;
  border-top: 6px dotted $colorBorderDividerSubject;
}

footer {
  padding: 32px 0 !important;

  p {
    float: right;
    color: $colorParagraph;
    height: 42px;
    line-height: 42px;

    b {
      color: $colorRedCopyright;
    }
  }

  #contribute {
    color: $colorLinkTitle;
    transition: opacity .25s;

    &:hover {
      opacity: 0.5;
    }
  }

  #EM-Copyright {
    float: left;
    line-height: 42px;
    height: 42px;
    width: 42px;
    margin: 0;
    border-radius: 8px;
    background: $colorWhiteCopyright;
    border: 1px solid $colorRedCopyright;
    text-align: center;
    transition: 0.15s all;
    display: flex;
    align-items: center;
    justify-content: center;

    i {
      transition: 0.15s all;
      color: $colorRedCopyright;
      font-size: 1.45rem;
    }

    &:hover {
      background: $colorRedCopyright;
      color: $colorWhiteCopyright;
      border-color: $colorWhiteCopyright;

      i {
        color: $colorWhiteCopyright;
      }

    }
  }

}

.DPXGithubRatingButton {
  position: fixed;
  background: $dpxgithubrating-bg;
  color: $dpxgithubrating-color;
  border: 1px solid $dpxgithubrating-border;
  box-shadow: $dpxgithubrating-shadow;
  left: 32px;
  bottom: 32px;
  line-height: normal;
  padding: 0;
  border-radius: 6px;
  font-size: 1rem;
  display: grid;
  grid-auto-flow: column;
  transition: opacity .15s;
  
  span, i, b {
      display: flex;
      align-items: center;
  }

  b {
      padding: 2px 6px;
      border-right: 2px solid $dpxgithubrating-border;
  }

  i {
      padding: 0 6px 0 0;
  }

  span {
      padding: 0 6px;
  }

  &:hover {
      opacity: 0.75;
  }
}

#projects {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 32px;
  padding: 16px;

  li {
    display: block;
    border-radius: 24px;
    transition: opacity .15s;
    padding: 0 4px;
    
    &:hover {
      opacity: .75;
    }

    a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 64px 0;
      color: #fff;
      font-size: 1.25rem;
      font-variation-settings: "wght" 600;
      text-align: center;
      line-height: 1.8;
    }

  }

}

.project div:first-of-type {
  color: #353535;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 4px;

  i {
    font-size: 1.5rem;
    padding-left: 8px;
  }

  h2 {
    font-size: 1.325rem;
  }

}

.caution:last-of-type {
  margin-bottom: 16px;
}

.caution ~ hr {
  border: 1px solid transparent;
  height: 1px;
  margin: 16px 0;
  background-image: linear-gradient(90deg,transparent,rgba(0,0,0,.25),transparent);
}