/*
.app-window:target {
  width: 100%;
  height: 100%;
  visibility: visible;
  opacity: 1.0;
  box-sizing: border-box;
}
*/

.app-window {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  
  background-color: var(--widget-lined-background);  
  background-size: 10px 10px;
  /*
	background-image:
    linear-gradient(to right, var(--widget-lined-border), transparent 1px),
    linear-gradient(to bottom, var(--widget-lined-border), transparent 1px);
	*/
  /*margin: 5;*/
  
  position: absolute;
  /* Moves the position to the center of the parent */
  top: 50%;
  left: 50%;
  /* Changes the pivot to the center of self */
  transform: translate(-50%, -50%);
  z-index: 1;
  
  width: calc(100vw - 60px);
  height: calc(100vh - 60px);
  
	border-image: linear-gradient(#dfd1c5, #a0867b) 80;
	border-style: solid;
	border-width: 4px;
	
	border-top: none;
	border-radius: 5px;
	
	outline: 2px solid #52483f;
}

/* Popup overrides app-window behaviour */
.popup {
  transition: all ease 0.3s;
  visibility: hidden;
  width: 0;
  height: 0;
  opacity: 0.0;
}

.popup:target {
  width: calc(100vw - 60px);
  height: calc(100vh - 60px);
  visibility: visible;
  opacity: 1.0;
  box-sizing: border-box;
}

.app-titlebar {
 	display: flex;
 	align-items: center;
 	border-bottom: 10px solid #a0867b;
	background-color: #dfd1c5;
	line-height: 30px;
	color: #a0867b;
	font-weight: bold;
	text-align: center;
}

.app-titlebar > p {
	background-color: #dfd1c5;
	line-height: 30px;
	color: inherit;
	font-weight: bold;
	text-align: center;
	margin: 0;
	margin-left: 0.5em;
}

.app-titlebar-control {
	width: 30px;
	margin: 0px;
	text-decoration: none;
	color: inherit;
	border-right: 2px solid #a0867b;
}

.CONTROL_CLOSE {
	border-left: 2px solid #a0867b;
}

.CONTROL_MINIMIZE {
}

.CONTROL_MAXIMIZE {
}

.viewport {
	display: flex;
	justify-content: space-between;
	flex: 1;
	overflow-y: scroll;
	margin: 0;
	box-sizing: border-box;
	/*border: 50px solid grey;*/
	border-image: linear-gradient(#2c2621, #52483f) 80;
	border-style: solid;
	border-width: 4px;
}

#ARTICLE_TEXT > h1,
#ARTICLE_TEXT > h2,
#ARTICLE_TEXT > h3,
#ARTICLE_TEXT > h4,
#ARTICLE_TEXT > p,
#ARTICLE_TEXT > ul {
  margin-left: 20px;  
}