/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

  html {
	  background-color: white;
	   border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAkElEQVQ4T2NcdGH/fwYqA0aQoXEGjozUMhdkHtxQmOG4LCEkjqyfoEuxBQ8+nxHtUmSD0Q1E9yGKofjClFDQIOsl2lBSIpE+hpKbvJD1YbgUX4RgCwJs6jFiH6aRlMyAbjDtXQpyJU3ClJSkg0stfZIUPttBkUdM8Axc3qdZKYUvZZBdSpGSKuBhSoomYtQCAAc5HxXigXlXAAAAAElFTkSuQmCC") 7 /  7px / 0 round;
    border-width:  7px;
    border-style:  solid;
	  cursor: url("/picture_library/amulet.png"), default;
}
h1 {
	font-family: Arial;
  text-align:right;
  z-index:-1;
  color:#5CAB5D;
  text-shadow: 0 0 20px springgreen, 0 0 5px steelblue;
}

  h2 {
  font-size:120%;
   color:#5CAB5D;
text-shadow: 0 0 30px springgreen, 0 0 5px steelblue;
	
}
body {
  font-family: Arial;
  font-style: normal;
  font-size:120%;
	color: #5CAB5D;
  text-shadow: 0 0 20px springgreen, 0 0 5px steelblue;
	
}

li {
	list-style: none;
  background-image: url("/picture_library/Arcticternchick.jpg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px;
}
a:link {
	color:#5CAB5D;
	text-decoration:none;
}
a:visited {
	color:#5CAB5D;
   text-decoration: none;
}
a:hover {
  color:cornflowerblue;
  text-decoration: none;
}
a:active {
	color:#5CAB5D;
   text-decoration: none;
}
.sidenav {
	float:left;
  width: 28%;
  padding: 8px 0;
}
.main {
	float:right;
  text-align:left;
		margin-bottom:40px;
  padding-right: 2%; 
  padding-left: 5%;
	width:62%;
}

div.scroll-container {
  background-color: black;
  overflow: auto;
	white-space:nowrap;
  box-shadow: 0 0 8px black, 0 0 5px lightsteelblue;
	width:95%;
	 padding: 10px;
	
}

div.scroll-container img {
	height:600px;
	width:auto;
	margin-top:auto;
	margin-bottom:auto;
	padding:5px;
}

.library {
	display:flex;
	flex-wrap:wrap;
}

.library img {
	height: 350px;
	margin:-35px;
}

.desktop { 
	display:none;
	animation-name: desktop;
	animation-duration:4s;
	animation-delay:2s;
	position:relative;
	animation-iteration-count: infinite;
}

.snowflake {
  color: #5CAB5D;
  font-family: Arial;
  text-shadow: 0 0 20px springgreen, 0 0 5px steelblue;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}

@keyframes desktop {
	0% {transform: rotateY(0deg);}
	50% {transform: rotateY(180deg);}
	100% {transform: rotateY(0deg);}
}

@media all and (max-width: 800px) {
	.desktop {
		display:block;
		font-size:120%;	
	}
	.sidenav {
		font-size: 15px;
		width:90%;
		float:none;
	}
	.main {
			width:90%;
		font-size: 15px;
		padding-right:3%;
			padding-left:3%;
		margin:auto;
		float:none;
	}
}