.block:target, .block.focussed {
      position: fixed;
      top: 20px;
      left: 20px;
      right: 20px;
      bottom: 20px;
      z-index: 1000;
      width: auto !important;
      height: auto !important;
      flex: none !important;
      border-radius: 30px;
      background: #ffffff;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    body{padding: 20px; overflow-x: hidden;}

    p{
      opacity: .6;
    }
    panel[left]{
      background: #dbdbdb;
      padding: 40px;
      z-index: 0;
      top: 30px;
      bottom: 30px;
      border-radius: 30px;
      transition: var(--transition);
      overflow: auto;
      width: 300px;
    }
    panel[left][overlay]{
      filter: blur(1px);
      transform: scale(.96);
      border-radius: 25px;
      opacity: .4;
    }
    panel[left][overlay]:hover{
      filter: blur(0);
      transform: scale(1);
      opacity: 1;
    }
    panel[left][overlay]:hover ~ panel[main]{
      transform: translateX(300px);
      filter: blur(3px);
    }
    panel[left][overlay]:hover ~ panel[right]{
      opacity: .8;
      filter: blur(6px);
      transform: translateX(150px);
    }
    panel[left] .button{text-align: left;}
    panel[main]{
      background: #e4e4e4;
      padding: 100px;
      box-shadow: 0 40px 60px 20px rgba(0, 0, 0, 0.1);
      margin: 0  20px;
      z-index: 1;
      transition: var(--transition);
      border-radius: 30px;
      overflow: auto;
    }
    panel[right]{
      background: #dc005cc6;
      padding: 30px;
      top: 10px;
      bottom: 10px;
      overflow: auto;
      border-radius: 30px;
      transition: var(--transition);
      width: 300px;
      backdrop-filter: blur(9px);
    }
    .close-popup{display: none}
    
    @media only screen and (max-width: 769px) {
    .close-popup{display: inline-flex;}
      panel[right]{
        transform: translateX(calc(100vw - 50px));
        left: -10px;
        right: -10px;
        margin: 20px 0;
        width: 100%;
        border-radius: 30px;
        z-index: 9;
      }
      panel[right].active{
        transform: translateX(0);
      }
      panel[left][overlay]:hover ~ panel[right]{
        filter: blur(0px);
        transform: translateX(110%);
      }
      panel[main]{
        margin: 0 0 0 20px;
        width: auto;
        padding: 50px;
        grid-row: 2;
        grid-column: 2 / 4;
      }
    }
    panel[top]{
      display: flex;
      padding: 0 25px 20px;
      gap: 10px;
      justify-content: space-between;
    }
    panel[bottom]{
      display: flex;
      padding: 20px 25px 0;
      gap: 10px;
      opacity: .3;
      font-size: .85rem;
      justify-content: center;
    }

    ol{
      margin-left: 0;
      padding-left: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
      list-style: none;
    }

    .buttons.pull-top-right{
      margin: 0px -20px 0 0;
    }

    panel[right] .buttons.pull-top-right{
      margin: 0 -5px 0 0;
    }

    .buttons:not(:hover){background: transparent !important; opacity: .2;}

    .buttons{
      transition: var(--transition);
    }

    .tree{width: 100%;}

    .tree ul{
      margin: 0 0 20px; padding: 0 0 0 ; list-style: none;
    }
    .tree ul li::before{
      content: '';
      display: block;
      width: 5px;
      height: 5px;
      background: #bbbbbb;
      border-radius: 5px;
      position: relative;
      top: 18px;
      left: 10px
    }
    ul .button.in-menu{
      min-height: 30px;
      padding-left: 25px;
      opacity: .5;
    }
    .button.in-menu:hover{
      transform: translateX(5px);
      transition: all .2s ease-in-out;
      opacity: 1;
    }
    
    .expanded .cards .card{
      overflow:visibile;
      display: block;
    }
    .expanded .add-card{
      overflow:visibile;
      display: inline-flex;
    }
    .expanded .container > h2, .expanded > h3{
      font-size: 40px !important;
    }
    .block h2{
      transition: var(--transition)}
    .card h3{font-size: 20px; 
      transition: var(--transition)}
    .card p{font-size: 1.05rem;}

    panel[top] > ul{display: flex; list-style:none; gap: 10px;flex-direction: row; align-items: center; justify-content: center;}
    panel[top] li{display: flex; align-items: center;}

    .expanded{
      background: #ffffff;
      z-index: 999;
      padding: 100px;
      overflow: auto;
    }
    .expanded > .cards > .card{min-width: 300px}

    .expanded > .cards > .card{
      padding: 50px;
    }
    
    @media only screen and (max-width: 769px) {
      .expanded{
        padding: 30px;
        overflow: auto;
      }

      .expanded > .cards{
        padding: 20px;
      }

      .expanded > .cards > .card{
        padding: 20px;
      }
    }