@import url('https://fonts.googleapis.com/css?family=Cherry Bomb One|Itim|Coral Pixels|Special Elite|Silkscreen|Press Start 2P|Sour Gummy|Hi Melody|Chicle|Sunshiney ');


body{
  overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
max-width:100%;
}

:root,
[data-theme='Default'] {
    --bodybkgrnd: #000;
    /* body bg*/
    --border: #000;
    /* border */
    --bkgrnd: #EEE;
    /* windows bg*/
    --header: linear-gradient(to right, #838C45, #404322);
    --icontext: #fff;
    /* header */
    --link: #838C45;
    /* linkcolor */
    --linkH: #000;
    /* linkcolor hover */
    --accent: #575b2a;
    /* windows main accent*/
    --darkaccent: #404322;
    /* dark accent*/
    --lightaccent: #838c45;
    /* light accent*/
    --lightaccent2: #838c45;
    --shadow: #252525;
    /* box shadow */
    --headertxt: #000;
    /* header txt color*/
    --menufont: #000;
    --menufont2: #000;
     --menuhover: #838c45;
    --clockfont: #fff;
    --cursor: url();
    --move: url();
    --pointer: url();
    --textcur: url();
    --font: #000;
    --background: url(https://heathersaturnia.neocities.org/pxls/deco/saturniagrphc.png), url(https://heathersaturnia.neocities.org//pxls/deco/bwgrid.png);
    /* background image */
    --background-repeat: no-repeat, repeat;
    /* background repeat */
    --background-position: bottom right, top;
    /* background position */
    --background-size: 990px, 150px;
    /* background size */
    --divider: url("https://heathersaturnia.neocities.org/pxls/deco/lacediv.gif");
    --divpad:  65px;
    --prfileimg: url("https://heathersaturnia.neocities.org/pxls/deco/icon.1.png");
    --LBstyle: hsla(65, 37%, 26%, 0.8);
    /* LB accent*/
   --pictureimg: url("https://heathersaturnia.neocities.org/pxls/deco/saturnia-001.png");

}

[data-theme='satyrsynth'] {
    --bodybkgrnd: #000;
    /* body bg*/
    --border: #000;
    /* border */
    --bkgrnd: #EEE;
    /* windows bg*/
    --header: linear-gradient(to right, #43F4FF, #8516FF);
    /* header */
    
    --link: #D531FF;
    /* linkcolor */
    --linkH: #43F4FF;
    /* linkcolor hover */
    --accent: #C4C6D2; 
    /* windows main accent*/
    --darkaccent: #83879F;
    /* dark accent*/
    --lightaccent: #DDDCEB;
    --lightaccent2: #D7A8F8;
--icontext:#000000;
    /* light accent*/
    --shadow: #373A4C;
    /* box shadow */
    --headertxt: #fff;
    /* header txt color*/
    --menufont: #18161E;
    --menufont2: #000;
    --menuhover: #D7A8F8;
    --clockfont: #18161E;
    --cursor: url();
    --move: url();
    --pointer: url();
    --textcur: url();
    --font: #000;
    --background: url(https://heathersaturnia.neocities.org/pxls/deco/satyrsynth.gif) , url(https://heathersaturnia.neocities.org/pxls/deco/whitegrid.png);
    /* background image */
    --background-repeat: no-repeat, repeat;
    /* background repeat */
    --background-position: 100% 90%, top;
    /* background position */
    --background-size: 1100px, 150px;
    /* background size */
    --divider: url("https://heathersaturnia.neocities.org/pxls/deco/hrtdiv2.gif");
    --divpad:  35px;
    --prfileimg: url("https://heathersaturnia.neocities.org/pxls/deco/icon.6.png");
    --LBstyle: #D7A8F8cc;
    /* LB accent*/
   --pictureimg: url("https://heathersaturnia.neocities.org/pxls/deco/flppydsk.gif");
    --image-rendering: pixelated;

}
[data-theme='WIZARD']{
    --bodybkgrnd: #000;
    /* body bg*/
    --border: #000;
    /* border */
    --bkgrnd: #EEE;
    /* windows bg*/
    --header: linear-gradient(to right, #226BA4, #003158);
    /* header */
    --icontext: #fff;
    --link: #226BA4;
    /* linkcolor */
    --linkH: #ffd608;
    /* linkcolor hover */
    --accent: #014478;
    /* windows main accent*/
    --darkaccent: #003158;
    /* dark accent*/
    --lightaccent: #226BA4;
    --lightaccent2: #226BA4;
    /* light accent*/
    --shadow: #252525;
    /* box shadow */
    --headertxt: #ffd608;
    /* header txt color*/
    --menufont: #000;
    --menufont2: #000;
    --menuhover: #226BA4;
    --clockfont: #fff;
    --cursor: url();
    --move: url();
    --pointer: url();
    --textcur: url();
    --font: #000;
    --background: url(https://heathersaturnia.neocities.org/pxls/deco/Wzrdgrphc.png), url(https://heathersaturnia.neocities.org/pxls/deco/constllgrid.jpg);
    /* background image */
    --background-repeat: no-repeat, repeat;
    /* background repeat */
    --background-position: bottom right, top;
    /* background position */
    --background-size: 950px, 600px;
    /* background size */
    --divider: url("https://heathersaturnia.neocities.org/pxls/deco/stardiv2.gif");
    --divpad:  65px;
    --prfileimg: url("https://heathersaturnia.neocities.org/pxls/deco/icon.5.png");
    --LBstyle: #226BA4cc;
    /* LB accent*/
    --pictureimg: url("https://heathersaturnia.neocities.org/pxls/deco/spllbk.gif");

}
[data-theme='somnium'] {
    --bodybkgrnd: #dbe0b4;
    /* body bg*/
    --border: #000;
    /* border */
    --bkgrnd: #EEE;
    /* windows bg*/
    --header: linear-gradient(to right, #AB6FEF, #5B23AA);
    /* header */
    --icontext: #fff;
    --link: #f0bc00;
    /* linkcolor */
    --linkH: #8C946B;
    /* linkcolor hover */
    --accent: #864ACA;
    /* windows main accent*/
    --darkaccent: #5B23AA;
    /* dark accent*/
    --darkaccent2: #81353e;
    /* dark accent*/
    --lightaccent: #AB6FEF;
    --lightaccent2: #AB6FEF;
    /* light accent*/
    --shadow: #3E3436;
    /* box shadow */
    --headertxt: #000;
    /* header txt color*/
    --cursor: url();
    --move: url();
    --pointer: url();
    --menufont: #000;
    --menufont2: #000;
--menuhover: #AB6FEF;
    --textcur: url();
    --font: #000;
    --background: url(https://heathersaturnia.neocities.org/pxls/deco/Somnium-grphc.png), url(https://heathersaturnia.neocities.org/SomniumSaturnia/somniumbkgrnd.png);
    /* background image */
    --background-repeat: no-repeat, repeat;
    /* background repeat */
    --background-position: bottom right, top;
    /* background position */
    --background-size: 800px, 300px;
    /* background size */
    --prfileimg: url("https://heathersaturnia.neocities.org/pxls/deco/icon.4.png");
    --divider: url("https://heathersaturnia.neocities.org/pxls/deco/starsdiv.gif");
--divpad:  35px;

    --LBstyle: hsla(268, 80%, 69%, 0.8);
    /* LB accent*/
    --pictureimg: url("https://heathersaturnia.neocities.org/pxls/deco/saturnia-saturn.png");

}

[data-theme='saturnia'] {
    --bodybkgrnd: #E5D4CD;
    /* body bg*/
    --border: #1f1c1c;
    /* border */
    --bkgrnd: #EEE;
    /* windows bg*/
    --header: linear-gradient(to right, #7B716C, #5F5454);
    /* header */
    --link: #AF5E6A;
    /* linkcolor */
    --linkH: #5F5454;
    /* linkcolor hover */
    --accent: #9B9089;
    /* windows main accent*/
    --darkaccent: #7B716C;
    /* dark accent*/
    --lightaccent: #BBADA7;
    --lightaccent2: #BBADA7;
    /* light accent*/
    --shadow: #5F5454;
    /* box shadow */
    --headertxt: #1f1c1c;
    /* header txt color*/
    --menufont: #1f1c1c;
    --menufont2: #1f1c1c;
    
--menuhover: #AF5E6A;
    --clockfont: #fff;
    --cursor: url();
    --move: url();
    --pointer: url();

    --textcur: url();
    --font: #000;
    --background: url(https://heathersaturnia.neocities.org/pxls/deco/saturniagrphc2.png), url(https://heathersaturnia.neocities.org/pxls/deco/satkgrnd.jpg);
    /* background image */
    --background-repeat: no-repeat, repeat;
    /* background repeat */
    --background-position: bottom right, top;
    /* background position */
    --background-size: 990px, 150px;
    /* background size */
    --divider: url("https://heathersaturnia.neocities.org/pxls/deco/lacediv.gif");
    --divpad:  65px;
    --prfileimg: url("https://heathersaturnia.neocities.org/pxls/deco/icon.2.png");
    --LBstyle: hsla(23, 8%, 57%, 0.8);
    /* LB accent*/
    --pictureimg: url("https://heathersaturnia.neocities.org/pxls/deco/saturnia-002.png");
}

[data-theme='placebo'] {
    --bodybkgrnd: #F8E9ED;
    /* body bg*/
    --border: #000;
    /* border */
    --bkgrnd: #EEE;
    --icontext: #000;
    /* windows bg*/
    --header: linear-gradient(to right, #FFC1D3, #FF7A8E);
    /* header */
    --link: #FF7A8E;
    /* linkcolor */
    --linkH: #000;
    /* linkcolor hover */
    --accent: #FF94A4;
    /* windows main accent*/
    --darkaccent: #F16E87;
    /* dark accent*/
    --lightaccent: #FFC1D3;
    --lightaccent2: #FFC1D3;
    /* light accent*/
    --shadow: #F16E87;
    /* box shadow */
    --headertxt: #fff;
    /* header txt color*/
    --menufont: #fff;
    --menufont2: #000;
    --menuhover: #FFC1D3;
    --clockfont: #000;
    --cursor: url();
    --move: url();
    --pointer: url();
    --textcur: url();
    --font: #000;
    --background: url(https://heathersaturnia.neocities.org/pxls/deco/saturniagrphc-placebo.png), url(https://heathersaturnia.neocities.org/pxls/deco/plcb-1.png);
    /* background image */
    --background-repeat: no-repeat, repeat;
    /* background repeat */
    --background-position: right bottom, top;
    /* background position */
    --background-size: 1109px, 80px;
    /* background size */
    --divider: url("https://heathersaturnia.neocities.org/pxls/deco/hrtdiv.gif");
    --divpad:  35px;
    --prfileimg: url("https://heathersaturnia.neocities.org/pxls/deco/icon.3.png");
    --LBstyle: hsla(351, 100%, 79%, 0.8);
    /* LB accent*/
    --pictureimg: url("https://heathersaturnia.neocities.org/pxls/deco/saturnia-placebo.png");
}

#desktop {
    position: fixed;
    height: 100%;
    width: 100%;
    overflow: hidden;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: var(--background);
    background-repeat: var(--background-repeat);
    background-position: var(--background-position);
    background-size: var(--background-size);
    background-color: var(--bodybkgrnd);
    image-rendering: var(--image-rendering);
}

.window {
    position: absolute;
    border: 2px solid var(--border);
    background: var(--bkgrnd);
    border-radius: 5px;
    height: fit-content;
    width: fit-content;
    box-shadow: 2px 2px var(--shadow);
    z-index: 98;
}
.windowHeader {
    display: flex;
    align-items: left; 
    justify-content: space-between; 
    
}

.windowHeader>strong {
    margin-left: 2px;
    
    margin-right: auto; 
    font-family: "Press Start 2P";
    font-size: 15px;
    line-height: 20px;
    color: var(--headertxt);
    
}
.windowHeader>strong i {
    margin: 0;
    padding: 0;
    width: auto;
    gap: 5px;
    font-size: 20px;
}


.window.closed,
.window.minimizedWindow {
    display: none;
    
    
}

.windowHeader {
    background-image: var(--header);
    text-align: right;
    
    border-bottom: 2px solid var(--border);
    padding: 4px;
    cursor: move;
    color: var(--headertxt);
}

.activeWindow .windowHeader {
    background-color: var(--lightaccent);
}

.windowHeader>span {
    display: inline-block;
    cursor: pointer;
    color: var(--headertxt);
    border-radius: 5px;
    text-align: center;
    padding: 2px;
    font-family: "Press Start 2P";
    font-size: 13px;
    line-height: 20px;
    width: 20px;
    height: 20px;
    gap: 5px;
    position: relative;
    margin-bottom:2px;
   
}

.windowHeader>span:hover {
    background: var(--lightaccent2);
    color: var(--bkgrnd);


    
}

.windowHeader>span.winclose:hover {
    background: #be2020;
}



.winminimize>span>span {
    display: inline-block;
    height: 8px;
    width: 10px;
    position: absolute;
    top: 6px;
    left: 5px;
    border-bottom: 1px solid var(--border);
    
    color: var(--headertxt);
  
    
}


.wincontent {
    padding-right: 2px;
    padding-bottom: 2px;
    padding-left: 2px;
    min-width: 240px;
    min-height: 100px;
    border: 1px solid var(--border);
    margin: 2px;
    color: var(--font);
    font-family: Courier New;
    font-size: 15px;
    line-height: 20px;
    overflow-x: hidden;
    overflow-y: auto;
   
}
.windowMenu, .windowOptions {
    background-color: var(--header);
    padding: 5px;
    position: absolute;
    width: 100%;
    z-index: 999;
}

.windowMenu {
    display: flex;
    top: 30px;
    right: -5px;
}

.windowMenu ul, .windowOptions ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.windowMenu ul li, .windowOptions li {
    padding: 5px;
    cursor: pointer;
    font-family: "Silkscreen";
    font-size: 10px;
    font-weight: bold;
    border-radius: 4px;
}

.windowMenu ul li {
    font-size: 8px;
    line-height: 15px;
    color: var(--menufont2);
}

.windowMenu ul li:hover, .windowOptions li:hover {
    background: var(--menuhover);
}

.windowOptions {
    display: none;
    top: 100%;
    left: 0;
    
    background-color: var(--bkgrnd);
    width: 100px;
    min-height: 50px;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
}

.windowOptions li a {
    text-decoration: none;
    color: var(--menufont2);
    font-family: "Silkscreen";
    padding: 2px;
    display: flex;
    flex-direction: column;
    align-items: left;
    border-radius: 4px;
    cursor: pointer;
}

.windowOptions li a:hover {
    color: var(--hoverColor);
    
    background-color: var(--menuhover);
}

.has-windowOptions:hover .windowOptions {
    display: block;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.has-windowOptions:hover .windowOptions {
    display: block;
}
.windowOptions {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.has-windowOptions:hover .windowOptions {
    opacity: 1;
    visibility: visible;
}




a {
    font-family: "Silkscreen";
    color: var(--link);
    text-decoration: none;
}

a:hover {
    color: var(--linkH);
}

header {
    font-family: "Silkscreen";
    font-size: 20px;
}

.taskbarPanel {
    display: inline-block;
    border-radius: 5px;
    line-height: 35px;
    margin: 2px;
    font-family: "Silkscreen";
    color: var(--menufont);
    font-size: 24px;
    height: 35px;
    width: 35px;
    padding: 0;
    background: var(--accent);
    font-weight: bold;
    cursor: pointer;
    position: relative;
    text-align: center;
    left: 130px;
    margin-bottom: 4px;
}

.taskbarPanel:hover {
    background: var(--darkaccent);
    box-shadow: 2px 2px var(--shadow);
    
}

.taskbarPanel.activeTab {
    background: var(--lightaccent);
    box-shadow: 2px 2px var(--shadow);
}

.taskbarPanel i {
    font-size: 24px;
    vertical-align: middle;
}

.taskbarPanel.minimizedTab {
    background: var(--darkaccent);
    box-shadow: 2px 2px var(--shadow);
    
}

.taskbarPanel.minimizedTab:hover {
    background: var(--darkaccent);
    box-shadow: 2px 2px var(--shadow);
    
}

.taskbarPanel.closed {
    display: none;
}

#icons {
    position: absolute;
    top: 10px;
    left: 20px;
}

#icons a {
    display: block;
    color: var(--icontext);
    text-shadow: 2px 2px var(--darkaccent);
    cursor: pointer;
    padding: 2px 5px;
    font-family: "Silkscreen";
    font-size: 16px;
    text-decoration: none;
    font-weight: bold;
}

#icons a:hover {
    background: var(--link);
    color: #FFF;
    font-weight: bold;
}
#icons-container {
	display: flex;
	position: absolute;
	top: 10px;
	left: 0px;
}

.column {
	display: flex;
	flex-direction: column;
	margin-right: 5px; 
}
.pictureimg {
    background-image: var(--pictureimg);
    width: auto; 
    height: 110px; 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/****** welcome ******/
#window0 {
    top: 0px;
    left: 280px;
}

#window0 .wincontent {
    width: 380px;
    height: 330px;
    font-size: 12px;
    margin-top: 20px;
    overflow-y: scroll;
    padding-top: var(--divpad);
    background-repeat: repeat-x;
    background-image: var(--divider);
}

/****** projects ******/
#window1 {
    top: 0px;
    left: 145px;
}

#window1 .wincontent {
    
    width: 350px;
    height: 320px;
    font-family: "Silkscreen";
    font-weight: bold;
    font-size: 12px;
    

   
   
}

/****** socials ******/
#window2 {
    top: 225px;
    left: 0px;
}

#window2 .wincontent {
    font-size: 12px;
    width: 250px;
    height: 260px;
    overflow-y: auto;

}

/****** updates ******/
#window3 {
    top: 0px;
    left: 695px;
}

#window3 .wincontent {
    margin-top: 20px;
    width: 260px;
    height: 170px;
      padding-top: var(--divpad);
    background-repeat: repeat-x;
    background-image: var(--divider);
}

/****** credits ******/
#window4 {
    top: 87px;
    left: 520px;
}

#window4 .wincontent {
    width: 400px;
    height: 510px;
    
}

/****** gallery ******/
#window5 {
    top: 15px;
    left: 130px;
}

#window5 .wincontent {
    width: 687px;
    height: 420px;
    overflow-y: hidden;
}

/****** profile ******/
#window6 {
    top: 25px;
    left: 130px;
}

#window6 .wincontent {
    width: 805px;
    height: 430px;
    overflow-x: hidden;
    
}

/****** blog ******/
#window7 {
    top: 15px;
    left: 130px;
}

#window7 .wincontent {
    width: 750px;
    height: 430px;
    overflow-y: hidden;
      padding-top: var(--divpad);
    background-repeat: repeat-x;
    background-image: var(--divider);
}



/****** Music ******/
#window8 {
    top: 340px;
    left: 695px;
}
#window8 .wincontent {
    width: 260px;
    height: 160px;
    overflow-y: hidden;
}

/****** links ******/
#window9 {
    top: 169px;
    left: 450px;
}

#window9 .wincontent {
    width: 320px;
    height: 250px;
    overflow-y: auto;
     padding-top: var(--divpad);
    background-repeat: repeat-x;
    background-image: var(--divider);
}

/****** projects2 ******/
#window10 {
    top: 0px;
     left: 145px;
}

#window10 .wincontent {
    width: 950px;
    height: 520px;
    overflow-y: hidden;
}

/****** sonas ******/
#window11 {
    top: 0px;
    left: 145px;
}

#window11 .wincontent {
   width: 200px;
    height: 300px;
    font-family: "Silkscreen";
    font-weight: bold;
    font-size: 12px;
   
   
}

/****** Sketchbook ******/
#window12 {
    top: 0px;
    left: 145px;
}

#window12 .wincontent {
    width: 860px;
    height: 510px;
    overflow-y: hidden;
}

/****** Calendar ******/
#window13 {
    top: 180px;
    left: 685px;
}

#window13 .wincontent {
    width: 300px;
    height: 320px;
    overflow-y: hidden;
    
}
/****** sitemap ******/
#window14 {
    top: 20px;
    left: 15px;
}

#window14 .wincontent {
    width: 280px;
    height: 320px;
    overflow-y: auto;
      padding-top: var(--divpad);
    background-repeat: repeat-x;
    background-image: var(--divider);
}
#window14 a {
    font-family: "Silkscreen";
    font-size: 12px;
    color: var(--link);
    text-decoration: none;
}

#window14 a:hover {
    color: var(--linkH);
}


/****** oldupdates ******/
#window15 {
    top: 20px;
    left: 695px;
}

#window15 .wincontent {
   
    width: 280px;
    height: 170px;
      padding-top: var(--divpad);
    background-repeat: repeat-x;
    background-image: var(--divider);
}

/****** Brushes ******/
#window16 {
    top: 15px;
    left: 130px;
}

#window16 .wincontent {
    width: 550px;
    height: 420px;
    overflow-y: hidden;
      padding-top: var(--divpad);
    background-repeat: repeat-x;
    background-image: var(--divider);
}

.frame {
    display: block;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
}

.start-button {
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 16px;
    background-color: var(--darkaccent);
    font-family: "Press Start 2P";
    font-size: 24px;
    font-weight: bold;
    text-align: left;
    color: var(--menufont);
    border: none;
    width: 130px;
    height: 45px;
    cursor: pointer;
}

.start-menu {
    display: none;
    width: 240px;
    background-color: var(--bkgrnd);
    border: 1px solid #B4B4B4;
    border-radius: 4px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    padding: 5px;
    position: absolute;
    bottom: 55px;
    left: 0px;
    z-index: 999;
    font-size: 13px;
}

.profile-section {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}

.profile-section .profile-picture {
    background-image: var(--prfileimg);
    width: 100px;
    height: 100px;
    border: 1px solid var(--border);
    background-size: cover;
    margin-right: 10px;
    cursor: pointer;
}

.profile-section .username {
    font-weight: bold;
    font-family: "Silkscreen";
    color: var(--darkaccent);
}
.menu-items {
    list-style: none;
    padding: 0;
}

.menu-items li {
    margin: 5px 0;
    position: relative;
}

.menu-items li a {
    text-decoration: none;
    color: var(--menufont2);
    padding: 2px;
    display: block;
    border-radius: 4px;
    cursor: pointer;
}

.menu-items li a:hover {
    background-color: var(--menuhover);
}

.has-submenu {
    position: relative;
}
.submenu {
    display: none;
    position: absolute;
    top: 80%; 
    left: 100%;
    transform: translateY(-75%); 
    background-color: var(--bkgrnd);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 5px;
    list-style: none;
    margin-left: 8px;
    width: 150px;
    min-height: 250px;
    height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 999;
}


.submenu li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 1px 0;
}

.submenu li a {
    text-decoration: none;
    color: var(--menufont2);
    padding: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
}

.submenu li a:hover {
    background-color: var(--menuhover);
}

.has-submenu:hover .submenu,
.submenu:hover {
    display: block;
}

.start-menu.visible {
    display: block;
}

.start-menu.show {
    display: block;
}

.show {
    display: block;
    position: absolute;
    bottom: 100%;
    margin-bottom: 0;
}


.copyButton {
    width: 150px;
    font-size: 10px;
    background-color: var(--lightaccent2);
    color: #ffffff;
    height: 35px;
    margin-bottom: 0px;
}

#taskbar {
    position: fixed;
    height: 45px;
    border-top: 2px solid var(--border);
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--accent);
    z-index: 9999;
}

#tray {
    display: flex;
    position: absolute;
    z-index: 90;
    right: 0;
    height: 45px;
    bottom: 0;
    margin: 0;
    padding: 0;
    background-color: var(--lightaccent);
    align-items: center;
    justify-content: space-between;
}

#tray-icons {
    display: flex;
    flex: 1;
    margin-left: 10px;
}

#clock-container {
    font-family: Courier New;
    color: #333;
    background-color: var(--lightaccent);
    margin: 0;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right: 2px;
}

#clock {
    font-size: 15px;
    color: var(--clockfont);
    font-weight: bold;
    line-height: 1;
}

#date {
  position: relative; 
    font-size: 12px;
    font-family: Courier New;
    color: var(--clockfont);
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
}

#date a {
    text-decoration: none; 
    color: inherit; 
    cursor: pointer;
}




.THMbutton {
    background-color: var(--lightaccent);
    border: none;
    color: var(--font);
    width: 70px;
    height: 40px;
    font-size: 11px;
    text-align: center;
    margin-right: 2px;
}
.THMbutton option {
         color: var(--font);
        font-family: Courier New;
        font-size: 14px;
        background-color: var(--lightaccent);  
        
    }
    .THMbutton option:hover {
        background-color: var(--lightaccent);
        font-weight: bold;
       
    }


/* SCROLLBAR */
* {
  scrollbar-width: thin;          
  scrollbar-color:var(--lightaccent) transparent; 
}

 .openProject {
    margin: 5px;
    text-align: center;
    position: relative;
    display: inline-block;
    vertical-align: top; 
    font-family: "courier new";
    font-size: 14px;
}

.openProject img {
    display: block;
    margin: 0 auto;
}

.openProject:hover .infotext {
    visibility: visible;
    opacity: 1;
}

.infotext {
    visibility: hidden;
    width: 145px;
    background-color: #eeee;
    color: #000;
    text-align: center;
    font-family: "courier new";
    font-size: 12px;
    border: 1px dotted #000000;
    padding: 2px 0;
    position: absolute;
    z-index: 200;
    top: 0;
    left: 55%;
    margin-left: -69px;
    opacity: 0;
    transition: opacity 0.3s;
}

details {
background: transparent;
width: 100%; 
overflow-x: hidden;
color: #000000;
line-height: 20px;
opacity: 0.9;
margin-top: 2px;
margin-bottom: 8px;
right: 0px;
position: relative; 
}

details>summary::before  {
  width: 20px;
  height: 20px;
  margin-left: 1px;
  display: inline-block;
  transition: 0.2s;
  content: url("https://heathersaturnia.neocities.org/pxls/blog/a-right.gif");
}

details[open] summary::before {
  transform: rotate(90deg);
}
summary {
display: flex;
height:25px;
cursor: pointer;
background-color: transparent; 
font-family: "Silkscreen"; 
font-size: 17px;
font-weight: bold;
}

#loading {
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    z-index: 10000;
    background-color: var(--bodybkgrnd);
    color: var(--link);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    font-size: 60px;
}

#loading p {
    color: var(--link);
    font-family: "Silkscreen";
    font-size: 24px;
    text-align: center;
    display: block;
    clear: left;
    margin-top: 10px;
}