:root {
  --frame-header-height-param: .8vmin;
  --frame-padding: 0.4vmin;
}

a-dumpling {
  display: none;
}

d-iframe iframe {
  border: none;
  width: 100%;
  height: 100%;
}

.Frames {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.Frame-Visible {
  display: block;
}

.Frame-Unfocused {
  filter: blur(2px);
  opacity: 0.5;
}

.Frame-Dragging {
  animation: shake 1s alternate infinite;
  box-shadow: black 1vmin 1vmin;
}

.Frame-Scaling {
}

.sanguine {
}

.phlegmatic {
}

.choleric {
}

.melancholic {
}

.Frame-Unfocused .Frame-body,
.Frame-Dragging .Frame-body,
.Frame-Scaling .Frame-body {
  pointer-events: none;
}

.Frame {
  z-index: 10;
  background-color: rbga(0, 0, 0, 0.4);
  position: absolute;
  left: 50%;
  top: 6.9vmin;
  height: 420px;
  width: 420px;
  pointer-events: all;
  transform-origin: top left;

  /* ignore virtual cursor */
  --is-cursor-target: false;
}

.Frame-content {
  background-color: #dadada;
  color: black;
  display: flex;
  flex-flow: column;
  border: 1px solid black;
  box-shadow: 1px 1px 2px #696969;
  height: 100%;
  width: 100%;
}

.Frame-header {
  margin: calc(var(--frame-header-height-param) * 0.2);
  margin-bottom: calc(var(--frame-header-height-param) * 0.5);
  background-color: #dadada;
  min-height: calc(var(--frame-header-height-param) * 1.0);
  user-select: none;
  display: flex;
  align-items: center;
  position: relative;
  border: calc(var(--frame-header-height-param) * 0.1) solid #dadada;
  overflow: hidden;
  z-index: 1;
  height: calc(var(--frame-header-height-param) * 2.5);
}

.Frame-Dragging .Frame-header-blank{
  cursor: grabbing;
}

.Frame-header-blank {
  flex-grow: 1;
  background-image: url("./img/window-head.png");
  background-repeat: round;
  /* background-size: cover; */
  margin-left: calc(var(--frame-header-height-param) * 0.2);
  cursor: grab;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Frame-header-back {
  font-weight: bolder;
}

.Frame-header-maximize {
  box-sizing: border-box;
  width:calc(var(--frame-header-height-param) * 2.1);
  height:calc(var(--frame-header-height-param) * 2.1);
  border: calc(var(--frame-header-height-param) * 0.20) solid black;
}

.Frame-header-temperament {
  font-size: calc(var(--frame-header-height-param) * 1.8);
}

.frame-header-image {
  position: absolute;
  width: 100%;
  display: inline-flex;
}

.Frame-header-button {
  /* height: 1.2vmin; */
  /* width: 1.2vmin; */
  font-size: calc(var(--frame-header-height-param) * 1.9);
  margin-left: calc(var(--frame-header-height-param) * 0.45);
  text-align: center;
}

.Frame-close-button {
  position: relative;
  width: calc(var(--frame-header-height-param) * 2.1);
  height: calc(var(--frame-header-height-param) * 2.1);
  /* margin-top: 0.1vmin; */
  /* margin-left: var(--frame-padding); */
  background-image: url("./img/window-close.gif");
  background-repeat: no-repeat;
  background-size: contain;
}

.Frame-header-button:hover {
  cursor:pointer;
  /*background-color: magenta*/
  filter: invert(30%) brightness(120%) sepia(100%) hue-rotate(242deg) saturate(400%) /* magenta tint */
}

.Frame-body {
  box-sizing: border-box;
  transform-origin: top left;
  flex: 1;
  padding: var(--frame-padding);
  padding-top: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
}

.Frame-shim {
  width: 100%;
  height: 100%;
  overflow:hidden;
}

.Frame-body iframe {
  box-sizing: border-box;
  background: white;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  min-height: 0;
  min-width: 0;
}

.Frame-handle {
  position: absolute;
  width: 2.0vmin;
  height: 2.0vmin;
  max-width: 15px;
  max-height: 15px;
  right: min(0.64vmin, var(--frame-padding));
  bottom: min(0.64vmin, var(--frame-padding));
  margin-right: 1px;
  margin-bottom: 1px;
  background-image: url("./img/window-res.gif");
  background-repeat: no-repeat;
  background-size: cover;
  cursor: nwse-resize;
}

.Frame-Scaling .Frame-handle{
  cursor: grabbing;
}

/* https://www.westerndevs.com/css/Using-Overflow-Ellipsis-in-Inline-Flex/ */
.Frame-header-title-container {
  white-space: nowrap;
  max-width: 60%;
  pointer-events: none;
}

.Frame-header-title {
  display: inline-flex;
  align-items: center;
  font-family: monospace;
  height: calc(var(--frame-header-height-param) * 2.5);
  padding-left: 1vmin;
  padding-right: 1vmin;
  background-color: #dadada;
}

.choleric .Frame-handle{
  cursor: not-allowed;
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg) scale(0.98);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg) scale(0.94);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg) scale(0.94);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg) scale(0.9);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg) scale(0.9);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg) scale(0.9);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg) scale(0.9);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg) scale(0.9);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg) scale(0.9);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg) scale(0.9);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg) scale(0.9);
  }
}