@font-face {
    font-family: 'PT Mono', monospace;
}

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: rgb(0, 102, 204);
}

.draggable {
  cursor: pointer;
}

.fade {
    transition: opacity .5s linear;
}

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#container {
  	display: flex;
  	align-items: center;
	justify-content: center;
    position:absolute;
    top:0;
    left:0;
	width:101%;
	height:100%;
	background-image: url("California-Poppies.jpg");
	background-repeat: no-repeat;
  	background-position: center top;
}

.outerWindow{
	position: absolute;
    max-width: 100%;
    max-height: 95%;	
    background-color: white;
    border-style: double;
	border-width: 3px;
	border-color: rgb(242, 134, 19);
}

.innerWindow{
	overflow: auto;
	font-size: 12px;
	opacity: 1.0;
  	background-color: white;
	word-break: break-word; 
}

.dragHandle{
	border-style: double;
	border-width: 3px;
	border-left: none;
	border-top: none;
	border-right: none;
	border-color: rgb(242, 134, 19);
	padding: 0px;
    left: 0px; 
    top: 0px;
    margin: 0px;
    width: 100%;
    height: 15px;
    cursor: move;
}

.topbarButtons{
    z-index: 20000;
    position: absolute;
	right: 0px; 
    top: 0px;
  	display: flex;
  	align-items: right;
	justify-content: right;
}

.topbarButtons button{
    border: solid;
	border-width: 1px;
	background: white;
	border-color: rgb(242, 134, 19);
}

.staticWindow{
	overflow: auto;
	font-size: 12px;
	opacity: 1.0;
  	background-color: white;
	word-break: break-word; 
	border-style: double;
	border-width: 3px;
	border-color: rgb(242, 134, 19);
}

.utilWindow{
	overflow: hidden;
	opacity: 1.0;
	object-fit: contain;

}

#minimizedWindow{

}

#toolbar{
  	align-items: center;
    position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 40px;
	margin: 0px;
	background-color: white;
	border-style: solid;
	border-width: 1px;
	border-color: rgb(51, 153, 255);
	z-index: 100000000000;
	display: none;
}

#toolbarStart{
    position: absolute;
	left: 10px;

}

#toolbarMiddle{
    position: absolute;
	left: 20%;
	display: flex;
  	align-items: center;
  	gap: 10px;
}

#toolbarEnd{
    position: absolute;
	right: 10px;
	display: flex;
  	align-items: center;
  	gap: 10px;
}

#settings{
	justify-self: start;
}

#clock{
	justify-self: end;
}

#OSStart {
	padding: 2%;
	border-style: solid;
	border-width: 1px;
	border-color: rgb(51, 153, 255);
}

#OSStart img {
	width: 70%;
}

#outerStartProgressBar {
	border-style: solid;
	border-width: 1px;
	border-color: rgb(51, 153, 255);
}

#innerStartProgressBar {
	background: orange;
	word-break: normal; 
}