/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: rgba(26, 86, 219, 1); /* Base Blue */
  --ifm-color-primary-dark: rgba(21, 70, 179, 1); /* Darker Shade */
  --ifm-color-primary-darker: rgba(18, 60, 153, 1); /* Even Darker */
  --ifm-color-primary-darkest: rgba(13, 43, 110, 1); /* Darkest Shade */
  --ifm-color-primary-light: rgba(36, 104, 255, 1); /* Lighter Shade */
  --ifm-color-primary-lighter: rgba(60, 129, 255, 1); /* Even Lighter */
  --ifm-color-primary-lightest: rgba(84, 153, 255, 1); /* Lightest Shade */
  --ifm-code-font-size: 95%;
  /* --ifm-color-secondary: rgb(144 144 144);  */

  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.05);
}

[data-theme='dark'] {
  --ifm-color-primary: rgba(36, 104, 255, 1); /* Slightly Brighter Blue for Dark Mode */
 /* --ifm-color-secondary: rgb(152 152 152); /* White */
  
  --ifm-color-primary-dark: rgba(31, 90, 219, 1); /* Darker Blue */
  --ifm-color-primary-darker: rgba(27, 79, 194, 1); /* Even Darker */
  --ifm-color-primary-darkest: rgba(21, 60, 146, 1); /* Darkest Blue */
  --ifm-color-primary-light: rgba(42, 120, 255, 1); /* Lighter Blue */
  --ifm-color-primary-lighter: rgba(66, 143, 255, 1); /* Even Lighter */
  --ifm-color-primary-lightest: rgba(89, 167, 255, 1); /* Lightest Blue */
  --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.1);
}

.code-block-diff-add-line {
  background-color: #00FF3C33;
  display: block;
  margin: 0 -40px;
  padding: 0 40px;
}

.language-html .code-block-diff-add-line span {
  color: pink!important;
}

.code-block-diff-add-line::before {
  content: "+";
  left: -32px;
  margin-right: -16px;
  padding-right: 8px;
  position: relative;
}

.code-block-diff-remove-line {
  background-color: #FF150033;
  display: block;
  margin: 0 -40px;
  padding: 0 40px;
}

.code-block-diff-remove-line::before {
  content: "-";
  left: -32px;
  margin-right: -16px;
  padding-right: 8px;
  position: relative;
}

/**
 * use magic comments to mark diff blocks
 */
pre code:has(.code-block-diff-add-line) {
  padding-left: 40px!important;
}

pre code:has(.code-block-diff-remove-line) {
  padding-left: 40px!important;
}

.image-gallery-image {
  max-width: 800px !important;
}

.image-gallery-description {
  font-size: 2rem;
  color: #FFFFFF;
}

.markdown img {
  border-radius: 8px; 
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); 
  margin: 16px 0;
}

.theme-code-block pre {
  max-height: 500px;
  overflow-y: overlay;
  /* semi-transparent white scroll background, with rounded corners, webkit scrollbar */

}

.theme-code-block pre::-webkit-scrollbar {
  width: 12px;
}

.theme-code-block pre::-webkit-scrollbar-thumb {
  background-color: #888; /* Scrollbar color */
  border-radius: 10px !important; /* Rounded corners for the thumb */
  border: 3px solid #f1f1f1; /* Padding around thumb */
}

.theme-code-block pre::-webkit-scrollbar-track {
  background: #f1f1f1; /* Track (background of scrollbar) */
  border-radius: 10px !important; /* Rounded borders for the track */
}


.laptop {
  position: relative;
  margin: auto;
  max-width: 80vw;
  width: 70vw;
  
 
}



.laptop .laptop__screen {
  position: relative;
  z-index: 1;
  padding: 3%;
  border-radius: 2vw;
  background: #ecf1f7;
  background-image: linear-gradient(to bottom, #333, #111);
  box-shadow: 0 0.1rem 0 #cfcfcf;
  border: 2px solid #ccc;
}
.laptop .laptop__screen img {
  display: block;
  max-width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
  background: #000;
}
.laptop .laptop__bottom {
  position: relative;
  z-index: 1;
  margin-right: -7%;
  margin-left: -7%;
  height: 0.7vw;
  background: #e9eff5;
  background-image: linear-gradient(to right, #d2dde9 0%, #f9fcff 15%, #e5ebf2 40%, #e5ebf2 60%, #f9fcff 85%, #d2dde9 100%);
}
.laptop .laptop__bottom::before {
  display: block;
  margin: 0 auto;
  width: 20%;
  height: 0.7vw;
  border-radius: 0 0 0.2rem 0.2rem;
  background: #f6f9fc;
  background-image: linear-gradient(to right, #c3cfdb 0%, #f6f9fc 10%, #f6f9fc 90%, #c3cfdb 100%);
  content: " ";
}
.laptop .laptop__under {
  position: absolute;
  top: 100%;
  left: 25%;
  display: block;
  width: 50%;
  height: 1.5vw;
  background: #e2e8f0;
  background-image: linear-gradient(to bottom, #e2e8f0, #bec7d1);
}
.laptop .laptop__under::after, .laptop .laptop__under::before {
  position: absolute;
  top: 0%;
  right: 100%;
  bottom: 0;
  display: block;
  width: 50%;
  border-bottom-left-radius: 80%;
  background: inherit;
  content: " ";
}
.laptop .laptop__under::after {
  right: auto;
  left: 100%;
  border-bottom-right-radius: 80%;
  border-bottom-left-radius: 0;
}
.laptop .laptop__shadow {
  position: absolute;
  right: -10%;
  bottom: -2.5vw;
  left: -10%;
  z-index: 0;
  height: 2vw;
  background: radial-gradient(ellipse closest-side, #000, transparent);
  opacity: 0.5;
}

.laptop_container {
  margin-bottom: 5rem;
}

.laptop .theme_switcher {
  position: absolute;
  cursor: pointer;
  top: 2.56vw;
  right: 5.28vw;
  width: 2vw;
  height: 2vw;
  font-size: 1.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2vw;
  border-width: 2px;
  z-index: 2;
  /* disable text selection */
  user-select: none;  

  background: #555;
  opacity: 0.5;
  transition: opacity 0.3s;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.6;
  }
  100% {
    transform: scale(0.8);
    opacity: 0.4;
  }
}



.laptop .theme_switcher:hover {
  opacity: 0.3;
}


.fakeButtons {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: #ff3b47;
  display: inline-block;
}
.fakeButtons:hover{
  filter:brightness(1.1)
}

.fakeMinimize {
  background-color: #ffc100;
  border-color: #9d802c;
}

.fakeZoom {
  background-color: #00d742;
  border-color: #049931;
}

.fakeMenu {
  gap: 5px;
  padding-left: 10px;
  width: 100%;
  box-sizing: border-box;
  height: 25px;
  background-color: #bbb;
  margin: 0 auto;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  display: flex;
  align-items: center;
}


html[data-theme="dark"] .fakeScreen {
  background-color: #474747d1;
}

.fakeScreen {
  background-color: #151515d1;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.5)
}

.line1 {
  color: white;
  font-family: 'Consolas', monospace;
  text-align: left;
  margin: 0;

}

.terminalWrapper {
  width: 400px;
  max-width: 100vw
}

.button--secondary[class] {
  background-color: #6a7b90;
}

.button--primary[class], .button--secondary[class] {
  box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.2);
  border: 0;
  min-width: 180px;
  color: white !important;
  transition: 0.2s;
}

.button--primary[class]:hover, .button--secondary[class]:hover {
  filter: brightness(1.1)
}

.button--primary[class] {
  background-color: #3a81e5;
}

.hero__title {
  font-size: 2.5rem;
}

.hero__subtitle {
  font-size: 1.3rem;
}

.heroRow {
  display:  flex;
  flex-direction: row;
  justify-content: center;
  gap: 80px;
  max-width: 80vw;
  width: 70vw;
  margin-left: auto;
  margin-right: auto;
  margin-top: 28px;
  margin-bottom: 10px;

}

@media screen and (max-width: 600px) {
  .heroRow {
    flex-direction: column;
    gap: 30px;
    width: 80vw;
  }

  .heroRow .button {
    width: 100%;
  }
  .terminalWrapper {
    max-width: 100%;
    margin-bottom: 20px;
  }

  .laptop {
    width: 80vw;
  }

  .theme_switcher {
    display: none !important;
  }
}

.buttons_src-pages-index-module {
  display: flex;
  gap: 10px;
}

.hidden-sidebar {
  display: none
  ;
}

.split-screen {
  display: flex;
  gap: 20px
}

.split-screen>div:first-child {
  max-width: 60%;
  min-width: 60%;
}

.split-screen>div:last-child {
  flex: 1;
}

.split-screen>div:last-child img {
  margin-top: 0;
}

/* mobile */
@media screen and (max-width: 600px) {
  .split-screen {
    flex-direction: column;
    gap: 10px
  }
  .split-screen>div:first-child {
    max-width: 100%;
    min-width: 100%;
  }

 
}