html {
	display:grid;
}

body {
	background-image: url("bg_fwonsh_XMAS.png");
	background-repeat:repeat;
	color: #5B8AAC;
	font-size:18px;
	margin-top: 32px;
	font-family: "Garamond", serif;
}

/* IDs */

#content {
	display:grid;
	background: rgba(256, 256, 256, 0.85);
	margin: 0px auto;
	width: 1280px;
	border: 52px solid #5B8AAC;
	border-image: url("border_lace_XMAS.png") 52 round;
	border-image-outset: 26px;
}


#navbar {
	display:block;
	width: 220px;
	grid-area: 1 / 1 / 2 / 2;
}


#navbar img {
	display:block;
	padding: 6px;
	margin-left:auto;
	margin-right:auto;
}

#friendslist {
	width: 172px;
	padding: 0px 6px;
	margin:auto;
	text-align: center;
	background-color: white;
	border: 6px solid #5B8AAC;
	border-radius: 28px;
}

#mainitems {
	display:block;
	width: 740px;
	grid-area: 1 / 2 / 2 / 3;
}

#sidebar {
	display:block;
	padding: 6px;
	margin-left:auto;
	margin-right:auto;
	width: 220px;
	grid-area: 1 / 3 / 2 / 4;
}

#optionlist {
	width: 172px;
	padding: 0px 6px;
	margin:auto;
	text-align: center;
	color: white;
	background-color: #5B8AAC;
	border: 6px double white;
}

#optionlist li {
	margin-bottom:12px;
}

#optionlist li:hover {
	cursor: pointer;
	background: white;
	color: #5B8AAC;	
}



/* CLASSES */


.grid-container {
	display: grid;
	grid-template-columns: auto auto auto auto;
	grid-template-rows: auto auto auto auto;
}

.snowedge {
	background-color: white;
	border: 22px solid white;
	padding-left: 22px;
	border-image: url("border_XMAS.png") 22 round;
	overflow:auto;
}



/* OTHER STYLES */

h1, h2, h3{
	font-family: "Henny Penny", system-ui;
}

div {
	line-height: 1.1;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li::before {
  content: "❆";
  padding-right: 8px;
}

.zoomer:hover {
	cursor: pointer;
	transition: 0.5s ease;
	transform: scale(1.2, 1.2);
}

h2 a:link {
  color: #1A537C;
}

h2 a:hover {
	color:white !important;
	background-color:#5B8AAC;
}

h2 a:visited {
	color:#359AE3;
}

p a:link {
  color: #1A537C;
}

p a:hover {
	color:white !important;
	background-color:#5B8AAC;
}

p a:visited {
	color:#359AE3;
}