.buttonExpandColapseTree {
    font-weight: 350;
    color: white;
    text-decoration: none;
    background: #663300;
    border-radius: 3px;    
    box-shadow: 0 -3px #663300 inset;
    transition: 0.2s;
    padding: .2em 1em calc(.2em + 3px);
    /*height: 2em;*/
  } 
  .buttonExpandColapseTree:hover { background: rgb(53, 167, 110); }
  .buttonExpandColapseTree:active {
    background: #663300;
    box-shadow: 0 3px #663300 inset;
  }
 .updateDate {
  background: white;
  font-size: 12px;
  color: #663300;
  padding: 2px;
  text-align: center;
  //background: #C5E2BD;
  border: 1px #663300 dotted; /* нарисует подчеркивание пунктиром под датой компиляции сайта*/
  border-top: none;
  border-left: none;
  border-right: none;
} 
.four {
  background: #ffffff;
  padding: 10px 20px;
  text-align: center;
} 
.four h1 {
  font-family: 'Merriweather', serif;
  position: relative;
  color: #663300;
  font-size: 30px;
  font-weight: normal;
  padding: 8px 20px 7px 20px;
  border-top: 4px solid;
  border-left: 4px solid;
  display: inline-block;
  margin: 0;
  line-height: 1;
}
.four h1:before {
  content: """"; 
  position: absolute;
  width: 20px;
  height: 20px;
  top: -20px;
  left: -20px;
  border: 4px solid #663300;
  box-sizing: border-box;
}
@media (max-width: 450px) {
  .four h1 {font-size: 36px;}
  .four h1:before {
    width: 20px;
    height: 20px;
    top: -20px;
    left: -20px;
  }
}
   H1 { 
    font-size: 120%; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    color: #333366; 
   }

.tree{
  --spacing : 1.5rem;
  --radius  : 10px;
}

.tree li{
  display      : block;
  position     : relative;
  padding-left : calc(2 * var(--spacing) - var(--radius) - 2px);
}

.tree ul{
  margin-left  : calc(var(--radius) - var(--spacing));
  padding-left : 0;
}

.tree ul li{
  border-left : 2px solid #ddd;
}

.tree ul li:last-child{
  border-color : transparent;
}

.tree ul li::before{
  content      : '';
  display      : block;
  position     : absolute;
  top          : calc(var(--spacing) / -2);
  left         : -2px;
  width        : calc(var(--spacing) + 2px);
  height       : calc(var(--spacing) + 1px);
  border       : solid #ddd;
  border-width : 0 0 2px 2px;
}

.tree summary{
  display : block;
  cursor  : pointer;
}

.tree summary::marker,
.tree summary::-webkit-details-marker{
  display : none;
}

.tree summary:focus{
  outline : none;
}

.tree summary:focus-visible{
  outline : 1px dotted #000;
}

.tree li::after,
.tree summary::before{
  content       : '';
  display       : block;
  position      : absolute;
  top           : calc(var(--spacing) / 2 - var(--radius));
  left          : calc(var(--spacing) - var(--radius) - 1px);
  width         : calc(2 * var(--radius));
  height        : calc(2 * var(--radius));
  border-radius : 50%;
  background    : #ddd;
}

.tree summary::before{
  content     : '+';
  z-index     : 1;
  background  : #663300;
  color       : #fff;
  line-height : calc(2 * var(--radius) - 2px);
  text-align  : center;
}

.tree details[open] > summary::before{
  content : '−';
}
  
.comment {
 font-size:medium;font-weight:normal;
}