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

html {
    background-image: url(/games/darumi-no-kosuchumu-game/images/0GeneralAssets/background.png);
    /* background-color: rgb(173, 79, 153); 
    /* background-repeat: no-repeat; */   /* 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 */
}

:root{
    --font-color: #0f0f0f;
    --font-emphasis: rgb(65, 6, 52);
    --background-main: rgb(231, 209, 230);
    --background-highlight: rgb(255, 238, 254);
    --accent-bg1: rgb(202, 119, 200);
    --accent-bg2: rgb(164, 117, 162);
    --accent-alt: rgb(56, 3, 55);
}



/*default text color*/

body {
    color: var(--font-color);
}

/* Use custom fonts for stuff that you wanna use it for */
h1,h2, button, #page-header a,#page-subheader a {
    font-family: "Noto Serif Japanese", "Libre Baskerville", serif;
}

/*TITLE*/

#page-header {
    color: var(--font-emphasis);
}

/*BELOWTITLE*/
#page-subheader {
    color: var(--font-color);
}

#page-subheader a {
    color: var(--font-color);
    transition: 0.3s;
}

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

button {
    color: var(--font-color);
    background-color: var(--background-highlight);
    outline: 1px solid var(--accent-alt);
    border: 0;
}

/* Button hover styling */
button:hover {
    background-color: var(--accent-bg1);
    color: var(--font-color);
    outline: 1px solid var(--accent-alt);
    border: 0;
}

/* This specifies styles that will affect all the boxes. Change to your own colors!*/
#bodyArea {
    outline: 1px dashed var(--accent-alt); /* Switched border with outline, to prevent offset issues on mobile */
    background: var(--background-main);    
}

#swatchesArea,.ui-tabs-panel {
    outline: 1px dashed var(--accent-alt); /* Switched border with outline, to prevent offset issues on mobile */
    background: var(--background-main);
}

#swatchesArea a {
    outline: 1px solid var(--accent-alt);
}

#swatchesArea a:hover {
	outline: 1px solid var(--accent-alt);
}

#tabsbar li a {
   border: 1px solid var(--accent-alt);
   border-bottom: 3px solid #b5b5b5be;
   background-color: #ffffff;
   color: var(--font-color);
}

/* Tabs hover styling, only for unselected tabs */
#tabsbar .ui-state-default a:hover {
    border-bottom: 3px solid var(--accent-alt);
    background-color: var(--accent-bg1)3;
    color: #0f0f0f;
}

#tabsbar .ui-state-active a,#tabsbar .ui-state-active a:hover {
    border-bottom: 3px solid var(--accent-alt);
    background-color: var(--accent-bg2);
}

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