/* start light mode styling */
	:root {
		--text: darkslategrey;
		--border: lightgrey;
		--accent: teal;
		--bg: #dce3e1;
		--gradientTop: white;
		--gradientBottom: rgb(240, 248, 255, .8);
	}
	header {
		background: url('***light mode banner image***');
	}
/* end light mode styling */


/* start dark mode styling */
	@media (prefers-color-scheme: dark) {
		:root {
			--text: black;
			--border: #5a7678;  
			--accent: #74C365;
			--bg: rgb(54, 69, 77, 1);
			--gradientBottom: rgb(39, 59, 44);
			--gradientTop: rgb(56, 84, 67);
			a:link { color: #4f5b6e; }
		}
		header {
			background: url('***dark mode banner image***');
		}
	}
/* end dark mode styling */


* { 
	box-sizing: border-box;
}
body {
	padding: 10px;
	font-family: 'MS PGothic', sans-serif;
	color: var(--text);

	/* page background pattern */
	background-color: var(--gradientTop);
	background-image: url("room pixelised - site background.png");
	background-size: 1920px 1080px;
	background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;
	
}

.container:has(to-do-list, badges, polaroids, ticket, music){
	width: 1040px;
	height: 640px;
	margin: 3.8vw auto 12px;
	border: 20px solid;
	border-image: url("wood-texture.jpg");
	border-image-slice: 30%;
	display: block;
	padding: 5px;
	gap: 5px;
	box-shadow: 13px 17px 10px rgb(00, 00, 00, 0.6) inset, 15px 20px 12px rgb(00, 00, 00, 0.6);

	/* container background pattern */
	opacity: 1;
	background-size: 1000px 880px;
	background-image: url("corkboard-texture.jpg");
	background-position: center;
	
	align-items: center;
}
/* these control the column widths */
.small { flex: 1 1 9%; }
.large { flex: 1 1 82%; }
.full { flex: 1 1 100%; }
.half { flex: 1 1 49%; }


header {
	background-size: cover;
	background-position: center;
	width: 300px;
	height: 120px; /* change banner height here*/
	background-color: #e6dcbe;
  opacity: 1;
  background-size: 20px 20px;
  background-image: repeating-linear-gradient(0deg, #424743, #424743 1px, #e6dcbe 1px, #e6dcbe);
	position: relative;
  top: 30px;
  left: 350px;
  transform: rotate(-0.008turn);
  box-shadow: 5px 7px 5px rgb(00, 00, 00, 0.6);
}
header span {
  font-family: 'MS PGothic', sans-serif;
	font-size: 22.4px;
	position: absolute;
	top: 38px;
	right: 0px;
	margin: 10px;
	font-weight: bold;
	color: #385443;
	text-align: center;
}

 header span-a {
  align-items: center;
  position: absolute;
  top: 14px;
  right: 140px;
  object-fit: scale-down;
  width: 24px;
  height: 24px;
  border-radius: 70%;
  filter: drop-shadow(4.5px 6px 2px rgb(00, 00, 00, 0.6));
}

 .container to-do-list {
  background-size: cover;
	background-position: center;
  max-width: 100%;
	width: 200px;
	height: 400px; /* change banner height here*/
	background-color: #e6dcbe;
  opacity: 1;
  background-size: 20px 20px;
  background-image: repeating-linear-gradient(0deg, #424743, #424743 1px, #e6dcbe 1px, #e6dcbe);
	position: absolute;
	 top: 140px;
  right: 475px;
  transform: rotate(0.003turn);
  box-shadow: 5px 7px 5px rgb(00, 00, 00, 0.6);
  }

to-do-list span {
  font-family: 'MS PGothic', sans-serif;
	font-size: 20.8px;
  color: #526685;
  font-weight: bold;
  position: relative;
  top: 49px;
  left: 6px;
}

to-do-list list {
  font-family: 'MS PGothic', sans-serif;
	font-size: 19.2px;
  color: #526685;
  font-weight: bold;
  position: relative;
  top: 49px;
  left: -17px;
  width: 220px

}

to-do-list pin {
  align-items: center;
  position: absolute;
  top: 7px;
  right: 85px;
  object-fit: scale-down;
  width: 24px;
  height: 24px;
  border-radius: 70%;
  filter: drop-shadow(4.5px 6px 2px rgb(00, 00, 00, 0.6));
  }
  
section {
	position: relative;
	top: -100px;
	left: 20px;
	object-fit: fill;
	width: 90px;
	height: 51px;
	box-shadow: 4px 8px 4px rgb(00, 00, 00, 0.6);
		}
		
.container music {
  z-index: 100px;
	background-size: cover;
	background-position: center;
	width: 150px;
	height: 140px; /* change banner height here*/
	background-color: #e6dcbe;
  opacity: 1;
  background-size: 20px 20px;
  background-image: repeating-linear-gradient(0deg, #424743, #424743 1px, #e6dcbe 1px, #e6dcbe);
	position: relative;
  top: 30px;
  left: 100px;
  transform: rotate(0.008turn);
  box-shadow: 5px 7px 5px rgb(00, 00, 00, 0.6);
}

music span {
  font-family: 'MS PGothic', sans-serif;
	font-size: 18px;
	position: absolute;
	top: 38px;
	right: 0px;
	font-weight: bold;
	color: #385443;
	text-align: center;
}


letter {
 z-index: 100;
 position: absolute;
 bottom: 245px;
 left: 710px;
 height: 190px;
 width: 285px;
 object-fit: fill;
 filter: drop-shadow(4.5px 6px 2px rgb(00, 00, 00, 0.6));
 transform: rotate(-0.004turn)
 }	
		
letter span {	
  position: absolute;
  bottom: 40px;
  left: 30px;
  font-family: 'MS PGothic', sans-serif;
	font-size: 15px;
  color: #32343b;
  font-weight: bold;
  text-align: left;
}

letter stamp {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 60px;
  height: 30px;
  filter: drop-shadow(2px 4px 2px rgb(00, 00, 00, 0.6));
}

letter pin {
  align-items: center;
  position: absolute;
  top: 7px;
  right: 135px;
  object-fit: scale-down;
  width: 24px;
  height: 24px;
  border-radius: 70%;
  filter: drop-shadow(4.5px 6px 2px rgb(00, 00, 00, 0.6));
  }
  
sticker{
  position: absolute;
  bottom: 260px;
  left: 1020px;
  height: 95px;
  width: 190px;
  transform: rotate(0.005turn);
}


 polaroids {
  box-shadow: 5px 7px 5px rgb(00, 00, 00, 0.6);
  height: 150px;
  width: 150px;
 }
 
polaroids charlie {
  position: absolute;
  bottom: 220px;
  left: 480px;
  height: 240px;
  width: 200px;
  object-fit: fill;
  transform: rotate(0.004turn);
  border: 10px solid;
  border-bottom-width: 60px;
  border-color: #faf3e1;
  border-image-slice: 30%;
  padding-bottom: 20px; 
  box-shadow: 5px 7px 5px rgb(00, 00, 00, 0.6);
  text-align: center;
}

polaroids charlie pin {
  position: absolute;
  bottom: 153px;
  left: 80px;
  object-fit: scale-down;
  width: 24px;
  height: 24px;
  border-radius: 70%;
  filter: drop-shadow(4.5px 6px 2px rgb(00, 00, 00, 0.6));
  }
  
polaroids charlie span {
  position: relative;
  bottom: 0px;
  left: center;
  font-family: 'MS PGothic', sans-serif;
	font-size: 1rem;
	font-weight: bold;
	color: black;
	align-items: center;
}
	
 polaroids tree {
  position: absolute;
  bottom: 385px;
  left: 1010px;
  height: 240px;
  width: 200px;
  object-fit: fill;
  transform: rotate(-0.005turn);
  border: 10px solid;
  border-bottom-width: 60px;
  border-color: #faf3e1;
  border-image-slice: 30%;
  padding-bottom: 20px; 
  box-shadow: 5px 7px 5px rgb(00, 00, 00, 0.6);
  text-align: center;
}
	
polaroids tree pin {
  position: absolute;
  bottom: 153px;
  left: 80px;
  object-fit: scale-down;
  width: 24px;
  height: 24px;
  border-radius: 70%;
  filter: drop-shadow(4.5px 6px 2px rgb(00, 00, 00, 0.6));
  }
  
polaroids tree span {
  position: relative;
  bottom: -5px;
  left: center;
  font-family: 'MS PGothic', sans-serif;
	font-size: 1rem;
	font-weight: bold;
	color: black;
	margin: 5px auto;
	text-align: center;
}

badges {
  width: 20px;
  height: 20px;
  object-fit: fill;
  box-shadow: 3.5px 5px 3px rgb(00, 00, 00, 0.6);
}

badges eight-ball {
  position: absolute;
  top: 130px;
  right: 690px;
  width: 65px;
  height: 65px;
  object-fit: scale-down;
  filter: drop-shadow(4.5px 6px 2px rgb(00, 00, 00, 0.6));
  border-radius: 50%;
}

badges swirl {
  position: absolute;
  top: 200px;
  right: 725px;
  width: 65px;
  height: 65px;
  object-fit: scale-down;
  filter: drop-shadow(4.5px 6px 2px rgb(00, 00, 00, 0.6));
  border-radius: 50%;
}

badges star {
  position: absolute;
  top: 200px;
  left: 480px;
  width: 55px;
  height: 55px;
  object-fit: scale-down;
  filter: drop-shadow(4.5px 6px 2px rgb(00, 00, 00, 0.6));
  border-radius: 50%;
}



ticket{
  position: absolute;
  bottom: 225px;
  right: 470px;
  height: 130px;
  width: 230px;
  filter: drop-shadow(4.5px 6px 2px rgb(00, 00, 00, 0.6));
}

ticket pin {
  position: absolute;
  bottom: 100px;
  left: 105px;
  object-fit: scale-down;
  width: 24px;
  height: 24px;
  border-radius: 70%;
  filter: drop-shadow(4.5px 6px 2px rgb(00, 00, 00, 0.6));
  }

footer {
	text-align: center;
	margin-bottom: 5vw;
	font-size: 0.8rem;
	color: white;
}
footer a { 
	text-decoration: none;
}


h1, h2, h3, h4, h5, h6, p  { 
	margin: 5px;
	line-height: 1.2;
}
h1 { 
	font-size: 1.4rem;
	letter-spacing: 2px;
	font-weight: normal;
	text-align: center;
	border-bottom: 2px ridge var(--border);
	padding-bottom: 5px;
}
h2 { 
	font-size: 1.25rem;
	font-weight: normal;
	text-align: center;
}
h3 { 
	font-size: 1.1rem;
}
h4 { 
	font-size: 1rem;
	color: var(--accent);
	padding-left: 12px;
}

/* prevents overflow on smaller screens */
img { max-width: 100%; }
pre { overflow-x: auto; }


a:hover, a:focus {
	font-style: italic;
}
a:visited {
	color: var(--accent);
}