/**************/
:root {
 --pico-blue: #4ca7fa;
 --dark-red: #b02a1f;
 --faves-blue: #007bff;
 --light-blue: #3bb0ff;
 --pale-blue: #96aee1;
 --light-grey: #efefef;
 --dark-grey: #444;


/* define theme colours */
/* purple */
  --purple-theme-text: #a559ff;
  /*--purple-theme-bg: #000;*/
  --purple-theme-name: purple;
 
 /* tomato */
  --tomato-text: tomato;
  /*--tomato-bg: #444;*/
  --tomato-theme: tomato;
  
  --sans-font: sans-serif;
  /*--sans-font-color: green;*/
  --serif-font: serif;
  /*--serif-font-color: red;*/
  --specialelite-font: "Special Elite";
  --notepaper-font: "NotePaper"; 
  --mysteryquest-font: "Mystery Quest"; 
  --yatsurano-western-font: "Yatsurano Western";  
  --greenfuz-font: "GreenFuz";  
  --avqest-font: "AvQest";
  --metalmania-font: "MetalMania";
}


/* keep */
@font-face {
  font-family: "NotePaper";
  src: url('../fonts/note-paper/NotePaper-regular.otf') format('opentype');
}
@font-face {
  font-family: "MetalMania";
  src: url('../fonts/metal-mania/MetalMania-Regular.ttf') format('truetype');
}

/* REQUIRES letter-spacing: .3rem; to be easily readable */
@font-face {
  font-family: "GreenFuz";
  src: url('../fonts/green-fuz/GreenFuz.otf') format('opentype');
}

@font-face {
  font-family: "Yatsurano Western";
  src: url('../fonts/yatsurano-western/gomarice_yatsurano_western.ttf') format('truetype');
}


/* keep */
@font-face {
  font-family: "AvQest";
  src: url('../fonts/avqest/AvQest.ttf') format('truetype');
}

/* Better with letter-spacing: 2px; */
@font-face {
  font-family: "Special Elite";
  src: url('../fonts/special-elite/SpecialElite.ttf') format('truetype');
}

/* keep */
@font-face {
  font-family: "Mystery Quest";
  src: url('../fonts/mystery-quest/MysteryQuest-Regular.ttf') format('truetype');
}



/* REQUIRES letter-spacing: 0.2rem; */
@font-face {
  font-family: "Canterbury";
  src: url('../fonts/canterbury/Canterbury.ttf') format('truetype');
}

/*Nope*/
/*@font-face {
  font-family: "Starburst";
  src: url('../fonts/starburst/Starburst.ttf') format('truetype');
}*/



/* font switching classes */

/* in db only store class name without -font which is by javascript */

.metalmania-font h1, .metalmania-font h2, .metalmania-font h3, .metalmania-font-label {
  font-family: var(--metalmania-font);
  /*letter-spacing: 1px;*/
} 
.yatsuranowestern-font h1, .yatsuranowestern-font h2, .yatsuranowestern-font h3, .yatsuranowestern-font-label {
  font-family: var(--yatsurano-western-font);
  letter-spacing: 1px;
} 

.avqest-font h1, .avqest-font h2, .avqest-font h3, .avqest-font-label {
  font-family: var(--avqest-font);
  /*letter-spacing: 1px;*/
}
.greenfuz-font h1, .greenfuz-font h2, .greenfuz-font h3, .greenfuz-font-label {
  font-family: var(--greenfuz-font);
  letter-spacing: 1px;
}
.specialelite-font h1, .specialelite-font h2, .specialelite-font h3, .specialelite-font-label {
  font-family: var(--specialelite-font);
  letter-spacing: 1px;
}
.notepaper-font h1, .notepaper-font h2, .notepaper-font h3, .notepaper-font-label {
  font-family: var(--notepaper-font);
}
.mysteryquest-font h1, .mysteryquest-font h2, .mysteryquest-font h3, .mysteryquest-font-label {
  font-family: var(--mysteryquest-font);
  letter-spacing: 1px;
}

.serif-font h1, .serif-font h2, .serif-font h3, .serif-font-label {
  font-family: var(--serif-font);
  /*color: var(--serif-font-color);*/
}

.sans-font h1, .sans-font h2, .sans-font h3, .sans-font-label {
  font-family: var(--sans-font);
  /*color: var(--sans-font-color);*/
}

/* end font switching definitions */




/* Writing As help styling */
.writing-as-container {
  margin-bottom: 1.5rem;
  position: relative;
}

.writing-as-header-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.writing-as-label {
  font-weight: 600;
  margin-right: 0.5rem;
}

.help-toggle {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  color: var(--faves-blue);
  cursor: pointer;
  height: 0.9rem;
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: background-color 0.2s;
}

button.help-toggle {
  background-color: var(--faves-blue);
}
.help-toggle:hover {
  background-color: var(--faves-blue);
}

.help-icon {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.25rem;
}

.help-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out;
  opacity: 0;
  margin: 0;
  border-radius: 6px;
  background-color: #f8f9fa;
  border-left: 3px solid #0088cc;
}

.help-panel.visible {
  max-height: 300px;
  opacity: 1;
  margin-bottom: 1rem;
}

.help-content {
  padding: 1rem;
}

.help-content p {
  margin: 0 0 0.75rem 0;
  line-height: 1.5;
}

.help-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.example-chip {
  background-color: #e9ecef;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.example-chip:hover {
  background-color: #dee2e6;
}

.remember-preference {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  color: #6c757d;
}

.remember-preference input {
  margin-right: 0.5rem;
}

/* Dark theme adjustments */
[data-theme="dark"] .help-panel {
  background-color: #2a2a2a;
  border-left: 3px solid #0088cc;
}

[data-theme="dark"] .example-chip {
  background-color: #3a3a3a;
}

[data-theme="dark"] .example-chip:hover {
  background-color: #444;
}

[data-theme="dark"] .help-toggle:hover {
  background-color: rgba(0, 136, 204, 0.2);
}
/* ===== */

.faves-border {
  /*border: 1px solid var(--pale-blue);*/
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
  border-radius: 20px;
  padding-bottom: 1rem;
}
.post-border {
  /*border: 1px solid var(--pale-blue);*/
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
  border-radius: 20px;
  padding: 1.3rem;
  margin-bottom: 1rem;
}

[data-theme="dark"] .faves-border {
  /*border: 1px solid var(--pale-blue);*/
  /*box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.4), 0 3px 10px 0 rgba(255, 255, 255, 0.39);*/
  border-radius: 20px;
  padding-bottom: 1rem;
}

[data-theme="dark"] .post-border {
  /*border: 1px solid var(--pale-blue);*/
  /*box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.4), 0 3px 10px 0 rgba(255, 255, 255, 0.39);*/
  border-radius: 20px;
  padding: 1.3rem;
  margin-bottom: 1rem;
}



[role="button"],  [type="button"] {
  background-color: var(--faves-blue);
}

#list-form, #post-form {
  margin: 1rem 0 1rem 0;
}

.list-container {
    /*margin: 1rem 0;*/
}

.list-item {
  margin-bottom: 1rem;
  padding: 1rem;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
  border-radius: 20px;
}

[data-theme="dark"] .list-item {
  background-color: var(--dark-grey);
}

.list-item:last-child {
    border-bottom: none;
}

.list-item h3 {
    margin-bottom: 0.5rem;
}

.list-item-description {
    margin-top: 0.5rem;
}

.list-items-editor {
    margin: 2rem 0;
}

.list-item-edit {
    margin-bottom: 2rem;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.list-item-edit h3 {
    margin-bottom: 1rem;
    color: #666;
}

.list-item-edit input[type="text"],
.list-item-edit textarea {
    width: 100%;
    margin-bottom: 1rem;
}

/*.list-item-edit textarea {
    min-height: 550px;
}*/


.category-modal-buttons button {
  padding: 0.75em 0.75em;
  font-size: 1.2em;
}



#dark-light-theme-switch {
  margin-top: 5px;
  margin-bottom: 25px;
  cursor: pointer;
}
p.dialogue {
  text-indent: -1em;
  padding-left: 1.3em;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem
}


input[name="account-choice"] {
  margin: 10px;
}

/* navbar */
.icon-grid-container {
    display: grid;
 grid-template-columns: repeat(3, auto);    
    grid-gap: 15px;
    padding: 10px 0 10px 0;
    max-width: 600px;
    margin: 0 auto;
}




.media-upload-container {
  margin-bottom: 10px;
}

#addMediaBtn {
  padding: 6px 12px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#addMediaBtn:hover {
  background-color: #45a049;
}

#uploadProgress {
  margin-top: 10px;
}

#uploadProgress progress {
  width: 100%;
  height: 20px;
}

#progressText {
  margin-left: 5px;
}

.audio-player-wrapper {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.audio-player-wrapper audio {
  width: 100%;
}

.copy-btn {
  padding: 2px 6px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}

.copy-btn:hover {
  background-color: #e0e0e0;
}

/* end media upload styles */




#top-message > p {
  font-size: 1.2rem;
  font-weight: 500;
  /*background-color: orange;*/
  /*color: black;*/
  padding: 10px;
  border: 3px dotted var(--faves-blue);  
  border-radius: 15px;
  cursor: pointer;
  margin: 2rem;
}
#bio-prompt, #write-prompt {
  text-decoration: underline;
}

#signup-section {
  margin: 1rem 0 2.5rem 0;
}


#more-posts-wrapper {
 margin-top: 4rem; 
}
.more-posts-section {
 margin-top: 3rem; 
}



#more-button {
 margin-top: 50px;
}

#hero-expectations li {
  list-style-type: none;
  margin-top: 1.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2.0rem;
}


.subscribe-card {
 /*margin: 2rem;*/
 background-color: var(--faves-blue);
 color: white;
}


@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */
 #entries-wrapper {
   width: 90%;
   margin-left: 1rem;
 }
}
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ 
}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ 
}
@media (min-width:1281px) { /* hi-res laptops and desktops */ }


.newsletter-form {
  margin-top: 4rem;
  margin-bottom: 4rem;
  border: 3px dotted var(--faves-blue);
  padding: 30px;
  border-radius: 15px;
}


#newsletter-button {
 background-color: var(--faves-blue);
}

a.large-text {
  font-size: 1.5rem;
  line-height: 1.75rem;
  font-weight: 600;
}
.small-text {
  font-size: 0.9rem;
  line-height: 1.1rem;
}

#dark-light-mode-switch {
  margin: 10px;
}

button {
  background-color: var(--faves-blue);  
}

#category-button-filters, #edit-category-buttons {
  display: flex;
  flex-wrap: wrap;
  /*justify-content: space-evenly;*/
  /*align-content: space-around;*/
}


.category-switch, .edit-entry-category-switch, .edit-entry-font-switch, .create-entry-font-switch, .create-list-font-switch, .create-entry-category-switch, .create-list-category-switch, .create-entry-template-switch { /* Hides the radio buttons */
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

.category-switch-label, .edit-entry-category-switch-label, .edit-entry-font-switch-label, .create-entry-category-switch-label, .create-list-category-switch-label, .create-entry-font-switch-label, .create-list-font-switch-label, .create-entry-template-switch, .create-entry-template-switch-label  {
  font-weight: 600;
  border: 2px solid #c9c9c9;
  border-radius: 10px;
  cursor: pointer;
  margin: 15px 7px 15px 7px;
  padding: 8px 12px;
  transition: box-shadow .2s, border .2s;
}


.category-switch:focus + .category-switch-label,
.edit-entry-category-switch:focus + .edit-entry-category-switch-label, .edit-entry-category-switch:checked + .edit-entry-category-switch-label, .edit-entry-font-switch:focus + .edit-entry-font-switch-label, .edit-entry-font-switch:checked + .edit-entry-font-switch-label, 
.create-entry-category-switch:focus + .create-entry-category-switch-label, .create-entry-category-switch:checked + .create-entry-category-switch-label, .create-list-category-switch:focus + .create-list-category-switch-label, .create-list-category-switch:checked + .create-list-category-switch-label, .create-entry-font-switch:focus + .create-entry-font-switch-label, .create-entry-font-switch:checked + .create-entry-font-switch-label, .create-entry-list-switch:focus + .create-list-font-switch-label, .create-list-font-switch:checked + .create-list-font-switch-label, .category-switch-label:hover, .edit-entry-category-switch-label:hover, .edit-entry-font-switch-label:hover, .create-entry-category-switch-label:hover, .create-list-category-switch-label:hover,.create-entry-font-switch-label:hover ,.create-list-font-switch-label:hover, .create-entry-template-switch:focus + .create-entry-template-switch-label, .create-entry-template-switch:checked + .create-entry-template-switch-label, .create-entry-template-switch-label:hover {
  /*box-shadow: 0 0 10px var(--faves-blue);*/
  border: 2px solid var(--faves-blue);
  border-radius: 10px;
}


/**** define theme classes *****/
/* purple mode */
.purple h1,.purple h2,.purple p {
  color: var(--purple-theme-text);
}
/*.purple {  
 background-color: var(--purple-theme-bg);
}*/

/* tomato mode */
.tomato h1,.tomato h2,.tomato p {
  color: var(--tomato-theme-text);
}
/*.tomato {  
 background-color: var(--tomato-theme-bg);
}*/

.single-publication-header {
  background-color: var(--light-blue);
  padding: 20rem;
  margin-bottom: 2rem;
  border-radius: 10px;
}
.faves-blue {
 color: var(--faves-blue);
}
a.faves-button, .faves-button {
  margin-top: 2rem;
  background-color: var(--faves-blue);
}
.groups-button {
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  background-color: var(--faves-blue);
}
.publication-list {
   padding: 2.5rem;
}
.publication-list > a {
  background-color: var(--faves-blue);
  font-weight: 500;
}

.author-name {
 font-weight: 600;
}


#testaccount-div > details {
 text-align: center;
 width: 90%;
 background-color: var(--faves-blue);
 margin: 30px 5px 50px 5px;
 padding: 15px 15px 0 15px;
 border-radius: 20px;
}
#testaccount-div > details > h2 {
    color: WhiteSmoke;
  }
#testaccount-div > details > h3 {
    color: WhiteSmoke;
}
#testaccount-div > details > p {
    color: WhiteSmoke;
    font-size: 1.0rem;
}
#testaccount-div > details > summary {
    color: WhiteSmoke;
    font-size: 1.0rem;
}


.delete-compilation {
 border: 1px solid var(--dark-red);
 border-radius: 10px;
 padding: 18px 10px 18px 12px;
 margin-left: 25px;
 cursor: pointer;
}

.bottom-dynamic-edit-button, #static-save-button, #static-preview-button, #add-image-markdown {
  margin-right: 20px;
  background-color: var(--faves-blue);
}

.top-dynamic-edit-button {
  margin-bottom: 25px;
  background-color: var(--faves-blue);
}

.close-view-top-button {
  float: right;
  font-size: 1.1rem;
}

.close-view-bottom-button {
  width: 95%;
  margin: 20px 10px 10px 10px;
  font-size: 1.1rem;
}

.suggestions {
    background-color: #ffedc6;
    color: black;
    border: 1px solid #ccc;
    margin-bottom: 3px;
    border-radius: 4px;
    padding: 5px;
    /*z-index: 1000;*/
    line-height: 1.75rem;
  }
  .suggestions div {
    cursor: pointer;
  }


.private-entry {
  border: 3px dotted var(--faves-blue);
  padding: 30px;
  border-radius: 15px;
}

.publication-div {
  margin-top: 2em;
  margin-bottom: 3em;
}

button.entry-params {
margin-left: 10px;
padding: 4px 10px 4px 0px;
}
.archive-switch {
 margin-top: 1em;
 margin-left: 5px;
 /*margin-right: 5px;*/
}
.medium-bold {
  font-size: 1.2rem;
  font-weight: bold; 
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 100px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}
a.link-hilight {
  max-width: 110px;
  text-decoration: none;
  background-color: #3170A8;
  color: white;
  padding: 7px;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
}
/* HTML anchors must be displayed as in-line block, or they will not accept margins */
a.entry-author-link {
  display: inline-block;
}
div.report-post-link {
  float: right;
  font-size: 0.8rem;
  margin-bottom: 1.5rem;
}

h1 {
	color: green;
	border-color: green;
}
a.blue {
  color: var(--faves-blue);
	border-color: var(--faves-blue);
  text-decoration: none;
}
h1.blue {
	color: var(--faves-blue);
	border-color: var(--faves-blue);
}
.entry-author-link {
  font-size: 1.0rem;
  /*color: #4ca7fa;*/
  margin-bottom: 25px;  
  font-weight: bold;
  cursor: pointer;
  text-decoration: underline;  
}
.entry-submission-link {
  font-size: 1.1rem;
  color: green;
  margin-bottom: 10px;  
  font-weight: bold;
}

.pointer {cursor: pointer;}


/* navigation bar icons */
.icon-text {
  text-align: center;
  font-size: 0.9rem;
  /*color: var(--faves-blue);*/
}

.selected-icon {
 border-radius: 10px;
 border: 2px solid var(--faves-blue);
}

a.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;    
  text-align: center;
  /*background-color: #f1f1f1;*/
  /*color: #efefef;*/
  text-decoration: none;
 border-radius: 10px;
  transition: background-color 0.5s ease;
	cursor: pointer;
  /*margin-bottom: 5px;*/
}

a:hover {
 cursor: pointer;
 /*border: 2px dotted;*/
border-radius: 10px;
/*  background-color: #5fc9ff;
  color: black;*/
}

/* Set the fill color for the SVG when the link is hovered */
a:hover svg path {
	cursor: pointer;
border-radius: 10px;
/*border: 2px dotted; */
/*    background-color: #5fc9ff;
    color: black;*/
  }

svg {
 width: 28px;
 height: 28px;
}


  
/* start activity calendar with css grid layout */
.date-range-text {
 font-size: 1.0em; 
 margin-left: 4ch;
 color: #555555;
}
.arrow {
  border: solid #777777;
  border-width: 0 4px 4px 0;
  display: inline-block;
  padding: 1ch;
  margin-left: 7ch;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  margin-right: 6em;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.calendar {
width: 200px;
display: grid;
grid-template-columns: repeat(7, 5ch); 
grid-template-rows: repeat(5, 5ch); 
grid-gap: 2.5px;
/*margin-top: 0.5em;*/
}
.calendar-nav {
 margin-top: 1.5rem;
}
.item {
  background: #ebebeb;
  border: 1px solid #555555;
  border-radius: 30px;
  color: #777777;j
  font-size: 1.3rem;
  padding-top: 7px;
  text-align: center;
}
.weekday {
  margin-top: 0.5em;
  background: unset;
  border: unset;
}
.calendar-author-name {
  color: #4ca7fa;
  font-size: 1.2em;
  /*text-decoration: underline;  */
  margin-left: 2ch;
  text-align: left;
  margin-bottom: 1rem;
  margin-top: 4rem;
  font-weight: bold;
}
.date-range {
  font-size: 1.2rem;
  margin-left: 2ch;
  text-align: left;
}
.today {
   border: 3px solid #c11111; 
}
.activity {
  background: green;
  color: #ffffff;
}
/* end activity calendar */


.border {
  border: 1px solid #999;
}

#cty-message {
  margin: 2em 1em 2em 1em;
  text-align: center;
}
details {
  width: 35ch;
}
details.expand-preview {
  width: 100%;
  margin-bottom: 2rem;
}
details#account, details#community-links {
  width: 15ch;
}

summary {
  padding-bottom: 1em;
}
.sorting {
  padding: 5px;
  font-size: 1.2rem;
  border: 1px solid #999;
}

.entry-title {
  font-size: 2.0rem;
  line-height: 2.2rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.entry-section {
margin-bottom: 4em;
}
.entry-section:not(:first-child) {
  padding-top: 2em;
}
.entry-section:first-child {
  padding-top: 1em;
}

#activity-accordion {
  padding-top: 2em;
  margin-bottom: 4em;
}

.entry {
/*border: 1px solid #777;*/
/*border-radius: 10px;*/
/*padding: 20px;*/
margin: 0.5em 1em 1em 1em;
}

.drop-down {
  width: 13rem;
  margin-right: 1rem;
}

/*#category-filter-select {
    font-size: 1.25rem;
    line-height: 2rem;
    padding-right: 10px;
    padding-left: 5px;
}*/

.comment {
  margin-bottom: 1em;
  padding: 1em;
}
.comment-author {
  font-size: 0.8rem;
  margin-top: 1em;
}
.delete-comment {
margin-bottom: 2em;
padding: 3px;
}

html {
  scroll-behavior: smooth;
}

#create-entry, #pick-username {
  display: none;
}
footer {
 margin-top: 10em;
 margin-bottom: 1em;
 text-align: center;
 font-size: 1rem 
}
.category, .edit-delete-save {
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 7px;
}
#category-filter {
 margin-top: 5rem; 
}
button.red {
 background-color: red;
 color: white;
}
.selected {
border-color: orange;
border-width: 2px;
}


.category {
  margin-bottom: 5px;
}
/*a#login {
  background-color: #4CBB17;

  width: 200px;
}*/
button#pick-username-button {
  background-color: #4CBB17;
}
#pick-username-entry, #new-blog-name, #blogname-create-user {
  width: 21ch;
  margin-right: 10px;
}



/*
  floating button With link to contact form 
*/

#floating-button a {
  color: white;
}
#floating-button {
  position: fixed;
  bottom: 30px;
  right: 20px;
  z-index: 999;
  background-color: #007bff;
  color: #fff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}

#floating-button:hover {
  background-color: #0062cc;
}

#floating-button a {
  display: block;
  width: 100%;
  height: 100%;
}

#floating-button i {
  font-size: 30px;
}

#floating-button span {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}
/* assistive technologies. sr stand for screen reader */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}




/* Styles for the create submenu */
.submenu {
  display: none;
  position: absolute;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  z-index: 1000;
  width: 170px;
  overflow: hidden;
  margin-top: 10px;
}

.submenu.active {
  display: block;
}

.submenu-option {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.submenu-option:hover {
  background-color: #f5f5f5;
}

.submenu-option svg {
  width: 20px;
  height: 20px;
  margin-right: 12px;
}

/* For dark theme compatibility */
[data-theme="dark"] .submenu {
  background-color: #333;
  border-color: #444;
}

[data-theme="dark"] .submenu-option:hover {
  background-color: #444;
}

[data-theme="dark"] .submenu-option {
  color: #eee;
}