/* Window Engine - MIT License - Copyright (c) 2019 Gauthier Staehler */
@import "compass/css3";

.window {
  display: none;
	position: absolute;
	top: 0px;
	right:300px;
  z-index: 9999;
	background-color: #000000;
	/*width: 800px;
	height: 400px;*/
	/*width: 100%;
	height: 100%;*
/*	border-radius: 8px 8px 0 0;*/
 border-style: ridge;
  border-width: 7px;
  border-color: #EC7FFD;
	box-shadow: 8px 8px 6px -6px black;
	/* opacity was 0.9 */
	overflow: hidden;
	opacity:2;
}


[id$="header"] {
	padding: 0px;
	z-index: 101;
	background-color: black;
/*	color: #fff;*/
	border-style: none none ridge none;
	border-width: 7px;
	border-color: #EC7FFD;
	/*border-radius: 4px 4px 0 0;*/
	height: 40px;
	justify-content: space-between;
	display: flex;
	touch-action: none;
}

.windowActive {
	z-index: 9999;
}

.windowTitle {
	position: relative;
/*	bottom: 2px;*/
	top: -13px;
	left: 20px;


}

.mainWindow {
	padding: 20px;
}

[id^="closeButton"] {
	color: white;
	cursor: pointer;
	position: relative;
	bottom: 15px;
right: 10px;
	font-size: 40px;
}

@font-face {
font-family: "NeueBit-Bold";
/*src: url("/font/NeueBit-Bold.eot");
src: url("/font/NeueBit-Bold.woff") format("woff"),
url("/font/NeueBit-Bold.otf") format("opentype"),
url("/font/NeueBit-Bold.svg#filename") format("svg");*/
  src: url('/font/NeueBit-Bold.eot'); /* IE9 Compat Modes */
  src: url('/font/NeueBit-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/font/NeueBit-Bold.woff2') format('woff2'), /* Super Modern Browsers */
       url('/font/NeueBit-Bold.woff') format('woff'), /* Pretty Modern Browsers */
       url('/font/NeueBit-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('/font/NeueBit-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
}
/*	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";*/

@font-face {
font-family: "NeueBit-Regular";
/*src: url("/font/NeueBit-Bold.eot");
src: url("/font/NeueBit-Bold.woff") format("woff"),
url("/font/NeueBit-Bold.otf") format("opentype"),
url("/font/NeueBit-Bold.svg#filename") format("svg");*/
  src: url('/font/NeueBit-Regular.eot'); /* IE9 Compat Modes */
  src: url('/font/NeueBit-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/font/NeueBit-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/font/NeueBit-Regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('/font/NeueBit-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('/font/NeueBit-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}
/*	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";*/


.windowGroup {
	justify-content: center;
	display: flex;
		line-height: 1.5;
	 color: white;
	 font-family: "NeueBit-Regular";
	 font-size: 40px;
	  top: -20px;
  left: 5px;
   text-shadow: 2px 2px black;

}

.purple {
   /* background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);*/
    background: linear-gradient(45deg, rgba(49,6,231,1) 0%, rgba(238,114,247,1) 35%, rgba(255,183,4,1) 62%, rgba(250,74,17,1) 100%);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.orange {
	background-color: burlywood;
}

.brown {
	background-color: brown;
}

.cyan {
	background-color: darkcyan;
}

.crimson {
	background-color: crimson;
}

.green {
	background-color: darkgreen;
}

.small {
	width: 600px;
	height: 300px;
}

.large {
	width: 1000px;
	height: 700px;

}

*,
*::before,
*::after {
	box-sizing: border-box;
}

.windowGroup p {
	cursor: default;
	margin-top: 0;
	margin-bottom: 1rem;
}

@media only screen and (min-width: 81px) {
.windowActive, .window {
    left: 10%;
    top: 10%;
    @include transform(translate(-50%, -50%));
    width: 80%;
    height: 80%;

  }
}