/* THEME DATA */

[data-theme="candyCream"] {
    --primaryColor: #ff4c9d;
    --secondaryColor: #ff6846;
    --tertiaryColor: #ff8d58;
    --borderColor: #ff4c9d;
    --asideColor: #4bbdff;
    --mainColor: #fff5d3;
    --boxColor: #fffef9;
    --link: #0073a8;
    --navbarLink: #fff28d;
    --sidebarText: #fff6d7;
    --headerColor: #6e003d;
    --warningBackgroundColor: #fec301;
    --warningBorderColor: #f58c02;
    --warningTextColor: #ff382f;
    --backgroundImage: url('https://casper-valentine.gay/Assets/MainBackground.png');
    --headerImage: url('https://casper-valentine.gay/Assets/headerimageCC.png');
    --barImage: url('https://casper-valentine.gay/Assets/barCC.png');
    --asideImage: url('https://casper-valentine.gay/Assets/sidebarCC.png');
    --textSeparator: url('https://casper-valentine.gay/Assets/textSeparatorCC.png');
    --divider: url('https://casper-valentine.gay/Assets/dividerCC.png');
    --leftSideAvatar: url('https://casper-valentine.gay/Assets/sidebarAvatarCC.png');
    --idAvatar: url('https://casper-valentine.gay/Assets/idAvatarCC.png');
    --wip: url('https://casper-valentine.gay/Assets/wipCC.png');
    --na: url('https://casper-valentine.gay/Assets/naCC.png');
    --dropdownArrow: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="%23ff4c9d" viewBox="0 0 10 10"><path d="M5 6.5L1 2.5h8z"/></svg>');
    --fontSize: 18px;
    --secondaryFontSize: 16px;
    --fontFamily: 'PixelOperator', monospace;
    --pMargin: 0;
    --strongStyle: normal;
}

[data-theme="plague"] {
    --primaryColor: #0d0404;
    --secondaryColor: #271e1e;
    --tertiaryColor: #271e1e;
    --borderColor: #0d0404;
    --asideColor: #330d0d;
    --mainColor: #82856d;
    --boxColor: #c6c7b6;
    --link: #3a0404;
    --navbarLink: #4c4f3e;
    --sidebarText: #82856d;
    --headerColor: #281c17;
    --warningBackgroundColor: #c7b241;
    --warningBorderColor: #a88617;
    --warningTextColor: #0e0404;
    --backgroundImage: url('https://casper-valentine.gay/Assets/PlagueBackground.png');
    --headerImage: url('https://casper-valentine.gay/Assets/headerimageP.png');
    --barImage: url('https://casper-valentine.gay/Assets/barP.png');
    --asideImage: url('https://casper-valentine.gay/Assets/sidebarP.png');
    --textSeparator: url('https://casper-valentine.gay/Assets/textSeparatorP.png');
    --divider: url('https://casper-valentine.gay/Assets/dividerP.png');
    --leftSideAvatar: url('https://casper-valentine.gay/Assets/sidebarAvatarP.png');
    --idAvatar: url('https://casper-valentine.gay/Assets/idAvatarP.png');
    --wip: url('https://casper-valentine.gay/Assets/wipP.png');
    --na: url('https://casper-valentine.gay/Assets/naP.png');
    --dropdownArrow: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="%230d0404" viewBox="0 0 10 10"><path d="M5 6.5L1 2.5h8z"/></svg>');
    --fontSize: 18px;
    --secondaryFontSize: 16px;
    --fontFamily: 'PixelOperator', monospace;
    --pMargin: 0;
    --strongStyle: normal;
}

[data-theme="newspaperPastels"] {
    --primaryColor: #181510;
    --secondaryColor: #221e16;
    --tertiaryColor: #221e16;
    --borderColor: #181510;
    --asideColor: #77acb1;
    --mainColor: #faf6ee;
    --boxColor: #faf6ee;
    --link: #94596e;
    --navbarLink: #faf6ee;
    --sidebarText: #221e16;
    --headerColor: #ab987c;
    --warningBackgroundColor: #ffe460;
    --warningBorderColor: #ce832d;
    --warningTextColor: #181510;
    --backgroundImage: url('https://casper-valentine.gay/Assets/NewspaperBackground.png');
    --headerImage: url('https://casper-valentine.gay/Assets/headerimageNP.png');
    --barImage: none;
    --asideImage: none;
    --textSeparator: url('https://casper-valentine.gay/Assets/textSeparatorNP.png');
    --divider: url('https://casper-valentine.gay/Assets/dividerNP.png');
    --leftSideAvatar: url('https://casper-valentine.gay/Assets/sidebarAvatarNP.png');
    --idAvatar: url('https://casper-valentine.gay/Assets/idAvatarNP.png');
    --wip: url('https://casper-valentine.gay/Assets/wipNP.png');
    --na: url('https://casper-valentine.gay/Assets/naNP.png');
    --dropdownArrow: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="%23221e16" viewBox="0 0 10 10"><path d="M5 6.5L1 2.5h8z"/></svg>');
    --fontSize: 15px;
    --secondaryFontSize: 14px;
    --fontFamily: Arial, sans-serif;
    --pMargin: 0 0 5px 0;
    --strongStyle: italic;
}

[data-theme="dark"] {
    --primaryColor: #ad95a0;
    --secondaryColor: #827078;
    --tertiaryColor: #827078;
    --borderColor: #0f0e0c;
    --asideColor: #332e2a;
    --mainColor: #292523;
    --boxColor: #22201e;
    --link: #7c5b7c;
    --navbarLink: #7e6574;
    --sidebarText: #ad95a0;
    --headerColor: #1b1311;
    --warningBackgroundColor: #895f74;
    --warningBorderColor: #684854;
    --warningTextColor: #22201e;
    --backgroundImage: url('https://casper-valentine.gay/Assets/DarkBackground.png');
    --headerImage: url('https://casper-valentine.gay/Assets/headerimageDC.png');
    --barImage: none;
    --asideImage: none;
    --textSeparator: url('https://casper-valentine.gay/Assets/textSeparatorDC.png');
    --divider: url('https://casper-valentine.gay/Assets/dividerDC.png');
    --leftSideAvatar: url('https://casper-valentine.gay/Assets/sidebarAvatarDC.png');
    --idAvatar: url('https://casper-valentine.gay/Assets/idAvatarDC.png');
    --wip: url('https://casper-valentine.gay/Assets/wipDC.png');
    --na: url('https://casper-valentine.gay/Assets/naDC.png');
    --dropdownArrow: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="%23827078" viewBox="0 0 10 10"><path d="M5 6.5L1 2.5h8z"/></svg>');
    --fontSize: 15px;
    --secondaryFontSize: 14px;
    --fontFamily: Arial, sans-serif;
    --pMargin: 0 0 5px 0;
    --strongStyle: italic;
}

/* ENTIRE WEBSITE - CORE STYLING */

@font-face {
    font-family: PixelOperator;
    src: url('https://casper-valentine.gay/Assets/PixelOperator.ttf');
}

@font-face {
    font-family: PixelOperator;
    src: url('https://casper-valentine.gay/Assets/PixelOperator-Bold.ttf');
    font-weight: bold;
}

body {
    font-family: var(--fontFamily);
    margin: 0;
    background-color: var(--headerColor);
    background-size: 1080px;
    color: var(--secondaryColor);
    background-image: var(--backgroundImage);
    font-size: var(--fontSize);
}

* {
    box-sizing: border-box;
}

#flex {
    display: flex;
}

#container {
    max-width: 1200px; /* change media query if you change this*/
    margin: 0 auto;
}

main {
    order: 2;
}

#leftSidebar {
    order: 1;
}

#rightSidebar {
    order: 3;
}

/* FONT STYLING*/

h1,
h2, 
h3 {
    color: var(--primaryColor);
}

h1 {
    font-size: 40px; 
}

strong {
    color: var(--primaryColor);
    font-style: var(--strongStyle);
}

a {
    color: var(--link);
    font-weight: bold;
}


/* HEADER */

#header {
    width: 100%;
    background-color: var(--headerColor); /*header color*/
    height: 200px;
    background-image: var(--headerImage);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}

/* NAVBAR */
nav {
    height: 40px;
    background-image: var(--barImage);
    background-color: var(--borderColor); /*navbar color*/
    width: 100%;
}

nav ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
}

nav li {
    padding-top: 10px;
}


nav li a {
    color: var(--navbarLink) !important; /* navbar text color */
    font-weight: 800 !important;
    text-decoration: none;
}

nav li a:hover {
    color: var(--navbarLink);
    text-decoration: underline;
}

/* SIDEBAR - CORE STYLING */
aside {
    background-image: var(--asideImage);
    background-color: var(--asideColor);
    color: var(--sidebarText);
    width: 230px;
    padding: 20px;
    text-align: center;
}

aside img {
    margin: 0 auto;
}

aside p {
    margin: 0;
    padding: 0;
}

aside a {
    color: var(--sidebarText);
    text-decoration: none;
}

aside h3 {
    color: var(--sidebarText);
    text-align: left;
}

aside label h3 {
    color: var(--sidebarText);
    margin: 0;
    padding: 0;
    text-align: left;
}

.sidebarSticky {
    position: sticky;
    top: 15px;
    height: auto;
    width: auto;
}

.sidebarBox {
    color: var(--secondaryColor);
    background-color: var(--mainColor); 
    border: 3px solid var(--borderColor); 
    border-radius: 5px; 
    margin: 0;
    padding: 10px; 
}

.sidebarBox a {
    color: var(--link);
    text-decoration: underline;
}

aside *::-webkit-scrollbar {
    width: 14px; 
}
  
aside *::-webkit-scrollbar-track {
    background: var(--mainColor); /* keep same color as background */
}
  
aside *::-webkit-scrollbar-thumb {
    background: var(--tertiaryColor); 
    border: 3px solid var(--mainColor); /* keep same color as background */
    border-radius: 5px;
}

/* SIDEBAR - SELECT AND CONTAINERS */

.sidebarSelect {
    width: 100%; 
    padding: 8px;
    border: 3px solid var(--borderColor);
    border-radius: 5px; 
    background-color: var(--mainColor); 
    color: var(--primaryColor); /* Text color */
    font-family: var(--fontFamily);
    font-size: var(--secondaryFontSize);
    font-weight: bold; 
    appearance: none; /* Remove default arrow */
    background-image: var(--dropdownArrow); /* Custom arrow */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
    margin-top: 5px; /* Align with label */
}

textarea:focus, input:focus, select:focus {
    outline: none; 
    border-color: inheret;
    box-shadow: none;
}

#microblog {
    height: 200px; 
    overflow: auto; 
    text-align: left;
}

#microblog p {
    margin: 0; 
}

.sitecodeBlock {
    background-color: var(--mainColor);
    padding: 10px;
    border-radius: 5px;
    height: 50;
    overflow-y: auto;
    border: 3px solid var(--borderColor);
}

code {
    font-family: var(--fontFamily);
    color: var(--secondaryColor);
}

.codeBox {
    background-color: var(--boxColor);
    padding: 10px 10px 10px 10px;
    margin: 0;
    overflow-y: auto;
}

#friends p {
    margin: var(--pMargin);
    margin-bottom: 10px;
    text-align: left;
}

#friends img {
    margin-top: 6px;
    margin-left: auto;
    margin-right: auto;
}

/* SIDEBAR - IMAGES */

.textSeparator {
    content: var(--textSeparator);
}

.leftSideAvatar {
    content: var(--leftSideAvatar);
    display: block;
}

/* SIDEBAR - MUSIC PLAYER */

#musicplayer{
    background: var(--mainColor); 
    border: 3px solid var(--borderColor);  
    border-radius: 5px; 
    width: 100%;
    padding: 10px;
    text-align: center; 
    display: flex;
    flex-direction: column;
    gap: 10px;
}
 
.songtitle, .track-info, .now-playing{
    padding: 5px;
}
 
.controls{
    display: flex; 
    flex-direction: column; 
    gap: 10px;
}
 
.buttons{
    display: flex;
    justify-content: center;
    font-size: 10px !important; /* size of controls */
    width: 100%;
}
 
.buttons div{
    width:10%;
}
 
.playpause-track, .prev-track, .next-track{
    color: var(--primaryColor); /* color of buttons */
    margin: 0 25px 0 25px;
    cursor: pointer;
}

.prev-track, .next-track{
    color: var(--primaryColor); /* color of buttons */
    font-size: 24px !important; /* size of buttons */
    margin: 0 25px 0 25px;
    cursor: pointer;
}

.playpause-track{
    color: var(--primaryColor); /* color of buttons */
    font-size: 17px !important; /* size of buttons */
    margin: 0 25px 0 25px;
    cursor: pointer;
}
 
.volume-icon{
    font-size: 21px !important; /* size of volume icon */
    color: var(--primaryColor);
    margin-top: -3px;
}
 
.seeking, .volume{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}
 
.now-playing, .track-info{
    background-color: var(--boxColor); /* background color of top two boxes */
    border: none;
    border-radius: 5px;
    color: var(--primaryColor);
}

.current-time {
    color: var(--primaryColor);
}

.total-duration {
    color: var(--primaryColor);
}
 
.now-playing{
    font-weight: bold;
}
 
input[type=range]{
    appearance: none; /* removes default appearance of the tracks */
    width: 100%;
}
 
input[type=range]:focus{
    outline: none; /* removes outline around tracks when focusing */
}
 
input[type=range]::-webkit-slider-runnable-track{
    width: 100%;
    height: 3px; /* thickness of seeking track */
    background: var(--tertiaryColor); /* color of seeking track */
}
 
input[type=range]::-webkit-slider-thumb{
    height: 15px; /* height of seeking square */
    width: 15px; /* width of seeking square */
    border: 3px solid var(--mainColor); /* keep same color as background */
    border-radius: 5px; /* change to 5px if you want a circle seeker */
    background: var(--primaryColor); /* color of seeker square */
    -webkit-appearance: none;
    margin-top: -6px; /* fixes the weird margin around the seeker square in chrome */
    cursor: pointer;
}
 
input[type=range]::-moz-range-track{
    width: 100%;
    height: 3px; /* thickness of seeking track */
    background: var(--tertiaryColor); /* color of seeking track */
    -moz-appearance: none;
    border: none;
}
 
input[type=range]::-moz-range-thumb{
    height: 10px; /* height of seeking square */
    width: 10px; /* width of seeking square */
    border: 3px solid var(--mainColor); /* keep same color as background */
    border-radius: 5px; /* change to 5px if you want a circle seeker */
    background: var(--primaryColor); /* color of seeker square */
    appearance: none;
    cursor: pointer;
}

.playerCredit a {
    color: var(--mainColor) !important;
}


/* MAIN - CORE STYLING & CONTAINERS */
main {
    background-color: var(--mainColor);
    flex: 1;
    padding: 20px;
}

.mainBox {
    background-color: var(--boxColor);
    border: 3px solid var(--borderColor);
    border-radius: 5px;
    margin: 0;
    padding: 15px;
    overflow: hidden;
}

.mainBox p {
    margin: var(--pMargin);
}

.warningBox {
    background-color: var(--warningBackgroundColor);
    border: 3px solid var(--warningBorderColor);
    color: var(--warningTextColor); /* Text color */
    border-radius: 5px;
    margin: 0 auto;
    padding: 5px;
    overflow: hidden;
    text-align: center;
    display: block;
    width: fit-content;
}

.imageGroupBox {
    border: none;
    margin: 0;
    padding: 0px;
    overflow: hidden;
    text-align: center;
}

/* MAIN - IMAGES */
.divider {
    content: var(--divider);
    display: block;
    margin: 0 auto;
}

.idAvatar {
    content: var(--idAvatar);
    float: left;
    margin-right: 10px;
    max-width: 40%;
    height: auto;
    border: 3px solid var(--borderColor);
    border-radius: 5px;
}

.wip {
    content: var(--wip);
    margin-left: 2px;
}

.na {
    content: var(--na);
    margin-left: 2px;
}

/* FOOTER */
footer {
    background-image: var(--barImage);
    background-color: var(--borderColor);
    color: var(--navbarLink); /*text color*/
    width: 100%;
    height: 55px;
    padding: 10px;
    text-align: center;
}

footer p {
    margin: 0;
    padding: 0;
}

/* MAIN - GALLERY CORE STYLING */
.gallery-container {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 10px; 
}

.gallery {
    display: flex;
    width: 225px;
    margin: 0;
    flex-grow: 1;
    align-items: left;
    flex: 1 1 calc(33.333% - 10px);
    flex-direction: column; 
    box-sizing: border-box;
    overflow: hidden;
}

.gallery img {
    border-radius: 5px;
    width: 225px; 
    object-fit: cover;
    object-position: top center;
    display: block; 
    margin-bottom: 5px;
    border: 3px solid var(--borderColor);
    background-color: var(--boxColor); 
}

#bookGallery img {
    height: auto;
}

.gallery-container::after {
    content: '';
    flex: 1 1 calc(33.333% - 10px);
}

/* IMAGE LOADER */

#loadingOverlay {
    position: fixed;
    inset: 0;
    background: var(--mainColor);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 1;
    transition: opacity 0.4s ease;
}

#loadingOverlay.is-hidden {
    opacity: 0;
    pointer-events: none;
}

#loadingOverlay p {
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
    font-weight: bold;
    color: var(--primaryColor);
}

#loadingBarContainer {
    width: 40%;
    height: 20px;
    background: var(--mainColor);
    border-radius: 5px;
    border: 3px solid var(--primaryColor);
    overflow: hidden;
}

#loadingBar {
    width: 0%;
    height: 100%;
    background: var(--primaryColor);
    border: 3px solid var(--mainColor);
    transition: width 0.2s ease;
}

/* ART GALLERY */ 
#clickableGallery{
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}

#hideshow{
   display:none; 
}

#featureimg {
    max-width: 100%;
}

#galleryItems img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    cursor: pointer;
    margin: 5px;
    border: 3px solid var(--borderColor);
    background-color: var(--boxColor); 
    border-radius: 5px;
}

/* OLD ART PAGES 

.indArt {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    max-width: 100%;
    height: auto;
}

.artLink {
    text-align: center;
}

.artLink p {
    margin: 10px 0 10px 0;
    padding: 0;
}

.swap {
    cursor: pointer;
}

#artGallery img {
    height: 225px;
}

*/


/* MAIN - WRITING PAGES */
.writingBox {
    border: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
}

.writingBox p {
    margin-top: 0;
    margin-bottom: 0;
}


/* MEDIA QUERY (mobile adjustments) */

/* change max width below to -100 of the container max width*/
@media only screen and (max-width: 1100px) {
    #flex {
        flex-wrap: wrap;
    }

    aside {
        width: 100%;
    }

    main {
        order: 1;
    }

    #leftSidebar {
        order: 2;
    }

    #rightSidebar {
        order: 3;
    }

    nav ul {
        flex-wrap: wrap;
    }

    .gallery-container {
        gap: 10px; 
    }

    .gallery {
        flex: 1 1 calc(50% - 10px); 
    }

    .gallery-container::after {
        flex: 1 1 calc(50% - 10px);
    }

    .gallery img {
        width: 95%;
        object-fit: cover;
    }

    #artGallery img {
        aspect-ratio: 1;
        height: 95%;
    }

    #bookGallery img {
        height: auto;
        object-fit: cover;
    }

    #galleryItems img {
        margin: 2px;
        width: 100px;
        height: 100px;
    }


}