@charset "utf-8";
/* CSS Document */

html {
   background-color: black;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  position: relative;
}

/* Fixed background layer */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("Commissions Background.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: -1; /* keeps it behind all content */
  transform: translateZ(0); /* improves smoothness */
}


h1 {
	color: white;
	font-family: "Just Me Again Down Here", serif;
	font-weight: 250;
	font-size: calc(9vw + 15pt);
	text-align: center;
	margin-bottom: 30vh;
	margin-top: 30vh;
}

.header-links {
	color: white;
	text-decoration: none;
	font-family: "Schoolbell";
	border: solid white 2pt;
	padding: 3pt;
	margin-left: 1pt;
	margin-right: 1pt;
	font-size: calc(1.1vh + 5pt);
	cursor: pointer;
}

.header-links:hover {
	background-color: rgba(113,31,139,1.00);
}

img {
	
}

p {
	line-height: 1.6;
	font-weight: 300;
}

iframe {
	margin: auto;
}

.video-container {
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
  margin-bottom: 0;
}

.youtube-video {
	border-radius: 5pt;
	max-width: 90vw;
	max-height: 95vh;
	flex-shrink: 1;
  margin-bottom: -20pt;
}

.youtube-video:hover {
	transform: scale(1.05);
	transition: 250ms ease-in-out;
}

.artwork {
	margin: auto;
	display: block;
	max-width: 90vw;
	max-height: 90vh;
	border: solid white 5pt;
	border-radius: 8pt;
	margin-bottom: 60pt;
}

.artwork:hover {
	transform: scale(1.05);
	transition: 250ms ease-in-out;
}

.link-container {
  text-align: center; /* centers inline content horizontally */
}

.link-container a {
  display: inline-block; /* keeps them side by side but allows spacing and padding */
  margin: 1px;
  text-decoration: none;
  color: white;
}

.text-container {
	width: calc(70vw + 30pt);
	max-width: 500pt;;
	text-align: left;
	margin: auto;
	margin-bottom: 60pt;
}

.description {
	color: white;
	font-family: "Merriweather Sans", sans-serif;
	font-size: calc(1vh + 8pt);
}

.logo {
	width: 70pt;
	border: solid white 5pt;
	border-radius: 50%;
	margin: auto;
	display: block;
	margin-bottom: 25pt;
}

.logo:hover {
	transform: scale(1.05);
	cursor: pointer;
}