/* 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(../img/camelneon.png);   /*You can use any kind of background you want (including an image, a solid color, or a gradient as shown here). */
    background-repeat: repeat; /* Set to repeat if using a tiled background */
    background-attachment: fixed; /* I like fixed backgrounds, so I set it that way. You can change this for your own theme. */
    scrollbar-color: #D8C0FF #A068FF; /* Fancy scrollbar stylings */
}

body {
    color: #240060;
}

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

#page-header {
    color: #f4ff96;
}

#page-subheader {
    color: white;
}

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

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

button {
    color: #4A00C0;
    background-color: #ECE0FF;
    outline: 1px solid #4A00C0;
    border: 0;
}

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

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

#swatchesArea a {
    outline: 1px solid #4A00C0;
}

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

#tabsbar li a {
   border: 1px solid #4A00C0;
   border-bottom: 3px solid #D8C0FF;
   background-color: #995dc7;
   color: #4A00C0;
}

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

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

/* 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: #D8C0FF;
    border: 1px solid #4A00C0;
} */