* {
    transition: all 0.2s ease-in-out;

    --A-default-color: #cd5ba7;
    --A-bg-color: rgb(215, 215, 215);
    --A-high-color: rgb(57, 57, 245);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
.second #stylecontroller:hover {
  background: var(--A-bg-color);
  border: 1px solid var(--A-high-color);
  color: var(--A-default-color);
}
.third #stylecontroller:hover {
  background: var(--B-bg-color);
  border: 1px solid var(--B-high-color);
  color: var(--B-default-color);
}

/* FIRST STYLE */
    .first {
        background: var(--A-bg-color);
        color: var(--A-default-color);
        font-size: 18px;
        font-family: Times, 'Times New Roman', serif;
    }
    .first h3, .first .title, .first a, .first #stylebar span, .first #expand span,  .first #statebar a, .first .toggler {
        color: var(--A-high-color);
        font-size: 1em;
        text-decoration: none;
        cursor: pointer;
        }
    /* Barfooter */ 
        .first #barfooter > div, noscript #statebar  {
            border-bottom: 1px solid var(--A-default-color);
            border-right: 1px solid var(--A-default-color);
            background: var(--A-bg-color);
            box-shadow: 5px 3px 2px rgba(57, 57, 245, 0.25);
            padding: 0.25em;
            opacity: 1;
        }
        .first #statebar {
            border-top: 1px solid var(--A-default-color);
        }
        .first #statebar, .first #stylebar, .first #expand {
            border-left: 1px solid var(--A-default-color);
        }
        .first #barfooter div div {
            border-top: 0px;
            border-bottom: 0px;
            border-right: 1px solid var(--A-default-color);
            border-left: 0px;
            padding: 0.25em;
        }
        .first #barfooter div div:last-child {
            border-right: 0px solid var(--A-default-color);
          }
        .first #infobartoggle > p {
            background: var(--A-high-color);
            color: white;
            width: 1.5em;
            height: 1.5em;
            font-size: 0.75em;
            font-weight: bold;
            display: inline-block;
            text-align: center;
            vertical-align: middle;
            border-radius: 0.75em;
            box-sizing: border-box;
            padding: 0.25em 0 0 0;
            transition: transform 5s linear;
            }
        .first #infobartoggle:hover > p {
            transform: rotate(180deg);
            transition: transform 5s linear;
        }
        .first #infobartoggle.invisible > p {
            padding: 0.15em 0 0 0;
            background: var(--A-default-color);
        }
    /* sediments */
        .first #sediments {
            background: rgba(215, 215, 215, 0.75);
        }
        .first #sediments div, .first #about {
            border: 1px solid var(--A-default-color);
            background: var(--A-high-color);
            box-shadow: 5px 3px 2px rgba(57, 57, 245, 0.25);
            color: var(--A-bg-color);
            opacity: 1;
        }
        .first #sediments div a, .first #about a, .first #about select, .first #sediments select {
            color: var(--A-bg-color);
            text-decoration: underline;
            text-decoration-color: var(--A-default-color);
            text-decoration-thickness: 2px;
        }
        .first #about .select::after, .first #sediments .select::after {
            color: var(--A-default-color);
        }
        .first #sediments div .timestamp {
            color: var(--C-default-color);
        }
        .first #sediments div .anchor {
            color: black;
        }
    /* Tippy Box */
        .first #sediments [data-tippy-style~='temp'] {
          color: var(--A-default-color);
          border: 1px dotted var(--A-default-color);
          padding: 1px;
          display: inline-block;
        }
        .first .tippy-box[data-theme~='fritzweb'], .first .tippy-box[data-theme~='fritzwebperm'] {
            background-color: var(--A-bg-color);
            border: 1px solid var(--A-default-color) !important;
            box-shadow: 5px 3px 2px rgba(57, 57, 245, 0.25);
            border-radius: 0;
            font-size: 1em;
            line-height: 1.25em;
        }
        .first .tippy-box[data-theme~='fritzweb'] .tippy-content {
            padding: 0em 0em 0px 0em;
            margin-bottom: -6px;
            color: var(--A-default-color);
        }
        .first .tippy-box[data-theme~='fritzwebperm'] .tippy-content {
            padding: 1em;
            color: var(--A-high-color);
        }
        .first .tippy-box[data-theme~='fritzwebperm'] .tippy-content a, .first .tippy-box[data-theme~='fritzwebperm'] .tippy-content select, .first .tippy-box[data-theme~='fritzwebperm'] .tippy-content .select:after {
            color: var(--A-default-color);
        }
    /* Liste */
        .first #liste li a {
            transition: color 0s, text-decoration-color 0s; 
        }
        .first #liste li a:before {
            content: ' ';
            width: 0.3em;
            height: 0.3em;
            border-radius: 0.6em;
            border: 1px solid black;
            background: white;    
            margin: 0 0.25em 0 0;
            display: inline-block;
            vertical-align: middle;
        }
        .first #liste li a:visited:before {
            background: #000;
            border-color: white;
        }
        .first #liste li a:hover:before {
            background: white;
            border: 0.05em solid black;
        }  
        .first #liste li a:hover {
            color: black !important;
            transition: color 0s, text-decoration-color 0s;
            text-decoration-color: white;
        }
        .first #liste li a:hover + span, .first .externalmarker {
            color: black;
            text-shadow: 0px 1px 0px white;
            transition: color 0s, text-decoration-color 0s;
        }
        .first #liste li span {
            transition: color 0s, text-decoration-color 0s;
        }
        .first #liste li a:visited, .first #liste li a, .first  p#sortfield span {
            color: var(--A-high-color);
            cursor: pointer;
        }
        .first .select, .first .select select {
            color: var(--A-high-color);
        }
    /* Wheel of Fortunes */
        body.first.go:before {
            color: var(--A-bg-color);
            text-stroke: 1px var(--A-default-color);;
            -webkit-text-stroke: 1px var(--A-default-color);
            text-shadow: 5px 3px 2px rgba(57, 57, 245, 0.25);
        }
        @keyframes firstlightflash {
        0% {
            background: var(--A-bg-color);
        }
        50% {
            background: var(--A-default-color);
        }
        100% {
            background: var(--A-high-color);
        }
        }
        @keyframes firstshadow {
            0% {
            box-shadow: 0px 0px 0px rgba(57, 57, 245, 0.25);
            z-index: 1;
            }
            100% {
            box-shadow: 5px 3px 2px rgba(57, 57, 245, 0.25);
            z-index: 2;
            }
        }
        .first #liste.wheel li {  
            border-top: 1px solid var(--A-default-color);
            border-left: 1px solid var(--A-default-color);   
            border-right: 1px solid var(--A-default-color);
            border-bottom: 1px solid var(--A-default-color);
        }
        .first #liste.wheel li:not(.flash) {  
            box-shadow: none !important;
            background: transparent !important;
            }
        .first .flash {
            animation: 0.2s linear 6s 24 alternate forwards firstlightflash, 0.1s linear 6s 1 forwards firstshadow;
            background: var(--A-bg-color);
            z-index: 0;
        }
        /* Project */
        .first .wrap p, .first #statebar p {
            color: black;
        }
        .first .wrap .meta {
            color: var(--A-default-color);
        }
        .first.project a.external::before {
            content: '~> ';
            display: inline-block;
            color: black;
            transform: rotate(-33deg);
            text-shadow: 0px 1px 0px white;
        }
        /* Image Magnify */
        .first .img-magnifier-glass {
            border: 1px solid var(--A-default-color);
            box-shadow: 5px 3px 2px rgba(57, 57, 245, 0.25);
        }
/* SECOND STYLE */
    * {
        --B-default-color: black;
        --B-bg-color: #4AE576;
        --B-high-color: #DD2A94;
    }
    .second {
        background: var(--B-bg-color);
        color: var(--B-default-color);
        font-family: sans-serif;
    }
    .second #barfooter > div, .second #sediments div, .second .tippy-box[data-theme~='fritzweb'], .second #infobartoggle, .second #about div {
        background: white;
        border: 2px solid var(--B-default-color);
        box-shadow: -1px 2px 0px 2px #000000;
        border-radius: 0px;
    }
    .second #barfooter div {
        margin: 0.4em;
        padding: 0.25em;
    }
    .second a, .second a:visited, .second #liste li a, [data-tippy-style] {
        color: var(--B-default-color);
        transition: all 0s;
        text-decoration-style: wavy;
        text-decoration-color: white;;
    }
    .second #sediments a {
        color: var(--B-high-color);
        text-decoration-style: wavy;
        text-decoration-color: var(--B-high-color);
    }
    .second #liste li a:hover, .second #liste li a:hover {
        color: white;
        transition: all 0s;
        text-decoration-color: black;
    }
    .second #liste li a:hover + .meta span [data-tippy-style] {
        color: white !important;
        transition: all 0s;
    }
    .second .timestamp, .second .toggler, .second select, .second .select:after, .second #stylebar span, .second #expand span, .second #statebar a, .second #liste li a:hover + span {
        color: var(--B-high-color);
    }
    .second #stylebar span, .second #expand span, .second #statebar a {
        text-decoration: none;
    }  
    .second #liste li a:before {
        content: '☺';
        color: white; 
        background: transparent;    
        margin: 0 0.25em 0 0;
        display: inline-block;
        vertical-align: middle;
    }  
    .second #liste li a:visited::before {
        color: var(--B-high-color) !important;
        background: white;
    }
    .second #liste li a:hover:before {
        content: '☹';
        color: black;
    }
    .second #infobartoggle p {
        min-width: 1em;
        text-align: center;
    }
    .second #infobartoggle.invisible p {
        display: block;
    }
    /* Wheel of Fortune */
    body.second.go:before {
    color: white;
    text-stroke: 2px var(--B-default-color);
    -webkit-text-stroke: 2px var(--B-default-color);
    border: 0px;
    text-shadow: -1px 2px 0px #000000;
    }
    @keyframes secondlightflash {
        from {
        background: white;
        box-shadow: -1px 2px 0px 2px #000000;
        border: 2px solid black;
        color: black;
        }
        to {
        background: black;
        box-shadow: -1px 2px 0px 2px white;
        border: 2px solid white;
        color: white !important;
        }
    }
    @keyframes secondshadow {
    0% {
        z-index: 1;
    }
    100% {
        z-index: 2;
    }
    }
    .second .flash {
        animation: 0.2s linear 6s 24 alternate forwards secondlightflash, 0.1s linear 6s 1 forwards secondshadow;
        z-index: 0;
    }
    .second #about {
        background: rgba(74,229,118, 0.75);
    }
    .second #about div {
        background: white;
        padding: 1em;
    }
    .second #about .select:after {
        color: var(--B-bg-color);
    }
    .second #about a {
        text-decoration-color: var(--B-bg-color) !important;
        text-decoration: underline;
        text-decoration-thickness: 2px;
    }
    .second #about a {
        color: var(--A-default-color) !important;   
    }
/* Third Style */
    * {
    --C-default-color: rgb(216, 216, 216);
    --C-bg-color: rgb(13, 13, 13);
    --C-high-color:  HSL(242, 100%, 85%);
    --C-var-color: HSL(177, 45%, 33%);
    }
    .third {
    background: var(--C-bg-color);
    color: var(--C-default-color);
    font-family: 'IBM Plex Sans';
    }
    .first #stylecontroller:hover {
    background: var(--C-bg-color);
    border: 1px solid var(--C-high-color);
    color: var(--C-default-color);
    }
    .third img {
        filter: brightness(.8) contrast(1.2);
    }
    /* Border and Shadow */
    .third #liste li {
        box-shadow: 0px 0px 1em -0.5em var(--C-default-color);
    }
    .third #barfooter > div, .third #sediments div, .third #about {
        box-shadow: inset 0px 0px 1em -0.5em var(--C-bg-color);
        border-radius: 1em;
        background: var(--C-high-color);
        color: var(--C-bg-color);
    }
    .third #barfooter > div a, .third #sediments div a, .third #about a {
        color: var(--C-bg-color);
    }
    .third #stylebar span, .third #expand span, .third #sediments div a, .third #statebar a, .third .toggler, .third select, .third .select:before {
        text-shadow: 0px 0px 2px var(--C-bg-color);
    }
    .third #liste li a:visited:before, .third #liste li a:hover:before {
        background: var(--C-default-color);  
      }
    /* Padding */
    .third #barfooter > div, .third #liste li {
        padding: 1em;
    }
    .third #sediments div {
        padding: 3em;
    }
    /* Opacity */
    .third #liste li, .third #barfooter > div, .third #sediments > div {
        
    }
    .third #liste li:hover, .third #barfooter > div:hover, .third #sediments div:hover {
    }
    /* Colors */
    .third #liste li {
        background: rgba(13, 13, 13, 0.65);
    }
    .third a, .third #liste .meta span:nth-child(2), .third [data-tippy-style~='temp']  {
        color: var(--C-high-color);
        text-shadow: 0px 0px 2px var(--C-high-color)
    }
    .third #liste li a, .third a:hover, .third #liste .meta span:nth-child(2):hover, .third #sediments div a:hover, .third [data-tippy-style~='temp']:hover, .third #stylebar span:hover, .third #statebar a:hover, .third .toggler:hover, .third select:hover {
        color: var(--C-default-color);
    }
    .third #liste li a {
        color: var(--C-default-color);
      }
    .third #stylebar span, .third #liste li a, .third #statebar a, .third #sediments div a {
        text-decoration: none;
    }
    .third #liste li a:before {
        content: ' ';
        width: 0.5em;
        height: 0.5em;
        border-radius: 0.15em;
        box-shadow: inset 1px 1px 1px -1px var(--C-default-color);
        background: transparent;    
        margin: 0 0.25em 0 0;
        display: inline-block;
        vertical-align: middle;
    }  

    /* Wheel of fortune */
        body.third.go:before {
            color: rgba(0, 0, 0, 0.65);
            text-stroke: 1px rgba(255, 255, 255, 0.25);
            -webkit-text-stroke: 1px rgba(255, 255, 255, 0.25);
            border: 0px;
            text-shadow: 0px 0px 1em -0.5em rgba(255, 255, 255, 0.25);
        }
        @keyframes thirdlightflash {
            from {
                box-shadow: inset 0px 0px 1em -0.5em var(--C-default-color);
                color: var(--C-high-color);
            }
            to {
                box-shadow: inset 0px 0px 1em -0.5em var(--C-high-color);
                color: var(--C-default-color);
            }
        }
        @keyframes thirdshadow {
            0% {
            z-index: 1;
            }
            100% {
            z-index: 2;
            }
        }
        .third .flash {
            animation: 0.2s linear 6s 24 alternate forwards thirdlightflash, 0.1s linear 6s 1 forwards thirdshadow;
            z-index: 0;
            }