/* 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: linear-gradient(to bottom right, #000000, #ffffff);   /*You can use any kind of background you want (including an image, a solid color, or a gradient as shown here). */
    background-repeat: no-repeat; /* Set to repeat if using a tiled background */
    background-size: 100%; /* 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: #D8C0FF #A068FF; /* Fancy scrollbar stylings */
}

body {
    color: #000000;
}

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

#page-header {
    color: #ffffff;
}

#page-subheader {
    color: #000000;
}

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

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

button {
    color: #000000;
    background-color: #c0c0c0;
    outline: 1px solid #000000;
    border: 0;
}

/* Button hover styling */
button:hover {
    background-color: #ececec;
    color: #000000;
    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 #000000; /* Switched border with outline, to prevent offset issues on mobile */
    background: #ececec;
}

#swatchesArea a {
    outline: 1px solid #000000;
}

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

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

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

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