:root {
  --theme-color: #753742;
  --theme-color-hover: #853e4b;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
  }
  .main,
  .topics-modal-container {
    color: rgb(185, 185, 185);
  }
  .search-topics-modal {
    border: 1px solid rgb(48, 48, 48);
  }
  .s-b-con-con,
  .header-welcome {
    background-color: rgb(0, 0, 0);
  }
  .head-date h1 {
    color: var(--theme-color);
  }
  .header-welcome-h h4 {
    color: rgb(185, 185, 185);
  }
  .search-input-ip,
  .search-topics-modal {
    border: 1px solid rgb(48, 48, 48);
    background-color: rgba(0, 0, 0, 0.534);
    backdrop-filter: blur(50px);
    color: rgb(255, 255, 255);
  }
  .search-input-ip::placeholder,
  .search-topics-modal::placeholder {
    color: rgb(255, 255, 255);
  }
  .s-b-con {
    background-color: black;
    color: rgb(219, 219, 219);
  }
  .s-t-con-h h4 {
    color: rgb(134, 134, 134);
  }
  .s-o-i {
    color: var(--theme-color);
  }
  .app_summary_table h2,
  .app_summary_table h4,
  .app_summary_table h3,
  .app_summary_table h5 {
    color: rgb(219, 219, 219);
  }
  .div-box-theme,
  .w-con-div2, .cf-comp-div {
    background-color: rgb(20, 20, 20);
  }
  .prof-name-btn {
    background-color: rgb(20, 20, 20);
    color: rgb(219, 219, 219);
  }
  .prof-name-div {
    background-color: rgb(238, 238, 238);
  }
  .prof-name-div h5 {
    color: rgb(20, 20, 20);
  }
  .topics-modal-content-list-text-li:hover {
    background-color: rgba(0, 0, 0, 0.493);
  }
  .topics-modal-content-list-text-a {
    color: rgb(219, 219, 219);
  }
  .code-h {
    font-size: 20px;
  }
  .code-t {
    color: rgb(170, 170, 170);
  }
  .jp-con-hr {
    border: none;
    border-top: 1px dashed rgb(170, 170, 170);
  }
  .loader {
    border: 4px solid var(--theme-color);
    border-top: 4px solid rgb(0, 0, 0);
  }
  .g-s-b {
    box-shadow: 0px 0px 5px #5f5f5fd7;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background-color: white;
  }
  .main,
  .topics-modal-container {
    color: rgb(78, 78, 78);
  }
  .search-topics-modal {
    border: 1px solid rgb(224, 224, 224);
  }
  .s-b-con-con,
  .header-welcome {
    background-color: rgb(255, 255, 255);
  }
  .head-date h1 {
    color: var(--theme-color);
  }
  .header-welcome-h h4 {
    color: rgb(78, 78, 78);
  }
  .search-input-ip {
    border: 1px solid rgb(224, 224, 224);
    background-color: rgba(255, 255, 255, 0.534);
    backdrop-filter: blur(50px);
    color: rgb(0, 0, 0);
  }
  .search-input-ip::placeholder {
    color: rgb(0, 0, 0);
  }
  .s-b-con {
    background-color: white;
    color: rgb(61, 61, 61);
  }
  .s-t-con-h h4 {
    color: rgb(134, 134, 134);
  }
  .app_summary_table h2,
  .app_summary_table h4,
  .app_summary_table h3,
  .app_summary_table h5,
  .prof-name-div h5 {
    color: rgb(238, 238, 238);
  }
  .w-con-div2, .cf-comp-div {
    background-color: rgb(238, 238, 238);
    color: rgb(61, 61, 61);
  }
  .s-o-i {
    color: var(--theme-color);
  }
  .div-box-theme,
  .w-con-div2 {
    background-color: rgb(238, 238, 238);
  }
  .prof-name-btn {
    background-color: rgb(238, 238, 238);
    color: rgb(61, 61, 61);
  }
  .prof-name-div {
    background-color: rgb(20, 20, 20);
  }
  .topics-modal-content-list-text-li:hover {
    background-color: rgba(255, 255, 255, 0.493);
  }
  .topics-modal-content-list-text-a {
    color: rgb(61, 61, 61);
  }
  .code-h {
    font-size: 20px;
  }
  .code-t {
    color: rgb(85, 85, 85);
  }
  .jp-con-hr {
    border: none;
    border-top: 1px dashed rgb(85, 85, 85);
  }
  .loader {
    border: 4px solid var(--theme-color);
    border-top: 4px solid rgb(255, 255, 255);
  }
  .g-s-b {
    box-shadow: 0px 0px 5px #000000d7;
  }
}
.main-theme {
  border-radius: 0px;
}
.header-welcome {
  border-radius: 0px;
  padding: 50px 10px 25px 10px;
}
.app_summary_table {
  border-radius: 0px;
}
.app_theme {
  background-color: var(--theme-color);
  color: white;
  font-weight: bold;
}
.prof-div-img {
  width: 40px;
  height: 40px;
  border-radius: 50px;
  cursor: pointer;
}
.prof-name-btn {
  outline: none;
  border: none;
  padding: 10px;
  width: fit-content;
  cursor: pointer;
}
.prof-name-div {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  position: absolute;
  right: 0;
  top: 45px;
}
.prof-name-div.hide {
  display: flex;
}
.signin-again-btn {
  text-decoration: none;
  padding: 10px;
  align-self: flex-start;
  cursor: pointer;
  border: none;
  box-shadow: 0px 0px 5px #000000d7;
}
.signin-again-btn:hover {
  background-color: var(--theme-color-hover);
}
.s-b-con-con {
  width: 100%;
  position: fixed;
  padding: 100px 0px 50px 0px;
  border-radius: 0px;
}
.s-b-div {
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.s-b-con {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.g-s-b {
  padding: 10px;
  align-self: flex-start;
  cursor: pointer;
  border: none;
}
.g-s-b:hover {
  background-color: var(--theme-color-hover);
}
.s-d-con {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.s-d-i {
  width: 32px;
}
.s-t-con {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-wrap: wrap;
  margin: 350px auto 50px auto;
  width: 80%;
}
.s-t-con h2 {
  width: 100%;
}
.s-t-a-h {
  width: fit-content;
}
.s-t-a {
  text-decoration: none;
  color: white;
}
.s-t-a:hover {
  text-decoration: underline;
}
.s-o-con {
  display: flex;
  align-items: center;
}
.s-o-i {
  width: 30px;
}
.w-con-div h2,
.git-con-h-div-t1 h3,
.git-con-h-div-t2 h3,
.git-con-h-div h3,
.lb-con-h-div h3,
.lc-con-h-div h3,
.we-con-h-div h3,
.ec-con-h-div h3,
.rb-con-h h3,
.cb-con-h h3,
.dd-con-h-div h3,
.a-p-con-h h3,
.wt-con-h h3,
.fr-con-h h3,
.win-con-h h3,
.js-con-h h3,
.scr-con-h h3,
.pr-con-h h3,
.ex-con-h h3,
.ex-con-h-dep h4,
.w-con-div2 h3,
.cf-comp-div h5:nth-of-type(1), .ccf-div h3, .ac-con-h-div h3, .cf-div h2, .cf-comp-div-con h2{
  color: var(--theme-color);
}
.jp-con-code-h pre:nth-of-type(1) {
  color: var(--theme-color);
}
.s-b-con-con,
.s-t-con h2 {
  color: var(--theme-color);
}
.cf-components-btn:hover {
  background-color: var(--theme-color-hover);
}