/*Styling for the entire page,
can set bg images here*/
@import url('Fizzsea-regular.ttf')

@font-face {
    font-family: fizzsea;
    src: url('Fizzsea-regular.ttf');
}

html {
    background-image: url(bg.png);
    background-color: lightskyblue; 
    background-size: 10%; 
    background-attachment: fixed;
    scrollbar-color: rgba(176, 255, 255) rgba(128, 123, 219);
}

/*default text color*/

body {
    color: navy;
}

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


/*TITLE*/

#page-header {
    color: navy;
}

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

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

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

button {
    color: navy;
    background-color: #DEDEFF;
    outline: 1px solid #0E2178;
    border: 0;
}

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

/* This specifies styles that will affect all the boxes. Change to your own colors!*/
#bodyArea {
    outline: 1px solid #0E2178; /* Switched border with outline, to prevent offset issues on mobile */
    background-color: rgba(132, 163, 234);
    background: transparent center cover no-repeat;
}

#swatchesArea,.ui-tabs-panel {
    outline: 1px solid #0E2178; /* Switched border with outline, to prevent offset issues on mobile */
    background: #b0ffff;
    background: linear-gradient(180deg,rgba(155, 228, 252) 0%, rgba(132, 163, 234) 62%);
}

#swatchesArea a {
    outline: 1px solid #3f2b2b;
}

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

#tabsbar li a {
   border: 1px solid #0E2178;
   border-bottom: 3px solid #b5b5b5be;
   background-color: #DEDEFF;
   color: #444444;
}

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

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