.top {
    background: linear-gradient(to bottom, 
      var(--bg-top-start), var(--bg-top-end));
}
.contact {
    background: linear-gradient(to bottom, 
      var(--bg-top-end), var(--bg-contact-end));
    color: var(--cl-panel);
}
.menu {
    background: linear-gradient(to bottom, 
      var(--bg-top-end), var(--bg-contact-end));
    color: var(--cl-panel);
}
.footer {
    background: linear-gradient(to bottom, 
      var(--bg-contact-end), var(--bg-top-start));
    background-color: var(--bg-panel);
    color: var(--cl-panel);
}
.container {
   background: var(--bg-main);
}
.content {
   background: var(--bg-panel);
}
#theme-toggle {
   background: none;
}
a, a:visited {
   color: var(--cl-links);
   text-decoration: none;
   border-bottom: 1px dashed transparent;
   transition: border-color .6s ease;
}
a:hover {
   color: var(--cl-lk-hover);
   border-bottom: 1px solid var(--cl-lk-hover);
}
h1 {
   color: var(--cl-h1);
    font-size: 1.5rem;
    margin: 1rem 0;
}

h2 {
   color: var(--cl-h2);
   font-size: 1.2rem;
}
h3 {
   color: var(--cl-h3);
   font-size: 1rem;
}
h4 {color: var(--cl-h4);}

.contact.open + #contact-bar, 
.menu.open + #menu-bar {
    color: var(--cl-lk-hover);
   background-color: var(--bg-top-end);
}
.menu-block {
   color: #ccc;
}
.contact-title {
   color: #ccc;
   /*background-color: var(--cl-bg);*/
}
.gnu, .tux, .deb {
   content: "";
   display: inline-block;
   width: 50px;
   height: 50px;
   transition: background-color .5s ease;
   background-color: var(--cl-links);
   margin: 0 8px 0 10px;
}
.gnu {
   -webkit-mask: url("/images/gnu.svg") no-repeat center / contain;
   mask: url("/images/gnu.svg") no-repeat center / contain;
}
.tux {
   -webkit-mask: url("/images/tux.svg") no-repeat center / contain;
   mask: url("/images/tux.svg") no-repeat center / contain;
}
.deb {
   -webkit-mask: url("/images/deb.svg") no-repeat center / contain;
   mask: url("/images/deb.svg") no-repeat center / contain;
}
a:has(> .gnu),
a:has(> .tux),
a:has(> .deb),
a:has(> .gnu):visited,
a:has(> .tux):visited,
a:has(> .deb):visited,
a:has(> .gnu):hover,
a:has(> .tux):hover,
a:has(> .deb):hover,
a:has(> img.logo),
a:has(> img.logo):visited,
a:has(> img.logo):hover,
a:has(> img.domosys-org),
a:has(> img.domosys-org):visited,
a:has(> img.domosys-org):hover {
    border-bottom: none;
}
a:hover .gnu,
a:hover .tux,
a:hover .deb {
   background-color: var(--cl-lk-hover);
}

