@font-face {
	font-family: "jersey25";
	src: url("../fonts/Jersey25-Regular.ttf");
}

@font-face {
	font-family: "poppins";
	src: url("../fonts/Poppins-Light.ttf");
	font-weight: 300;
}

@font-face {
	font-family: "poppins";
	src: url("../fonts/Poppins-ExtraLight.ttf");
	font-weight: 200;
}

* {
	margin: 0;
	padding: 0;
	font-family: "poppins";
	color: #3b1000;
}

body {
	background-color: #a69991;
}

/* --------------- Stripes / logo */
#logo-container {
	position: fixed;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	display: flex;
	align-items: baseline;
}
#logo-container h1 {
	font-family: "poppins";
	color: #3b1000;
	font-weight: 200;
	font-size: 5rem;
	z-index: 2;
}

#stripes {
	height: 3.5rem;
	width: 8rem;
	background: linear-gradient(
		to right,
		#c44b01 0 20%,
		#d77300 20% 40%,
		#eeb200 40% 60%,
		#045f7e 60% 80%,
		#023344 80% 100%
	);
	transform: skewX(-45deg);
	right: 0;
	padding-right: 3rem;
}

/* --------------- header */

nav {
	position: absolute;
	display: flex;
	align-items: center;
	margin: 1rem;
	z-index: 1;
}

nav ul {
	list-style: none;
	display: flex;
	flex-direction: column;
}

nav ul li {
	margin: 1rem;
	font-family: "poppins";
}

nav ul li a {
	text-decoration: none;
	color: #3b1000;
	font-weight: 300;
	font-size: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.icons {
	height: 3rem;
	width: 3rem;
}

/* --------------- window */

.win {
	width: 640px;
	height: 480px;
	background-color: #fff;
	border: 3px outset #c2c2c2;
	position: absolute;
	top: 10%;
	left: 10%;
	border-radius: 2px;
	z-index: 10;
	overflow: scroll;
}

#window-body {
	overflow: scroll;
	height: 100%;
	width: 100%;
}

.top-bar {
	width: 100%;
	height: 30px;
	border-bottom: 15px solid #c2c2c2;
	background-color: blue;
	cursor: grab;
}

.top-bar p {
	padding: 0.4em 1em;
	color: #fff;
}

.window-btn {
	font-family: poppins;
	font-weight: 300;
	height: 22px;
	width: 22px;
	background-color: #c2c2c2;
	border-bottom: 2px solid #3b1000;
	border-right: 2px solid #3b1000;
	border-radius: 2px;
	text-align: center;
	position: absolute;
	top: 3px;
}

.close {
	right: 5px;
	cursor: pointer;
}

.maximize {
	right: 32px;
	cursor: pointer;
}

.max-icon {
	margin: 0.3em auto;
	height: 7px;
	width: 10px;
	border: 2px solid #3b1000;
	border-top: 4px solid #3b1000;
}

.hidden {
	display: none;
}

.win:nth-child(1) {
	top: 40%;
	left: 40%;
}
.win:nth-child(2) {
	top: 20%;
	left: 20%;
}
.win:nth-child(3) {
	top: 30%;
	left: 30%;
}

/* --------------- content */

#page-container {
	position: relative;
	min-height: 100vh;
}

#content-wrapper {
	height: 100vh;
	width: 100%;
	position: relative;
}

.window-container {
	margin: 0 2rem;
	font-family: "poppins";
	color: #3b1000;
}

footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	width: 100%;
	bottom: 0;
	height: 3rem;
	background-color: #c2c2c2;
	display: flex;
	border-top: 3px solid #c2c2c2;
	border-style: ridge;
}

#taskbar-clock {
	position: absolute;
	right: 0;
	border: 2px inset #fff;
	padding: 5px 10px;
	margin-right: 1rem;
}

.page-title {
	margin-bottom: 2rem;
}

/* --------------- footer */

#go-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	height: 2.2rem;
	padding: 0 1rem;
	width: 3rem;
	border: 2px outset #c2c2c2;
	font-size: 1.2rem;
	cursor: pointer;
	border-radius: 2px;
	margin-left: 0.25rem;
}

.fa-angles-right {
	margin-left: 3px;
}

#go-menu {
	position: absolute;
	bottom: 2.5rem;
	left: 0rem;
	z-index: 10;
	border: 3px solid #c2c2c2;
	border-style: ridge;
	border-radius: 2px;
	height: 50%;
	width: fit-content;
	background-color: #c2c2c2;
}

#go-contents-wrapper {
	display: flex;
	flex-direction: row;
	height: 100%;
	width: 100%;
}

#strip {
	color: #c2c2c2;
	background-color: #787878;
	padding: 0.5rem;
	width: 2.2rem;
	display: flex;
	align-items: flex-end;
	justify-content: left;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

#strip p,
#strip b {
	color: #c2c2c2;
	font-size: 1.5rem;
}

#go-text-wrapper {
	height: 100%;
}

.go-highlight {
	display: block;
}

.go-highlight:hover {
	background-color: blue;
	color: #fff;
}

.go-highlight-active {
	background-color: blue;
	color: #fff;
}

#copyright-container {
	margin: 1rem;
}

#attributes {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px;
}

.fa-caret-right {
	position: absolute;
	right: 0;
	padding-right: 1rem;
}

#pop-up {
	position: absolute;
	z-index: 10;
	height: fit-content;
	width: 20rem;
	border: 3px solid #c2c2c2;
	border-style: ridge;
	border-radius: 2px;
	background-color: #c2c2c2;
	left: 100%;
	top: 0;
}

#pop-up a {
	padding: 20px;
}

/* --------------- media queries */

@media screen and (max-width: 768px) {
	nav {
		display: none;
	}

	footer {
		display: none;
	}
}

@media screen and (max-width: 425px) {
	#logo-container h1 {
		font-size: 2rem;
	}

	#stripes {
		height: 1.5rem;
		width: 1.5rem;
	}
}