body{
	background: url("websitebackgroundrender.jpg");
	background-position: center;
	background-attachment: fixed;
	margin: 0px;
	display: flex;
	flex-direction: column;
	height: 100vh;
	width: 100vw;
}

.window{
	position:absolute;
	color:black;
	border:2px solid black;
	border-radius:10px;
	box-shadow:-5px 5px 20px black;
	overflow:hidden;
	backdrop-filter: blur(7px);
	background: #ffffff9c;
}

.window .content{
	height:500px;
	width:500px;
	resize:both;
	overflow:hidden;
	background:white;
}

.window .button{
	height:20px;
	aspect-ratio:1;
	border-radius:20px;
	display: inline-block;
	cursor: pointer;
	margin: 5px;
}

.window .titletext{
	flex-grow:1;
	padding: 10px;
	font-size: 1.2em;
	font-weight: bold;
	
}

.window .topbar{
	display:flex;
	align-items: center;
}

.window.maximised .content{
	height:100% !important;
	width:100% !important;
}

.window.maximised{
	height: calc(100vh - 10px) !important;
	width: calc(100vw - 10px) !important;
	left: 5px !important;
	top: 5px !important;
	box-sizing: border-box;
}

.loading{
	background: url("loading animation.gif");
	background-position: center;
	background-repeat: no-repeat;
}

footer {
  width: 100%;
  text-align: center;
  padding: 10px;
  background: linear-gradient(0deg,rgb(55, 55, 55) 0%, rgb(111, 111, 111) 100%);
  box-sizing: border-box;
  border-top: 2px solid black;
  color: white;
}

#desktop{
	flex-grow:1;
	display: flex;
	gap: 50px;
	flex-wrap: wrap;
	position: relative;
	align-content: start;
	padding: 30px;
}

.desktopicon{
	color: white;
	text-shadow: 1px 1px 3px black, 1px 1px 3px black,1px 1px 3px black;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	align-items: center;
	max-width: 100px;
	text-align: center;
}

.desktopicon img{
	max-height: 64px;
	max-width: 64px;
}


div.dragging iframe{
	pointer-events: none;
}

div.dragging{
	user-select: none;
}


.grabbable{
	cursor: grab;
}

div.dragging .grabbable{
	cursor: grabbing;
}

#mouseToolTip{
	display:none;
	transition:none;
	background:none;
	backdrop-filter:blur(5px);
}

#mouseToolTip.visible{
	display:block;
}



#quote{
	position: absolute;
	bottom: 10px;
	right: 10px;
	display:flex;
}

#quote p{
	background:white;
	border:2px solid black;
	border-radius:10px;
	padding:5px;
	margin-right:10px;
	max-width:200px
}

#quote img{
	max-height:120px;
}