* {
  box-sizing: border-box;
}

@font-face {
    font-family: 'W95font';
    src: url('fonts/w95font.woff2') format('woff2'),
         url('fonts/w95font.woff2') format('woff');
    font-weight: normal;
}

@font-face {
    font-family: 'W95font';
    src: url('fonts/95font-bold.woff2') format('woff2'),
         url('fonts/w95font-bold.woff2') format('woff');
    font-weight: bold;

}

:root {
  --desktop-color: #008080;
  --desktop-text-color: #ffffff;

  --title-bar-color: #0827f5;
  --title-bar-text-color: #ffffff;
  --title-bar-highlight-color: #0827f5;
  --title-bar-height: 15px;

  --pane-content-background-color: #c3c3c3;

  --pane-default-width: auto;
  --pane-default-height: auto;
  --pane-border-radius: 0px;
}


html,
body {
  background-image: url("images/win95bg.webp");
  box-sizing: border-box;
  height: 100%;
  padding: 0;
  margin: 0;
  font: woff;
  color: #fdffff;
  font-size: 12px;

  cursor: url("images/cursors/arrow.cur"), pointer;
  /* cursor: url("images/cursors/Wait.png"), wait; */
}

.wrapper {
  box-sizing: border-box;
  min-height: 100%;

  display: flex;
  flex-direction: column;
}

.page-header,
.page-footer {
  background-color: #c3c3c3;
  color: #fff;
  padding: 3px;

  flex-grow: 0;
  flex-shrink: 0;
}

.page-body {
  padding: 20px;

  flex-grow: 1;
}

.page-body p {
  border: 1px solid grey;
}
  
  .pane {
  position: absolute;
  width: var(--pane-default-width);
  height: var(--pane-default-height);

  display: grid;
  grid-template-rows: var(--title-bar-height) 1fr;

  border-radius: var(--pane-border-radius);
  border: 3px solid #c3c3c3;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);

  overflow: clip;

  min-width: 160px;
  min-height: 160px;
}

.pane .title {
  cursor: move;

  display: flex;
  align-items: start;
  justify-content: start;

  background-color: var(--title-bar-color);
  color: var(--title-bar-text-color);
}

.pane h2 {
  font-size: 11px;
  font-weight: 200;
}

.pane .content {
  position: relative;
  background-color: var(--pane-content-background-color);
}

/* make image fill the space */
/* .pane .content img {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  max-width: 100%; 
  max-height: 100%; 

  object-fit: none;

  -webkit-user-drag: none;
  user-drag: none;
}

/* add a corner in bottom right */
.pane .corner {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;

  /* north west to south east */
  cursor: nwse-resize;

  /* background-color: red; */
}

.pane.is-dragging .title {
  background-color: var(--title-bar-highlight-color);
}