/*Styling for the entire page,
can set bg images here*/

html {
    background-image: url("https://64.media.tumblr.com/ce979f1bed3a5eb4bbde93c41103b217/6efdf854d72b9df2-50/s1280x1920/9b6526e45e22c010d392f4cbda83c5d511d76b43.webp");
    background-color: #c5ab8d; 
 
    background-size: 25%; /* If you plan on using a tiled background, or simply don't want your image to be resized, you can remove this part altogether. Otherwise you might get ugly stretching. I do recommend it for CSS gradients though, which is why I used it here. */
    background-attachment: fixed; /* I like fixed backgrounds, so I set it that way. You can change this for your own theme. */
    scrollbar-color: #6b4f34 #FAF8F2; /* Fancy scrollbar stylings */
}

/*default text color*/

body {
    color: #462c2c;
}

/* Use custom fonts for stuff that you wanna use it for */
h1,h2, button, #page-header a,#page-subheader a {
    font-family: 'Georgia';
}


/*TITLE*/

#page-header {
    color: #6b4f34;
}

/*BELOWTITLE*/
#page-subheader {
    color: #FAF8F2;
}

#page-subheader a {
    color: #000000;
    transition: 0.3s;
}

#page-subheader a:hover {
    color: black;
}

button {
    border: 1px dashed #c5ab8d;
   border-bottom: 3px solid #d3c3abbe;
   background-color: #fffefa;
   color: #6b4f34;
}


/* Button hover styling */
button:hover {
    border-bottom: 3px solid 9898989c;
    border: 1px solid #6b4f34;
    background-color: #faf4e7;
    
}

/* This specifies styles that will affect all the boxes. Change to your own colors!*/
#swatchesArea,.ui-tabs-panel {
    outline: 1px solid #6b4f34; /* Switched border with outline, to prevent offset issues on mobile */
   background: #edf3f7;
background: linear-gradient(0deg, rgba(237, 243, 247, 0.8) 0%, rgba(245, 237, 223, 1) 100%);
}

#bodyArea {
    outline: 1px solid #6b4f34; /* Switched border with outline, to prevent offset issues on mobile */
   
    background: #FAF8F2;


}

#swatchesArea a {
    outline: 1px dashed #c5ab8d;
}

#swatchesArea a:hover {
	outline: 1px solid #6b4f34;
}

#tabsbar li a {
   border: 1px dashed #c5ab8d;
   border-bottom: 3px solid #d3c3abbe;
   background-color: #fffefa;
   color: #6b4f34;
}

/* Tabs hover styling, only for unselected tabs */
#tabsbar .ui-state-default a:hover {
    border-bottom: 3px solid 9898989c;
    border: 1px solid #6b4f34;
    background-color: #faf4e7;
}

#tabsbar .ui-state-active a,#tabsbar .ui-state-active a:hover {
    border-bottom: 3px solid #a579409c;
    border: 1px solid #6b4f34;
    background-color: #f3e8a79c;
}

/* Anti Right-click */
/* Commented out by default since I don't care for it. Feel free to uncomment it for your own project. */
/* #anti-rightclick {
    background: #6c6d47;
    border: 1px solid #3f2b2b;
} */