/* start dark mode styling */
	@media (prefers-color-scheme: dark) {
		:root {
			/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/cursors/cur-7/cur671.cur), auto !important;} /* End https://www.cursors-4u.com */
			--text: #a6626b;
			--border: #826658;
			--accent: #f390b0;
			--bg: #d9c1b6;
			--gradientBottom: #b99d96;
			--gradientTop: #ddc6bb;
			a:link { color: #a6626b; }
		}
		header {
			
            background-color: #f390af;
				font-size: 2rem;
			
            
		}
	
/* end dark mode styling */

      #topborder{
background-image: url('https://i.imgur.com/0vWS1mg.png');
background-repeat: repeat-x;
height: 73px;
width: 100vw;
margin-top: -20px;
margin-left: -20px

}

floatleft {
  float: left;
  border-radius: 20px;
margin: 0px 20px 15px 0px;
}



* { 
	box-sizing: border-box;
}
body {
	padding: 10px;
font-family:  "Pixelated Arial";
	color: var(--text);
		font-size: 0.7rem;

	/* page background pattern */
	background-color: var(--gradientTop);
	background-image:  url(/images/bg.jpg);


}
  
.container {
	max-width: 50rem;
	margin: 5vw auto 12px auto;
	outline-offset: 4px;
	border-radius: 15px;
	display: flex;
	flex-wrap: wrap;
	padding: 10px;
	gap: 5px;


	/* container background pattern */
	     background-image:url(''); 
}

    #scrollbox {
      overflow: scroll;
      overflow-x: hidden;
      height: 10em;
      padding: 1rem;
    }

/* 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%; }
.graph { flex: 1 1 65%; }

header {
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 130px; /* change banner height here*/
	border: 5px ridge var(--border);
	border-radius: 10px;
	position: relative;
	background-image: url(https://i.pinimg.com/1200x/6d/71/ca/6d71ca79cbefc13cf12298c8bca3859c.jpg);
}
@font-face {
font-family: "Pixelated Arial"; 
src: url("/fonts/pixel.ttf") format("woff");

font-weight: lighter;
font-style: normal;
}
header span {
	font-size: 0.4 rem;
	position: absolute;
	bottom: 0;
	right: 10px;
	margin: 10px;
	font-weight: lighter;
	color: #FFF;
	
}
/* Solid border */
hr.solid {
  border-top: 3px solid #f390af;
}
        
nav {
	border: 5px ridge var(--border);
	border-radius: 10px;
	padding: 10px;
background-image:url(/images/striped.png);
background-size:repeat;

}
nav div {
	text-align: center;
	font-size: 0.8rem;
	margin: 5px 5px 10px 5px;
}
nav a {
	display: block;
	border-width: 7px; 
border-style: solid; 
border-image: url("https://i.imgur.com/8Tk8PKV.gif") 7 fill round;         
    
}
nav a:link, nav a:visited { 
	color: var(--text);
}
nav a:hover, nav a:focus {
	border-width:7px;
border-style:solid;
border-image: url("https://foollovers.com/mat/menu05/51a-none.gif") 9 fill round;         
           
          
    
}

/* optional button styling like in the preview */
  
    
	border-radius: 15px;
}



.inner {
background: #FFF;
color: #624b38;
padding:5px;
border:6px ridge #826658;
height:fit-content; /* set height to "height:fit-content;" to expand with text size */
}

section {
	background-image:url(/images/striped.png);
background-size:repeat;
padding:12px; /* make number bigger/smaller for a bigger/smaller border */
width:100%;
border:5px ridge #826658;
border-radius: 15px;
}

.inner {
 background:#d9c1b6;
            padding:20px;
            border-style:dotted;
            border-color:#b39991; 
			border-width: 3px;
border-radius: 15px;
height:fit-content	; /* set height to "height:fit-content;" to expand with text size */

}


footer {
	text-align: center;
	margin-bottom: 5vw;
	font-size: 0.6rem;
    border-width: 7px; 
     
    
}
footer a { 
	text-decoration: none;
		font-size: 0.6rem;
}

{cursor: url(https://cur.cursors-4u.net/cursors/cur-7/cur671.cur), auto !important;}

h1 { 
	font-size: 1rem;
	letter-spacing: 2px;
	font-weight: bold;
	text-align: center;
border-width: 7px; 
border-style: solid; 
border-image: url("https://i.imgur.com/8Tk8PKV.gif") 7 fill round;      
    
	padding-bottom: 10px;
}
h2 { 
	font-size: 0.7rem;
	font-weight: normal;
	text-align: center;
    border-width: 7px; 
border-style: solid; 
border-image: url("https://i.imgur.com/8Tk8PKV.gif") 7 fill round;      
   
  
}
h3 { 
	font-size: 0.7rem;
}
h4 { 
	font-size: 0.8rem;
	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);
}