body {
    background-color: #1F222A;
    @media (max-width: 500px){
      margin:0 10px;
    }
    @media (min-width: 500px){
      margin:0 25px;
    }
    color: #C7B8FF;
    font-family: sans-serif;
}

::selection {
  background-color: #393f4e;
}

main {
  @media (max-width: 900px){
    margin: 62px 0 0 0;
    padding: 0;
  }
  @media (min-width: 900px){
    margin: 62px 0 0 0;
    padding: 0 0 0 300px;
  }
  @media (min-width: 1200px){
    margin:62px auto 0 auto;
    padding: 0 0 0 300px;
  }
  max-width: 900px;
  /* background-color: red; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: calc(100vh - 62px);
  transition: padding 0.3s, width 0.3s;
}

nav.menu {
  background-color: #1f222a;
  
  position:fixed;
  top:0;
  height: 100vh;
  z-index: 1000;
  overflow-y: auto;

  @media (max-width: 900px){
    /* display: none; */
    left: 0;
    right: 0;
    
  }
  @media (min-width: 900px){
    left:35px;
    width: 280px;
    padding: 0 0 10px 0px;
  }
  @media (min-width: 1250px){
    left:calc((100vw - 1180px)/2);
    width: 280px;
    padding: 0 0 10px 0px;
  }
  transition: transform 0.3s;
  /* @media (max-width: 1200px){
    left:0;
    transform: translateX(-100%);
    transition: transform 0.3s;
    width: 300px;
    padding: 10px 10px 10px 25px;
  } */
}

#nav-box {
  
}

nav.menu a {
    text-decoration: none;
    color: #C7B8FF;
    overflow-wrap: break-word;
    word-break: break-word;
}

nav.menu ul {
    padding: 0 0 0 20px;
    margin:0;
    list-style-type: none;
    counter-reset: section;
}

.details-border {
  border-left: solid 1px #5b5377;
  margin: 0 0 0 3.4px;
  padding: 0 0 0 10px;
}

nav.menu ul.articles {
    list-style-image: none;
}

nav.menu details {
    padding: 0;
}

nav.menu summary {
    cursor: pointer;
}

svg.menu path {
  fill:#C7B8FF;
  transition: fill 0.3s;
}

nav.menu summary svg {
  height: 12px;
  width: 15px;
}

nav.menu b {
  overflow-wrap: break-word;
  word-break: break-word;
}

nav.menu summary span {
    overflow-wrap: break-word;
    word-break: break-word;
    transition: color 0.3s;
}

nav.menu li a {
  transition: color 0.3s;
}

nav.menu summary:hover span {
    color: #FFC4D7;
}

nav.menu summary:hover svg path {
  fill:#FFC4D7;
}

nav.menu li > a:hover {
    color: #FFC4D7;
}

li:has(a:hover) svg.menu path {
    fill: #FFC4D7;
}

li:has(b) svg.menu path {
    fill: #F86C95;
}

nav.menu li b {
    color: #F86C95;
}

#note-title {
  display: block;
  font-size: 24px;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #F86C95;
}

header {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position:fixed;
  top:0;
  @media (max-width: 500px){
    left: 0;
    right: 0;
    padding: 0 10px;
  }
  @media (min-width: 500px){
    left: 0;
    right: 0;
    padding: 0 25px;
    transition: left 0.3s;
  }
  @media (min-width: 900px){
    left:315px;
    right: 15px;
    padding: 0 10px;
    transition: left 0.3s;
  }
  @media (min-width: 1250px){
    left:calc((100vw - 1200px)/2 + 290px);
    min-width: 900px;
    right: auto;
    padding: 0 10px;
    transition: none;
  }
  background-color: #1F222A;
  z-index: 1;
  border-bottom: solid 2px #C7B8FF;
  gap: 10px;
}

@media (max-width: 900px) {

  #menu-label {
    display: none;
  }

  #menu-label-mobile {
    display: initial;
    height: 18px;
    width: 18px;
  }

  #menu-close-label-mobile {
    display: initial;
  }

  #menu-toggle-mobile:not(:checked) ~ nav.menu {
    transform: translateX(-100%);
    display: none;
  }

  #menu-close-label-mobile-icon path {
    fill: #FF7979;
  }

  #menu-close-label-mobile-icon {
    height: 28px;
    width: 28px;
  }

  nav.menu {
    padding: 10px;
    font-size: 20px;
    display: initial;
  }
}

@media (max-width: 1250px) and (min-width: 900px){
  #menu-label-mobile {
    display: none;
  }

  #menu-toggle:not(:checked) ~ main{
    padding: 0px;
    max-width: 1200px;
  }

  #menu-toggle:not(:checked) ~ main header {
    left: 15px;
  }

  #menu-toggle:not(:checked) ~ nav.menu {
    transform: translateX(-350px);
  }

  #menu-close-label-mobile {
    display: none;
  }
}

@media (min-width: 1250px) {
  #menu-label-mobile {
    display: none;
  }

  #menu-close-label-mobile {
    display: none;
  }
}

/* @media (max-width: 1200px){
  #menu-toggle:checked ~ nav.menu {
      transform: translateX(0);
  }
  #menu-toggle:not(:checked) ~ main .content .content-view{
      padding: 0px;
  }
  
  #menu-toggle:not(:checked) ~ main header {
      left: 0;
  }
} */



.content-view {
    background-color: #1F222A;
}

#menu-bt path {
    fill: #F86C95;
    transition: fill 0.3s;
}

#menu-bt:hover {
    cursor: pointer;
}

#menu-bt:hover path {
    fill: #fcb6b6;
}

a:link {
    color: #89CAFF;
}
a:visited {
    color: #FF888A;
}

#menu-label {
    height: 18px;
    width: 18px;
    @media(min-width:1250px){
      display: none;
    }
}

#logo path {
    fill:#F86C95;
    transition: fill 0.3s;
}

#logo:hover path {
    fill:#fcb6b6;
}

#logo_box {
  display: flex;
  margin-bottom: 12px;
  align-items: center;
  justify-content: space-between;
  
  
  a {
    height: 50px;
    display: block;
    svg {
      height: 50px;
    }
  }
}

.code-wrapper {
  border: 2px solid #C7B8FF;
  /* border-radius: 5px; */
  margin: 0;
  overflow: hidden;
}

p + .code-wrapper {
  margin-top: 5px;
}

.code-wrapper + p  {
  margin-top: 15px;
}

ol + .code-wrapper {
  margin-top: 5px;
}

ul + .code-wrapper {
    margin-top: 5px;
}

.code-wrapper:last-child {
  margin-bottom: 0;
}

.code-toolbar {
  display: flex;
  justify-content: space-between; /* язык слева, кнопка справа */
  align-items: center;
  padding: 3px 3px 3px 10px;
  /* background: #434343; */
  border-bottom: 2px solid #C7B8FF;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}

.code-lang {
  color: currentColor;
  font-weight: 500;
}

.code-wrapper pre {
  margin: 0;
  padding: 0;
  overflow-x: auto;
}




.button {
  background: transparent;
  border:none;
  border-radius: 6px;
  cursor: pointer;
  align-items: center;
  padding: 3px 5px;
}

.button svg path {
  fill:#F86C95;
  transition: fill 0.3s;
}

.outline {
  border: solid #5C5C5C 1px;
}

.icon-button {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  justify-content: center;
}

.icon-button > img {
  width: 20px;
  height: 20px;
}

.button:hover svg path {
  fill: #FFC4D7;
}




blockquote {
  background: #2e323e;
  margin:0 0 5px 0;
  padding: 10px;
  border-left: solid 4px #C7B8FF;
}

blockquote p:last-child {
    margin-bottom: 0;
}

cite {
  display: block;
  text-align: right;
}

article img {
  border-radius: 5px;
  max-width: 100%;
}





table:last-child {
  margin:0;
}

table th,
table td {
  border: 1px solid #C7B8FF;
  padding: 6px 13px;
}

table th {
  background-color: #1F222A;
  font-weight: 600;
  text-align: left;
}

table tr {
  background-color: #2e323e;
}

table tr:nth-child(even) {
  background-color: #1F222A;
}

/* table tr:hover {
  background-color: rgb(83, 62, 74);
} */

table {
  border-collapse: collapse;
  border-spacing: 0;
  display: block;
  width: 100%;
  overflow: auto;
  margin: 0 0 10px 0;
}

h1.article {
    color: #FF7979;
    margin: 0 0 10px 0;
}

p {
  margin: 0;
}

p + p {
  margin-top: 5px;
}

p:last-child {
  margin: 0;
}


.hljs {
  background-color: #1F222A;
  border-radius: 0;
}

code {
  font-size: 12pt;
  color: #AFD3E9;
  background-color: #1F222A;
  padding: 0 5px;
  border-radius: 5px;
}

footer {
  border-top: solid 2px #C7B8FF;
  padding: 15px;
  margin: 25px -10px 0px -10px;
}

#license-box {
  max-width: 1000px;
  margin:0 auto;
}

#cc-logo svg {
  margin: 0 0 -3px 0;
}

#author {
  text-align: center;
}

#readingTime {
  font-size: 12px;
  svg {
    height: 12px;
    margin: 0 -5px -2px 0;
  }
}

#date {
  font-size: 12px;
  svg {
    height: 12px;
    margin: 0 -4px -2px 0;
  }
}

#info {
  text-wrap-mode: nowrap;
}

@media(max-width: 500px) {
  #readingTime {
    display: none;
  }

  #date {
    display: none;
  }
}

p + ol {
  margin-top: 0;
}

ol {
  margin: 0;
}

ul {
    margin: 0;
}