* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'ms gothic';
	cursor: var(--cursor), auto !important;
}

::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background: white;
}
::-webkit-scrollbar-thumb,::-webkit-scrollbar-button {
  width: 16px;
  height: 16px;
  background: var(--fifth-color);
  box-shadow: inset 1px 1px white, inset -1px -1px var(--third-color);
  border: 1px solid #ffe8ec;
  border-color: var(--third-color) #000 #000 var(--secondary-color);
}
::-webkit-scrollbar-track {
  image-rendering: optimizeSpeed;
  image-rendering: pixelated;
  image-rendering: optimize-contrast;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAyIDIiIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyI+CjxtZXRhZGF0YT5NYWRlIHdpdGggUGl4ZWxzIHRvIFN2ZyBodHRwczovL2NvZGVwZW4uaW8vc2hzaGF3L3Blbi9YYnh2Tmo8L21ldGFkYXRhPgo8cGF0aCBzdHJva2U9IiNjMGMwYzAiIGQ9Ik0wIDBoMU0xIDFoMSIgLz4KPC9zdmc+");
  background-position: 0 0;
  background-repeat: repeat;
  background-size: 2px;
}

::-webkit-scrollbar-button {
  background-repeat: no-repeat;
  background-size: 16px;
}

::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTcgNWgxTTYgNmgzTTUgN2g1TTQgOGg3IiAvPgo8L3N2Zz4=");
}

::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTQgNWg3TTUgNmg1TTYgN2gzTTcgOGgxIiAvPgo8L3N2Zz4=");
}

::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTggM2gxTTcgNGgyTTYgNWgzTTUgNmg0TTYgN2gzTTcgOGgyTTggOWgxIiAvPgo8L3N2Zz4=");
}

::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTYgM2gxTTYgNGgyTTYgNWgzTTYgNmg0TTYgN2gzTTYgOGgyTTYgOWgxIiAvPgo8L3N2Zz4=");
}

::-webkit-scrollbar-corner {
  background: white;

}

ul{
	list-style-type:none;
	line-height: 20px;
}

hr{
  border:dashed 2px var(--primary-color);
  margin:10px;
}

body{
     background-image:var(--Background-image-2);
	background-size:900px;
	color:var(--primary-color);
	word-break: break-word;
     overflow-wrap: break-word;
	 transition: .3s;
}

.wrapper {
	margin: 1rem auto;
	display: flex;
	flex-direction: column;
	gap: 5px;
	border: 1px solid;
     width: 100%;
	max-width: 80vw;
	padding: 10px;
	background-color:var(--ninth-color);
     color:var(--third-color);
}

#banner {
	background: linear-gradient(0deg, var(--fifth-color) 2%, var(--sixth-color) 65%, var(--seventh-color) 100%);
	box-shadow: 2px 3px 3px inset #ffffff, -1px -1px 1px inset #2a402c;
	border: 1px solid;
	text-align: center;
	 color:var(--ninth-color);
	 text-shadow: 2px 2px var(--third-color);
	padding:20px;
}

.Web-links {
	padding:15px;
	border: 1px solid;
	background: linear-gradient(180deg, var(--ninth-color) 44%, var(--twelfth-color) 100%);
	box-shadow: 2px 2px 2px inset white, -1px -1px 1px inset var(--twelfth-color);

}

#PC-links ul{
	display:flex;
	flex-direction:row;
  flex-wrap: wrap;
	gap:10px;
	
}

    .button {
     color: var(--forth-color);
     text-shadow: 1px 1px var(--third-color);
     border: 1px solid var(--primary-color);
	background: var(--ninth-color);
	background: linear-gradient(80deg, var(--sixth-color) 3%, var(--eight-color) 98%);
     padding: 5px;
     text-align: left;
	font-family:'Ms gothic';
	font-style:italic;
     box-shadow: 2px 2px 2px inset var(--ninth-color), -1px -1px 1px inset var(--twelfth-color);
	transition: .2s;

    }
	   
	   .button:hover{
	     filter:hue-rotate(30deg);
          font-style: italic;	 
	   }

.content {
	background: var(--ninth-color);
	background: linear-gradient(180deg, var(--eight-color) 0%, var(--sixth-color) 91%);
     box-shadow: 2px 2px 2px inset white, -1px -1px 1px inset var(--twelfth-color);
	height: 31rem;
	border: 1px solid;
	display: flex;
	gap: 10px;
	padding: 10px;

}

.header-bg{
	background: linear-gradient(90deg, var(--seventh-color) 0%, rgba(255, 255, 255, 0) 90%);
	border-radius:50px 40px 40px 0px;
	margin:0px 0px 15px 0px;
	text-align:left;
	padding:20px 0px 10px 20px;
	color:var(--eleventh-color);
     text-shadow: 2px 0px var(--third-color), -2px 0px var(--third-color), 0px 2px var(--third-color), 0px -2px var(--third-color), 0 0;
	
}

.dot {
  height: 25px;
  width: 25px;
  background-image:var(--orb);
  background-size:cover;
  border-radius: 50%;
  display: inline-block;
}


/*Index section*/

#intro{
	border:1px solid;
	width:40%;
	text-align:center;
	padding:10px;
	background-color:var(--ninth-color);;
	overflow:auto;
	
}

#mefle-picture{
	    background-image:var(--Goofy-mefle);
	    background-origin:content-box;
	    background-position: center;    
	    background-size:contain;
	    background-repeat:no-repeat;
	    max-width:32vw;
	    height:45vh;
	    width:100%;
	   margin:0 auto;
	   filter:opacity(0.7);
}

#art-month{
   border:1px solid;
   width:30%;
	text-align:center;
	padding:10px;
	background-color:var(--ninth-color);
	display:flex;
	flex-direction: column;
	gap:10px;
}

#comm-extra{
	border:1px solid;
	width:30%;
	text-align:center;
	padding:10px;
	background-color:var(--ninth-color);
	display:flex;
	flex-direction:column;
	gap:10px;
}


#comm-status{
	height:50%;
	border:1px solid;
	padding:10px;
}

    #Updates {
     border: 1px solid var(--primary-color);
	background-color:var(--ninth-color);
	height:50%;
    }

    #rss {
     margin: auto;
     box-sizing: border-box;
     background-image: var(--Rss-BG);
     background-size: 60px;
     overflow: auto;
    }

    #rss a {
     color:var(--third-color);
     letter-spacing: 1px;
     font-size: 20px;
     text-decoration: none;
     text-shadow: 1px 0px var(--eleventh-color), -1px 0px var(--eleventh-color), 0px 1px var(--eleventh-color), 0px -1px var(--eleventh-color), 0 0;
    }

    #rss a:before {
     content: url("img/heartie.gif");
     margin-right: 10px;
	    
    }

    #rss h3 a {
     color: var(--ninth-color);
     text-shadow: 1px 0px var(--third-color), -1px 0px var(--third-color), 0px 1px var(--third-color), 0px -1px var(--third-color), 0 0;
	font-size:20px;
    }

    #rss h3 {
	background: #4cd951;
	background: linear-gradient(80deg, var(--sixth-color) 3%, var(--eight-color) 98%);
     border-bottom: 2px solid var(--primary-color);
     padding: 5px;
     box-shadow: 2px 3px 3px inset #ffffff, -1px -1px 1px var(--third-color);
    }

    #rss h4 {
     margin: 10px 10px;
	   
    }

    #rss p {
     margin: 10px;
     font-family: 'Learner';
     font-size: 12px;
     color: var(--third-color);
     background: var(--forth-color);
	border:1px solid var(--primary-color);
	padding:10px;
     box-shadow: 2px 3px 3px inset #ffffff, -1px -1px 1px inset var(--third-color);
		
    }

    #rss div a {
     font-size: 10px;
     text-shadow: none;
	    
    }



/*Gallery section*/

#art-info {
	display: flex;
	flex-direction: column;
	gap: 5px;
	border: 1px solid;
	width: 20%;
	padding: 6px;
	background-color:var(--eight-color);
}

#art-tools {
	height: 50%;
	border: 1px solid;
	padding: 10px;
	background-color:var(--ninth-color);
}

#disclaimers {
	border: 1px solid;
	height: 50%;
	padding: 10px;
	background-color:var(--ninth-color);
}

#Art {
	border: 1px solid;
	width: 80%;
	height: 100%;
	overflow: auto;
	background-color:var(--ninth-color);

}

    .gallery {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     width: 100%;
     overflow: auto;
     padding: 5px;
    }

    .gallery img {
     height: 150px;
     width: 150px;
     object-fit: cover;
     margin: 25px 10px 10px 10px;
	filter:opacity(0.8);
	border:3px double var(--eight-color);
	border-radius:10px;
	background: var(--ninth-color);
	background: linear-gradient(180deg, var(--eight-color) 0%, var(--sixth-color) 91%);
	
    }

/*Commission page*/

#Comm-examples{
	height:100%;
	width:60%;
	overflow-x:auto;
	text-align: center;
     background-color:var(--ninth-color);
	padding:10px;
		border:2px solid;

}

#Comm-info{
	width:40%;
     height:100%;
	overflow:auto;
	padding:10px;
     background-color:var(--ninth-color); 
	
}

#Example-blurb{
	display:flex;
	border:3px double;
	margin:10px;
	background: var(--ninth-color);
	background: linear-gradient(180deg, var(--eight-color) 0%, var(--sixth-color) 91%);
}

#Example-blurb span{
   width:70%;
	margin:5px;
	padding:5px;
   background-color:var(--ninth-color);
	border:2px solid;
}

#Mefle-greeting{
	background:var(--mefle-greets);
     background-origin:content-box;
	    background-position: center;    
	    background-size:contain;
	    background-repeat:no-repeat;
	background-color:white;
	float:left;
	height:17vh;
	width:30%;
	margin:15px;
	filter:opacity(0.7);
	border:1px double;
}

#Comm-info ul{
	border:1px solid black;
	padding:10px;
}

#money-stuff{
display:flex;
}

#money-stuff ul{
padding:10px;
width:50%;
}


.gallery2,.gallery3,.gallery4,.gallery5 {
     display: flex;
	gap:5px;
     padding: 10px;
	margin:20px 10px 20px 10px;
     justify-content: center;

}

.gallery2 img,.gallery3 img,.gallery4 img,.gallery5 img {
     max-height: 150px;
	height:100%;
     width: 100%;
	max-width:150px;
	  object-fit: cover;
	filter:opacity(0.8);
	border:3px double var(--eight-color);
	border-radius:10px;
	background: var(--ninth-color);
	background: linear-gradient(180deg, var(--eight-color) 0%, var(--sixth-color) 91%);
}

#footer{
	background: linear-gradient(0deg, var(--fifth-color) 2%, var(--sixth-color) 65%, var(--seventh-color) 100%);
	box-shadow: 2px 3px 3px inset #ffffff, -1px -1px 1px inset #2a402c;
	padding:10px;
	text-align:center;
	color:white;
	text-shadow:2px 2px var(--third-color);
}

	   .bottom-footer{
		    bottom: 0;
		    left: 0;
		    width: 100%;
		background: linear-gradient(0deg,var(--eleventh-color) 0%, var(--twelfth-color) 31%, var(--ninth-color) 98%);
		   box-shadow: 2px 3px 3px inset #ffffff, -1px -1px 1px inset var(--third-color);
		    border-top: 3px solid var(--primary-color);
		   z-index: 9000;
		    position: fixed;
		   padding:7px;
	   }

    #MyClockDisplay {
     text-align: center;
     font-size: 20px;
     color: var(--primary-color);
     border: 3px solid var(--primary-color);
     background: var(--ninth-color);
	padding:5px;
	float:right;
    }
@media screen and (max-width: 800px) {
     .wrapper {
      margin: 1rem auto;
	 margin-bottom:5rem;
	 max-width:100vw;
      width:95%;
     }
	
	.content{
		flex-direction:column;
		width:100%;
		height:100%;
	}
	
     #intro, #art-month,#comm-extra,#art-info,#Art,#Comm-examples,#Comm-info{
      width:100%;
     }
	
	#Art{
		order:1;
		height:80vh;
	}
	
	#art-info{
		order:2;
	}
	
	#PC-links ul{
		justify-content: center;
	}
	}
}