* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
}

main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
}

.sidebar {
  width: 200px;
  height: 100%;
  background-color: #f0f0f0;
  view-transition-name: sidebar;
  position: relative;
}

.content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  background-color: white;
  view-transition-name: content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

iframe {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%;
  border: none;
}

main.open .sidebar {
  margin-left: 0;
  visibility: visible;
}

main.closed .sidebar {
  margin-left: -200px;
  visibility: hidden;
}

::view-transition-old(sidebar),
::view-transition-new(sidebar) {
  height: 100%;
  -webkit-transform-origin: left;
          transform-origin: left;
  mix-blend-mode: normal;
  position: absolute;
  left: 0;
  width: 200px;
}

::view-transition-old(content),
::view-transition-new(content) {
  height: 100%;
  -webkit-transform-origin: left;
          transform-origin: left;
  mix-blend-mode: normal;
}

.closed::view-transition-old(sidebar) {
  -webkit-animation: fade-out 0.23s both;
          animation: fade-out 0.23s both;
}

.closed::view-transition-new(content) {
  -webkit-animation: expand 0.23s both;
          animation: expand 0.23s both;
}

.open::view-transition-new(sidebar) {
  -webkit-animation: fade-in 0.23s both;
          animation: fade-in 0.23s both;
}

.open::view-transition-old(content) {
  -webkit-animation: collapse 0.23s both;
          animation: collapse 0.23s both;
}

@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@-webkit-keyframes expand {
  from {
    -webkit-transform: scaleX(0.85) scaleY(1);
            transform: scaleX(0.85) scaleY(1);
  }
  to {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
}

@keyframes expand {
  from {
    -webkit-transform: scaleX(0.85) scaleY(1);
            transform: scaleX(0.85) scaleY(1);
  }
  to {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
}

@-webkit-keyframes collapse {
  from {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
  to {
    -webkit-transform: scaleX(0.85) scaleY(1);
            transform: scaleX(0.85) scaleY(1);
  }
}

@keyframes collapse {
  from {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
  to {
    -webkit-transform: scaleX(0.85) scaleY(1);
            transform: scaleX(0.85) scaleY(1);
  }
}
/*# sourceMappingURL=style.css.map */