/* This file contains all the custom fonts and colors for the dollmaker */

/*----------------------------------------------*/

/* Load custom font.
   TIP: You can find many nice OFL-licensed fonts over at Google: https://fonts.google.com */
@import url('https://fonts.cdnfonts.com/css/pixelify-sans');

html {
    background-image: url('natfl305.jpg');
    background-repeat: repeat-y /* Set to repeat if using a tiled background */
    background-size: 10%; /* 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: #6c6d47 #A068FF; /* Fancy scrollbar stylings */
}

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: 'Pixelify Sans', sans-serif;
}


/*TITLE*/

#page-header {
    color: #2e2713;
    text-shadow: 0px 4px 10px rgba(255, 255, 255, 1);
}

/*BELOWTITLE*/
#page-subheader {
    color: #8c716d;
    text-shadow: 0px 4px 10px rgba(255, 255, 255, 1);
}

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

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

button {
    color: #554d42;
    background-color: #e6d6d2;
    outline: 1px solid #3f2b2b;
    border: 0;
}

/* Button hover styling */
button:hover {
    background-color: #fff6ea;
    color: black;
    outline: 1px solid black;
    border: 0;
}

/* This specifies styles that will affect all the boxes. Change to your own colors!*/
#bodyArea,#swatchesArea,.ui-tabs-panel {
    outline: 1px solid #3f2b2b; /* Switched border with outline, to prevent offset issues on mobile */
    background: #e9e5e2;
}


#tabsbar li a {
   border: 1px solid #3f2b2b;
   border-bottom: 3px solid #e6d7d7;
   background-color: #e6d7d7;
   color: #3f2b2b;
}

/* Tabs hover styling, only for unselected tabs */
#tabsbar .ui-state-default a:hover {
    border-bottom: 3px solid #5a3a3a;
    background-color: #5a3a3a;
}

#tabsbar .ui-state-active a,#tabsbar .ui-state-active a:hover {
    border-bottom: 3px solid #6c6d47;
    background-color: #8c716d;
}

/* 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;
} */