/* EDIT THESE TO CHANGE THE LOOKS OF YOUR PAGE */

/*
These are the available custom properties that the default pages read.
You can customize your page by editing these. Your custom HTML can also
go here after the body declaration. This stylesheet is not used by the editor.
To edit a property, copy it (-- to ;) and paste below the commented-out zone. Then
you can edit its value.
*/




body {
	/*
	--sizing: 24px; general distance between elements
	--page-timing: 0.15s; transition of most elements' animations on hover, etc

	--col-background: #fab; background color
	--col-body: #fff; main container color
	--col-dim: #eee; color for dim borders, etc - "body color but a bit different"
	--col-text: #222; main text color
	--col-accent: #fab; accents color, like borders, etc
	--col-counterpick: #1fc; secondary accetns
	--col-shadow: rgba(0,0,0,0.1); color for box-shadows, etc

	--font-big: 'arial'; buttons, headings, etc
	--font-big-size: 32px;
	--font-main: 'verdana'; main text
	--font-main-size: 18px;

	--shadow: -4px 4px 0 var(--col-shadow); set master box-shadow distance/blur here

	--buttons-height: 64px; height of group buttons and other buttons
	--buttons-per-row: 4; how many buttons per row to display. change artworks in settings.js
	--viewer-overlay-opacity: 0.5; when you press on an artwork, a viewer pops up. this is
	--viewer-overlay-rgb: 0,0,0; to set up its backdrop opacity and colour (rgb value triplet)

	--border-width: 4px; borders of group buttons
	*/
	
	
	--col-background: #592d0d;
	--col-body: #2d1606;
	--col-text: #f4c5a4;
	--col-accent: #592d0d;
	--col-shadow: #592d0d;
	--col-counterpick: #bfdf20; 
	
	--buttons-height: 40px;
	--buttons-width: 40px;
	--buttons-per-row: 6;
	--viewer-overlay-opacity: 0.5; 
	--viewer-overlay-rgb: 0,0,0; 
	--border-width: 2px; 
	

	--font-big: 'Nunito'; 
	--font-big-size: 20px;}
	

	
		/*       Custom Font     */
		
		
	@font-face {
  font-family: Nunito;
  src: url('https://sadhost.neocities.org/fonts/Nunito-Regular.ttf');
}

@font-face {
  font-family: Nunito;
  src: url('https://sadhost.neocities.org/fonts/Nunito-Bold.ttf');
  font-weight: bold;
}

@font-face {
  font-family: Nunito;
  src: url('https://sadhost.neocities.org/fonts/Nunito-Italic.ttf');
  font-style: italic;
}

@font-face {
  font-family: Nunito;
  src: url('https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf');
  font-style: italic;
  font-weight: bold;
}

/* General Styles */
html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: 'Nunito', sans-serif;
  font-size: 18px; /* Global font size */
  background-color: #592d0d;
  background-size: 65px;
  color: #f2c6a6;

}


/* General Styles */
html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: 'Nunito', sans-serif;
  font-size: 18px; /* Global font size */
  background-color: #592d0d;
  background-size: 65px;
  color: #f2c6a6;
  background-image: var(--body-bg-image);
}

* {
  box-sizing: border-box;
}

/* Container */
#container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 900px;
  margin: 0 auto;
  background-color: #2e1605;
  color: #f4c5a4;
  outline: 1px solid #2e1605;
}

/* Header */
#header {
  width: 100%;
  background-color: #592d0d;
  height: 150px;
  background-image: var(--header-image);
  background-size: 100%;
}

/* Navigation */
#navbar {
  height: 40px;
  background-color: #864313; /* Updated background color */
  width: 100%;
}

#navbar ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
  justify-content: space-evenly;
}

#navbar li {
  padding-top: 10px;
}

#navbar li a {
  color: #f9e2d2;
  font-weight: 800;
  text-decoration: none;
}

#navbar li a:hover {
  color: #bfdf20; /* Updated hover color */
  text-decoration: underline;
}

/* Flex Layout */
#flex {
  display: flex;
}

/* Main Content */
main {
  flex: 1;
  padding: 20px;
  order: 1; /* Main content comes first (left) */
  background-color: #2d1606;
}

/* Sidebar */
aside {
  width: 200px;
  padding: 20px;
  order: 2; /* Sidebar comes second (right) */
  background-color: #2d1606;
  font-size: smaller;
}

/* Footer */
footer {
  background-color: #864313;
  width: 100%;
  height: 40px;
  padding: 10px;
  text-align: center;
  margin-top: auto; /* Push footer to the bottom */
}

/* Headings */
h1, h2, h3 {
  color: #f2c6a6;
}

h1 {
  font-size: 27px; /* Larger font size for h1 */
}

h2 {
  font-size: 25px; /* Larger font size for h2 */
}

h3 {
  font-size: 20px; /* Larger font size for h3 */
}

strong {
  color: #eca979;
}

/* Box Styling */
.box {
  background-color: #592d0d;
  border: 1px solid #df7020;
  padding: 10px;
}

/* Style for all links in the body text */
body a {
  color: #bfdf20; /* Default link color */
  text-decoration: none; /* Remove underline (optional) */
}

/* Style for links on hover */
body a:hover {
  color: #fb8004; /* Link color on hover */
}