/* 

This is styles.css, home to all of the themes and colors and fun positioning for the website!
If you decide to make changes to this file, you will want to update the version numbers of Every html file so that the old styling isn't cached!

(Ctrl+F for "Commissions Backgrounds" to add new ones)

*/

:root {
	--text: #1c3670;
	--background: #cccbca;

	--page-background-image: url('./assets/space_wallpaper_blue.png');
	--main-window-background-image: url('./assets/space_wallpaper_gold.png');

	--border: #e7462c;
	--link: #e7462c;
	/*
    BLUE TITLE BORDER    
    --title-bar-gradient-start: #1c3670;
	--title-bar-gradient-end: #7ae4f4;*/
	--title-bar-gradient-start: #e7462c;
	--title-bar-gradient-end: #fcb45a;
}

@font-face {
	font-family: 'UbuntuMono';
	src: url('./fonts/UbuntuMono-Regular.ttf');
}

* {
	box-sizing: border-box;
}

/* Page Structure */

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	color: var(--text);
	background-color: var(--background);

	font-family: 'UbuntuMono', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
}

.window-body {
	font-size: 1rem;
}

.window-body h1 {
	font-size: 3rem;
}

.window-body h2 {
	font-size: 2.5rem;
}

.window-body h3 {
	font-size: 1.75rem;
}

a {
	color: var(--link);
}

ul, ol {
	margin: 0;
	padding: 0;
}

ul li {
	list-style: inside square;
}

ol li {
	list-style-position: inside;
}

.flex-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

#background {
	position: fixed;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-color: #aaaaaa;
	background-image: var(--page-background-image);
}

#content {
	display: flex;
	flex-direction: column;
	position: relative;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 100%;
}

/* Window Setup */

#content .window {
	position: absolute;
}

.window .window-body {
	position: relative;
	margin: 0;

	font-family: 'UbuntuMono', sans-serif;
	color: var(--text);
}

.window .title-bar {
	font-size: 0.8rem;
	background: linear-gradient(90deg, var(--title-bar-gradient-start), var(--title-bar-gradient-end));
}

.window .title-bar-text {
	margin-right: 10px;
	word-wrap: wrap;
}

/* Main Background */
#main-background .window-body {
	width: 1920px;
	height: 1080px;
}

.window-background {
	position: relative;
	width: 100%;
	height: 100%;
	background-image: var(--main-window-background-image);
	background-size: 100% 100%;
}

/* Main Window */
#main {
	margin-left: 100px;
	display: flex;
	flex-direction: column;
}

#main .window-body {
	position: relative;
	display: grid;
	grid-template-rows: max-content 1fr;
	padding: 10px;
	min-height: 0;
	gap: 10px;
	width: 1400px;
	height: 1000px;
}

#main-image {
	z-index: 1;
	position: absolute;
	bottom: -145px;
	right: -250px;
	pointer-events: none;
	height: 400px;
}

header {
	position: relative;
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
}

header img {
	width: 100%;
}

.desktop-banner {
	display: block;
}

.mobile-banner {
	display: none;
}

.two-column {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	gap: 8px;
	min-height: 0;
}

.left-side {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 380px;
	flex-shrink: 0;
	gap: 5px;
}

.fun-stuff {
	display: flex;
	flex-direction: column;
	gap: 5px;
	overflow: auto;
	padding-right: 5px;
}

.links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px;
	font-size: 1.75rem;
	border-radius: 5px;
	border: 2px solid var(--border);
}

.buttons {
	height: min-content;
	position: relative;
}

.buttons img {
	width: 88px;
	height: 31px;
}

.about-me {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 20px;
	font-size: 1.5rem;
	border-radius: 5px;
	border: 2px solid var(--border);
	overflow: auto;
}

.about-me p {
	padding: 0;
	margin: 20px 0;
	text-wrap: wrap;
	word-wrap: anywhere;
}

.splash-image {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 100%;
}

.splash-image img {
	max-width: 60%;
}

/* Gallery Page */

#gallery {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 5px;
	height: min-content;
	overflow: auto;
	min-height: 0;
	height: 100%;
}

#gallery img {
	max-height: 250px;
}

#gallery img:hover {
	z-index: 1;
	transform: scale(1.1, 1.1);
}

#gallery-click-image {
	position: fixed;

	display: none;
	cursor: pointer;

	object-fit: contain;
	width: 100%;
	height: 100%;
	padding: 10px;
	z-index: 3;
	backdrop-filter: blur(10px);

}

/* Commissions Page */

#commission-type-list {
	display: grid;
	grid-auto-rows: auto;
	grid-template-columns: 1fr 1fr;
	overflow: auto;
	gap: 10px;
	height: 100%;
}

.commission-type {
	padding: 10px;
	font-size: 1.1rem;
	background: transparent;
	
	border-radius: 5px;
	width: 100%;
}

.commission-column {
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	width: min-content;
	background-color: rgb(192, 192, 192);
	border-radius: 5px;
	overflow: hidden;
}

.commission-text {
	padding: 5px;
}

.commission-type img {
	display: block;
	max-width: 350px;
	max-height: 350px;
}

/* Commissions Backgrounds */

/* Example

I suggest checking https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient for making your own gradients

.comm-yournameofchoicehere {
	background: linear-gradient(to right bottom, #ffffff, #000000);
}
*/

.comm-blue {
	background: linear-gradient(to right bottom, #5fc3e6, #2b61a3, #5fc3e6);
}

.comm-orange {
	background: linear-gradient(to right bottom, #e7462c, #fcb45a, #e7462c);
}

/* Subpages Window */

#subpages {
	margin-left: 1900px;
	margin-bottom: 500px;	
}

nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	padding: 10px;
	gap: 15px;
}

nav ul {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: center;
	gap: 10px;
}

nav li {
	list-style: none;
	font-size: 2rem;
	border: none;
	padding: 0;
	width: 256px;
	display: flex;
	align-items: center;
	justify-content: center;
}

nav li a { 
	width: 100%;
	border: none;
}

nav li a img {
	display: block;
}

/* Album Art Window */

#album-art {
	margin-right: 1850px;
	margin-bottom: 700px;
}

#album-art img {
	display: block;
	max-width: 300px;
	max-height: 300px;
	object-fit: contain;
}

/* Music Player Window */

#music-player {
	margin-right: 1700px;
	margin-bottom: 170px;
}

#music-player .window-body {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	width: 250px;
	height: 130px;
	text-align: center;
}

#player-controls {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
	gap: 5px;
}

.label-row {
	display: flex;
	flex-direction: row;
	gap: 5px;
	max-width: 100%;
}

#music-player input {
	width: unset;
	min-width: 0;
}

#play-button, #pause-button, #stop-button {
	background-repeat: no-repeat;
	background-size: 15%;
	background-position: center center;
}

#play-button {
	background-image: url('./assets/audioplayer/play.png');
}

#play-button:active {
	background-image: url('./assets/audioplayer/playpressed.png');
}

#pause-button {
	background-image: url('./assets/audioplayer/pause.png');
}

#pause-button:active {
	background-image: url('./assets/audioplayer/pausepressed.png');	
}

#stop-button {
	background-image: url('./assets/audioplayer/stop.png');
}

#stop-button:active {
	background-image: url('./assets/audioplayer/stoppressed.png');
}

/* Gallery Art Window */

#gallery-art {
	margin-top: 500px;
	margin-right: 1800px;
}

#gallery-art img {
	display: block;
	max-width: 350px;
	max-height: 350px;
	object-fit: contain;
}

/* Commissions ToS Window */
#comms-tos {
	margin-right: 1800px;
	margin-bottom: -50px;
}

#comms-tos .window-body {
	font-size: 1.25rem;
	width: 450px;
	height: 1000px;
	overflow: auto;
	padding: 8px;
}

#comms-tos p {
	margin: 15px 0;
}

#comms-tos ul, #comms-tos ol {
	margin: 15px 0;
}

#comms-tos ul li, #comms-tos ol li {
	margin: 10px 0;
}

#comms-tos h1 {
	font-size: 2rem;
}

#comms-tos h2 {
	font-size: 1.5rem;
}

#comms-tos h3 {
	font-size: 1.3rem;
}

/* Credits Window */

#credits {
	margin-left: 1850px;
	margin-top: 300px;
}

#credits .window-body {
	padding: 10px;
	width: 275px;
	font-size: 1rem;
}

#credits .window-body > div {
	display: flex;
	align-items: center;
	gap: 5px;
}

/* Misc */

.full-space-image {
	position: relative;
	width: 100%;
	height: 100%;
}

.overscroll > :last-child {
	margin-bottom: 25%;
}

.overscroll-comms > :last-child, .overscroll-comms > :nth-child(odd):nth-last-child(2) {
	margin-bottom: 25%;
} 

/* Scaled Down Regular Layout */
@media (max-width: 2200px) {
	.window-body {
		font-size: 0.8rem;
	}

	.window-body h1 {
		font-size: 2rem;
	}

	.window-body h2 {
		font-size: 1.75rem;
	}

	.window-body h3 {
		font-size: 1.5rem;
	}

	/* Main Background Window */
	#main-background .window-body {
		width: 1280px;
		height: 720px;
	}

	/* Main Window */
	
	#main {
		margin-top: 20px;
		margin-left: 25px;
	}

	#main .window-body {
		padding: 8px;
		width: 1000px;
		height: 650px;
	}
	
	#main-image {
		height: 225px;
		bottom: -75px;
		right: -140px;
	}

	.left-side {
		width: 275px;
		overflow: auto;
	}

	.about-me {
		font-size: 1.1rem;
		padding: 10px;
	}

	.about-me p {
		margin: 10px 0;
	}

	.links {
		font-size: 1rem;
	}

	/* Gallery Page */

	#gallery img {
		max-height: 175px;
	}

	/* Commissions Page */

	#commission-type-list {
		gap: 8px;
	}

	.commission-type {
		padding: 8px;
		font-size: 1rem;
	}

	.commission-type img {
		max-width: 275px;
		max-height: 275px;
	}

	/* Subpages Window */
	#subpages {
		margin-left: 1350px;
		margin-bottom: 300px;
	}

	nav {
		gap: 10px;
	}

	nav ul {
		gap: 10px;
	}

	nav li {
		font-size: 1.25rem;
	}

	/* Album Art Window */
	#album-art {
		margin-right: 1300px;
		margin-bottom: 415px;
	}

	/* Music Player Window */
	#music-player {
		margin-right: 1260px;
		margin-bottom: -22px;
	}
	
	#music-player .window-body {
		width: 250px;
		height: 115px;
	}

	#player-controls {
		flex-wrap: wrap;
	}

	/* Gallery Art Window */
	#gallery-art {
		margin-top: 460px;
		margin-right: 1300px;
	}
	
	#album-art img, #gallery-art img {
		max-width: 250px;
		max-height: 250px;
	}

	/* Commissions ToS Window */
	#comms-tos {
		margin-right: 1310px;
		margin-bottom: 0px;
	}

	#comms-tos .window-body {
		width: 300px;
		height: 650px;
		overflow: auto;
		padding: 5px;
		font-size: 1rem;
	}

	#comms-tos p {
		margin: 10px 0;
	}

	#comms-tos ul, #comms-tos ol {
		margin: 10px 0;
	}

	#comms-tos h1 {
		font-size: 1.5rem;
	}

	#comms-tos h2 {
		font-size: 1.3rem;
	}

	#comms-tos h3 {
		font-size: 1.1rem;
	}

	/* Credits Window */
	
	#credits {
		margin-left: 1350px;
		margin-top: 250px;
	}
	
	#credits .window-body {
		padding: 7px;
		width: 250px;
	}	
}

/* Lesser Scaled Down Regular Layout */
@media (max-width: 1650px) {
	.window-body h2 {
		font-size: 1.1rem;
	}

	.window-body h1 {
		font-size: 1.3rem;
	}

	.window-body h2 {
		font-size: 1.1rem;
	}

	.window-body h3 {
		font-size: 1rem;
	}

	/* Main Background Window */

	#main-background .window-body {
		width: 896px;
		height: 504px;
	}

	/* Main Window */

	#main {
		margin-top: 20px;
		margin-left: 25px;
	}

	#main .window-body {
		padding: 8px;
		gap: 5px;
		width: 700px;
		height: 470px;
	}

	#main-image {
		height: 175px;
		bottom: -60px;
		right: -105px;
	}

	.left-side {
		width: 200px;
	}

	.about-me {
		font-size: 0.8rem;
		padding: 10px;
	}

	.about-me p {
		margin: 7px 0;
	}

	.links {
		font-size: 0.8rem;
	}

	/* Gallery Page */

	#gallery img {
		max-height: 125px;
	}

	/* Commissions Page */

	#commission-type-list {
		gap: 5px;
	}

	.commission-type {
		padding: 5px;
		font-size: 0.8rem;
	}

	.commission-type img {
		max-width: 200px;
		max-height: 200px;
	}

	
	/* Subpages Window */

	#subpages {
		margin-left: 925px;
		margin-bottom: 225px;
	}

	nav {
		padding: 7px;
	}

	nav ul {
		gap: 7px;
	}

	nav li {
		font-size: 1rem;
		width: 125px;
		padding: 0;
	}

	nav li img {
		max-width: 100%;
	}

	/* Album Art Window */

	#album-art {
		margin-right: 900px;
		margin-bottom: 300px;
	}

	#album-art img, #gallery-art img {
		max-width: 150px;
		max-height: 150px;
	}

	/* Music Player Window */

	#music-player {
		margin-right: 885px;
		margin-bottom: -15px;
	}
	
	#music-player .window-body {
		width: 190px;
		height: 90px;
		font-size: 0.7rem;
	}

	#player-controls {
		flex-wrap: wrap;
	}

	#player-controls button {
		min-width: 50px;
	}

	/* Gallery Art Window */

	#gallery-art {
		margin-top: 330px;
		margin-right: 900px;
	}

	/* Commissions ToS Window */
	#comms-tos {
		margin-right: 890px;
		margin-bottom: -20px;
	}

	#comms-tos .window-body {
		width: 190px;
		height: 450px;
		overflow: auto;
		padding: 5px;
		font-size: 0.8rem;
	}

	#comms-tos p {
		margin: 5px 0;
	}

	#comms-tos ul, #comms-tos ol {
		margin: 5px 0;
	}

	#comms-tos h1 {
		font-size: 1.25rem;
	}

	#comms-tos h2 {
		font-size: 1rem;
	}

	#comms-tos h3 {
		font-size: 0.9rem;
	}
	
	/* Credits Window */
	
	#credits {
		margin-left: 925px;
		margin-top: 165px;
	}
	
	#credits .window-body {
		padding: 7px;
		width: 145px;
		font-size: 0.6rem;
	}
}

/* 1 Column Layout */
@media (max-width: 1100px) {
	.window-body h2 {
		font-size: 1.5rem;
	}

	#content {
		gap: 10px;
		padding: 10px;
		flex-direction: column;
		flex-wrap: nowrap;
	}

	#content .window {
		position: relative;
		margin: 0;
		max-width: 100%;
		height: unset;
	}

	#content > .window:last-of-type {
		margin-bottom: 200px;
	}

	#content .window .window-body {
		max-width: 100%;
	}

	/* Main Background Window */

	#main-background {
		display: none;
	}

	/* Main Window */

	#main {
		width: 100%;
	}

	#main .window-body {
		width: unset;
		padding: 5px;
		height: unset;
	}

	#main-image {
		position: fixed;
		bottom: 0px;
		right: 0px;
	}

	.desktop-banner {
		display: none;
	}
	
	.mobile-banner {
		display: block;
	}

	.two-column {
		flex-direction: column-reverse;
	}

	.links {
		font-size: 1rem;
	}

	.about-me {
		font-size: 1rem;
		padding: 10px;
	}

	.left-side {
		width: unset;
	}

	/* Gallery Page */

	#gallery {
		max-height: 700px;
	}

	#gallery img {
		max-height: 200px;
	}

	#gallery-click-image {
		top: 0;
	}

	/* Commissions Page */

	#commission-type-list {
		max-height: 700px;
	}

	/* Subpages Window */

	#subpages {
		order: -1;
	}

	nav ul {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 5px;
	}

	nav li {
		font-size: 1.5rem;
	}


	/* Album Art Window */

	/* Music Player Window */

	/* Gallery Art Window */

	/* Commission ToS Window */
	#comms-tos .window-body {
		width: 100%;
		height: unset;
		padding: 5px;
		font-size: 0.8rem;
	}

	/* Credits Window */

	.overscroll > :last-child {
		margin-bottom: unset;
	}

	.overscroll-comms > :last-child, .overscroll-comms > :nth-child(odd):nth-last-child(2) {
		margin-bottom: unset;
	}
}

@media (max-width: 600px) {
	/* Main Window */
	#gallery {
		flex-direction: column;
		align-items: center;
		flex-wrap: nowrap;
	}

	#gallery img {
		max-height: 200px;
		max-width: 100%;
	}

	#commission-type-list {
		grid-template-columns: 1fr;
	}
}