:root{
	--header-ratio : 16/1;
	--title-ratio : 8/1;
	--header-font-size: 300%;
	--header-anim-time: 10s;
	--content-padding: 1% 3%;
	--show-desktop-windows: auto;
}
@media screen and (max-width: 1151px) {
	:root {
		--header-ratio: 8/1;
		--content-padding: 4% 1%;
		--header-font-size: 7cqw;
		--show-desktop-windows: none;
	}
}


.window {
	border: var(--border-width) outset hsl(0, 0%, 59%);
	/* height: fit-content; */
	max-width: 100%;

	overflow: hidden;
	background-color: black;
    background-size: contain;

	display: block;
	
	transform-style: preserve-3d;
	transform: translateZ(-1px);
}
.desktop-window {
	display: var(--show-desktop-windows);
}


.header-container {
	container-type: inline-size;

	display: flex;
	flex-direction: row;

	padding: 0.75%;
	box-sizing: border-box;
	background-image: linear-gradient(100deg, skyblue var(--bgc1), dodgerblue var(--bgc2), blue var(--bgc3), dodgerblue var(--bgc4),skyblue var(--bgc5));
	box-shadow: inset 0 0 0 var(--border-width) white;
	color: white;
	
	pointer-events: auto;
	animation: headerAnimation var(--header-anim-time) linear infinite;

	aspect-ratio: var(--header-ratio);
}


.website-header .header-container{
	aspect-ratio: var(--title-ratio);
}

.header-container .name {
	

	flex: 2;
	overflow:hidden;
	text-align: left;
	padding-left:1%;
	font-family: 'Times New Roman';
	font-size: var(--header-font-size);

	display: flex;
	flex-direction: column;
	justify-content: center;
}
.header-container img {
	height: 100%;
	width: auto;
	min-width: 0;
	flex: initial;
}
.header-container a{
	height: 100%;
	width: auto;
	min-width: 0;
	flex: initial;
}
@property --bgc1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 5%;
}
@property --bgc2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 10%;
}
@property --bgc3 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 20%;
}
@property --bgc4 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 30%;
}
@property --bgc5 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 60%;
}
@keyframes headerAnimation {
  0% {
	--bgc1: -100%;
	--bgc2: -70%;
	--bgc3: -50%;
	--bgc4: -30%;
	--bgc5: 0%;
  }
  100% {
	--bgc1: 100%;
	--bgc2: 130%;
	--bgc3: 150%;
	--bgc4: 200%;
	--bgc5: 220%;
  }
}

.content-container{
	pointer-events: none;
	position:relative;
	display: flex;
	flex-direction: row;
	box-sizing: border-box;
	border: var(--border-width) solid white;
	border-top: none;
	box-shadow: 
		inset calc(var(--border-width)/2) calc(var(--border-width)/2) 0 calc(var(--border-width)/2) darkgray,
		inset 0 0 0 var(--border-width) gainsboro;
	height: 100%;
	width: 100%;
	color: white;
	background-clip: border-box;
	background-size: cover;
}
.content-container .content{
	padding: var(--content-padding);

	flex-grow: 1;
	order: 1;
	z-index: -1;
	max-height: 100%;
}