/* deathshadow reset */

/*, *:before, *:after {
	box-shadow: inset 0 0 0 1px rgba(255,0,0,.1);
}*/

html,body,div,p,h1,h2,h3,h4,h5,h6,
ul,ol,li,dl,dt,dd,form,fieldset,caption,
table,tr,td,th,address,blockquote,img {
	margin:0;
	padding:0;
}

img, fieldset, object {
	border:none;
}

*, *:after, *:before {
	flex:1 0 auto; /* safari bugfix */
	box-sizing:border-box;
}

button, label {
	cursor:pointer;
	flex: 0;
}

html, body {
	height:100%;
}

hr {
	display:none;
}

body {
	line-height: 1.5;
}

button, input, table, textarea, select {
	font: inherit;
}

code, raw {
	font-size: 1em;
}

select, img {
	max-width: 100%;
}

/* fonts */
@font-face {
	font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('pfd_b.woff2') format('woff2');
}

@font-face {
	font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('pfd_bi.woff2') format('woff2');
}

/* styles */

section {
	padding: 4rem 2rem;
	background-color: #f4f4f4;
	color: #222;
	font-family: 'segoe ui', arial, sans-serif;
}

section h2 {
	text-align: center;
	margin-bottom: 1rem;
	font-size: 1.8em;
}

section p, section ul {
	max-width: 64em;
	margin: auto;
}

section p {
	text-align: center;
	margin-bottom: 1em;
}

ul {
	margin-left: 1em;
}

#news-article {
	padding: 4rem 2rem 12rem 2rem;
	font-size: 1.4em;
	font-family: arial, sans-serif;
	background-color: #fda;
	background-image: linear-gradient(
		to bottom,
		transparent 90%,
		#a1c4da 100%
	);
	color: #111;
	min-height: 100vh;
}

#news-article > div {
	margin: auto;
	max-width: 45em;
}

#news-article h1 {
	font-family: 'playfair display', 'times new roman', serif;
	margin-bottom: .8rem;
}

#news-article p {
	margin-bottom: 1em;
	text-align: left;
}

#news-article a {
	color: #555;
}

#news-article p:first-of-type {
	font-weight: bold;
	font-size: .8em;
	margin-bottom: 2rem;
}

#win11-logo {
	margin: auto;
	display: inline-block;
	font-size: 2.6em;
	background-color: rgba(0,0,0, .2);
	backdrop-filter: blur(8px);
	padding: .5em 1em;
	border-radius: 8px;
	box-shadow:
		inset 0 0 0 1px rgba(0,0,0,.1),
		0 2px 11px rgba(0,0,0,.3);
}

#news-article img {
	width: 100%;
	height: 15em;
	object-fit: cover;
	margin-bottom: 1em;
	border-radius: 0;
	box-shadow:
		10px 10px 0
		#888;
}

#win11-logo span {
	vertical-align: text-bottom;
	font-weight: 500;
	text-shadow: none;
}

#win11-logo:before {
	content: '';
	height: 1em;
	width: 1em;
	background-image: url('w11_symbol.svg');
	background-size: 100% 100%;
	display: inline-block;
}

#win11-intro {
	text-align: center;
	background-image: url('w11hero-lite.png');
	background-size: cover;
	padding: 8rem 2rem;
	color: #fff;
}

#win11-intro p, #win11-intro div + div {
	background-color: rgba(0,0,0,.6);
	max-width: 64rem;
	margin: auto;
	padding: 1rem;
	border-radius: 5px;
	margin-bottom: 1rem;
}

#win11-sike > *{
	margin: 4rem 0;
}

#win11-sike > div:last-of-type {
	font-weight: 500;
	font-size: 2em;
}

#desktop-view {
	background-image: url('w11hero-lite.png');
	background-size: cover;
	background-position: bottom;
	height: 10em;
	position: relative;
	overflow: hidden;
	max-width: 80em;
	margin: auto;
}

#desktop-view, section img {
	box-shadow:
		inset 0 0 0 1px rgba(0,0,0,.1),
		0 2px 5px rgba(0,0,0,.3);
	border-radius: 10px;
}
.faux-taskbar {
	height: 4em;
	width: 100%;
	background-color: rgba(244,244,244,.8);
	position: absolute;
	backdrop-filter: blur(26px);
	bottom: 0;
}

._notif-and-time {
	background-image: url('w11_task.png');
	background-size: 100% 100%;
	height: 4em;
	width: 14.625em;
	display: inline-block;
	position: absolute;
	right: 0;
}

@media screen and (max-width: 48em) {
	._notif-and-time { display: none; }
}

._centered-icons {
	display: flex;
	height: 4em;
	width: 5em;
	position: absolute;
	left: 50%;
	transform: translateX(-0%);
	justify-content: space-around;
	transition: all .5s;
}

.-windows-icon {
	background-image: url('icon_start.png');
	position: absolute;
	left: 50%;
	transform: translateX(-120%);
	transition: all .5s;
}

.-app-icon:nth-of-type(1) {
	background-image: url('icon_explorer.png');
}

.-app-icon:nth-of-type(2) {
	background-image: url('icon_edge.png');
}

.faux-taskbar:hover .-windows-icon {
	transform: translateX(0);
	left: 1em;
}

.faux-taskbar:hover ._centered-icons {
	transform: translateX(-50%);
	left: 50%;
	width: 8em;
}

._icon {
	background-repeat: no-repeat;
	background-position: center;
	height: 4em;
	width: 3em;
	display: inline-block;
}

#funny-text span {
	display: inline-block;
	opacity: 0;
	overflow: hidden;
	max-width: 0;
	white-space: nowrap;
	vertical-align: bottom;
	transition: max-width .3s;
}

#funny-text:hover span {
	opacity: 1;
	transition: opacity .2s, max-width .3s;
	max-width: 3em;
}

.two-column > div, .two-column-reverse > div {
	display: flex;
	max-width: 72em;
	margin: auto;
	flex-direction: row;
}

.two-column-reverse > div {
	flex-direction: row-reverse;
}

.two-column *, .two-column-reverse * {
	text-align: left;
}

.two-column-reverse > div div, .two-column > div div {
	padding: 1em;
    align-self: center;
}

._half-size-column {
	width: 50%;
}

._startmenus {
	position: relative;
	width: 50%;
	height: 32em;
	overflow: hidden;
}

._startmenus img{
	position: absolute;
	top: 0;
	right: 0;
}

._startmenus img:nth-of-type(2){
	right: 4em;
	top: 4em;
}

._startmenus img:nth-of-type(1){
	z-index: 2;
}

#updates {
	background: #000;
	color: #fff;
	font-weight: 500;
	padding: 2rem;
	height: 100vh;
	position: relative;
}

#updates img {
	width: 12em;
	margin: auto;
	display: block;
}

#updates > div {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

._image-list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3em;
	max-width: 72em;
	margin: auto;
}

._image-list img {
	flex-grow: 0;
	width: 30%;
	min-width: 16em;
}

#online img {
	width: 50%;
}

._next-arrow {
	background-image: url('arrow.svg');
	background-size: 100% 100%;
	width: 8em;
	height: 8em;
	max-width: 8em;
	display: block;
	transition: .5s transform;
}

.one-column > div{
	max-width: 72em;
	margin: auto;
}

	
section a {
	color: #15f;
}

@media screen and (max-width: 64em) {
	br {
		content: "";
		display: block;
		margin-bottom: .5em;
	}
	
	.two-column > div, .two-column-reverse > div {
		flex-direction: column;
	}
	
	.two-column *, .two-column-reverse * {
		text-align: center;
	}
	
	._startmenus, ._half-size-column {
		width: 100%;
	}
	
	._image-list {
		flex-direction: column;
	}
	
	._next-arrow {
		transform: rotate(90deg);
	}
}
@media screen and (prefers-color-scheme: dark) {
	#desktop-view, #win11-intro {
		background-image: url('w11hero.png');
	}

	.faux-taskbar {
		background-color: rgba(22,22,22,.8);
	}

	._notif-and-time, ._next-arrow {
		filter: invert(1);
	}
	
	section {
		background-color: #222;
		color: #fff;
	}
	
	
	#news-article {
		background-image: linear-gradient(
			to bottom,
			transparent 90%,
			rgb(11, 30, 63) 100%
		);
	}
	
	._startmenus img:nth-of-type(1){
		z-index: 0;
	}
	
	section a {
		color: #acf;
	}
}