/*����������*/
/*root and html are seen in shadow dom!!!!*/
:root {
  --bg-color: #ddd;
  --btn-border: #ccc;
  --btn-pressed: #eee;
  --btn-unpressed: #9ad184;
  --btn-hover: #2cac13;
  --ref-unpressed-color: #028c00;
  --ref-pressed-color:red;

  --fnt_size:1rem;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  font-size: 20px;
  background-color: var(--bg-color);
  height: 100%;
  width: 100%;
}

canvas{
  padding: 0px 0px 0px 0px;
  z-index: 10;
}

body{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;

}
main{
  flex: 1 0 auto;
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100%;
  overflow: auto;
}
aside {
  flex: 1 1 auto;
  height: 100%;
  overflow: scroll;
  flex: 0 0 auto;
}
article:not([hidden]) {
 /* display: flex;
  flex-direction: column;*/
  flex: 1 0 0%;
  overflow: scroll;
  padding: 20px;
  margin: 0px;
  gap: 20px;
  align-items:center;
}

article>*{
  padding:20px;
}

div.cube>div{
  min-width: 48vw;
}
div.cube{
  display: flex;
  flex-direction: column;
  align-items: center;
}

footer{
  flex: 1 0 auto;
}

::-webkit-scrollbar-track {
	background-color: #ccc; /*Цвет скролла*/
} 
::-webkit-scrollbar-thumb { 
	border-radius: 5px; /*Закругление ползунка*/
	background-color: #e28000; /*Цвет ползунка*/
} 
::-webkit-scrollbar { 
	width: 6px;  /*Толщина скролла*/
  height: 6px;
}

body::-webkit-scrollbar{
  display: none;
}

    aside a:hover {
        background-color: var(--btn-hover);
      }
          
aside{/*
  position: sticky;
  top:20px;*/
  width: calc(var(--fnt_size) * 20);
  resize: horizontal;
  flex: 0 0 auto;
}
::-webkit-resizer {
  border: 20px solid black;
  border-width: 20px;
  background: red;
  box-shadow: 0 0 5px 5px blue;
  outline: 2px solid yellow;
  height: 40px;
}
/*
footer div{
  position: sticky;
  bottom: 10px;
}
*/
          aside ul{
              display: flex;
              flex-direction: row;
              /*width: max-content;
              /*width: fit-content;
              flex-direction: column;*/
              /*padding: 40px;*/
              padding-top: 2rem;
              flex-wrap: wrap;
          }

          aside li{
            display: block;
            /*width: fit-content;
            flex-direction: column;*/
            margin: 5px 10px 5px 10px;
          }

          aside a{
              font-size: calc(0.9*var(--fnt_size));
              font-weight: bold;
              margin: 5px;
              width: max-content;
            background: var(--btn-unpressed);
            border: groove var(--btn-border);
            border-width: 0px;
            /*border-color: darkslategrey;*/
            border-color: var(--btn-border);
            border-radius: 0.6rem;
            align-self: center;
            
          }

          footer{
            padding: calc(var(--fnt_size));
          }
          footer div{
            text-align: center;
          }

          .title_img{
            padding: 10px;
            object-fit: contain;
          }




          p {
            padding: calc(var(--fnt_size) * 2);
            text-align:justify;
            text-indent: calc(var(--fnt_size) * 4);
        }
/*
        div:has(>*:not(img)) { 
          clear:both;
      }
        */
        

        chapter-of-document > div {
          display:flex;
          flex-direction: row;
          padding: 0;
          flex-wrap: wrap;
          justify-content: center;
        }

        h2, h3 {
          text-align:center;
        }
        
        .background-img{
          position: absolute;
          top: 0px; left: 0px;
          width:100%; 
          height:100%;
          object-fit: cover;
          opacity: 20%;
        }

        .textoverlay{
          mix-blend-mode: color-burn;
          color: blue;
          font-size:40px;
          font-weight: bold;
        }


        .mainsection div:has(>img) {
          float:right;
          margin: calc(var(--fnt_size) * 2);

        }

        .background-img{
          position: absolute;
          top: 0px; left: 0px;
          width:100%; 
          height:100%;
          object-fit: cover;
          opacity: 20%;
        }

        .textoverlay{
          mix-blend-mode: color-burn;
          color: blue;
          font-size:40px;
          font-weight: bold;
        }

        main, article, aside {   /*Иначе исчезает прокрутка в aside и article при наличии фонового рисунка с position: absolute*/
          position: relative;
        }