:root {
    color-scheme: light dark;

    --clr-foreground: hsl(0 0% 0%); /* darkgreen;  */
    --clr-background: hsl(0 0% 100%); 
    --darkgreen: darkgreen;
    --white: white;
    --black: black;
    --gray: gray;
    --red: red;
    --orange: orange;
    --yellow: yellow;

    --font-header: light-dark(var(--darkgreen), var(--white));
    --font-error: light-dark(var(--red), var(--white));
    --font-warning: light-dark(var(--orange), var(--black));

    --background-error: light-dark(var(--white), var(--red));
    --background-warning: light-dark(var(--white), var(--orange));

    --ad-background: var(--gray);

    --body-background: light-dark(var(--white), var(--darkgreen));
    
    --top-background: light-dark(var(--darkgreen), var(--white));
    --top-font-header: light-dark(var(--white), var(--darkgreen));

    --main-font-color: light-dark(var(--black), var(--white));
    --main-font-size: 12px;
    --add-hint-font-size: .85rem;
    --main-background: light-dark(var(--white), var(--darkgreen));
}


[data-theme="light"] {
    --main-font-color: var(--black);
    --main-icon: var(--white);
    --font-header: var(--darkgreen);
    --font-error: var(--red);
    --font-warning: var(--orange);

    --background-error: var(--white);
    --background-warning: var(--white);

    --body-background: var(--white);
    
    --top-background: var(--darkgreen);
    --hamburger-line-color: var(--white);
    
    --main-background: var(--white);
}

[data-theme="dark"] {
    :root {
        --clr-foreground: hsl(0 0% 100%); 
        --clr-background: hsl(0 0% 0%); 
    }

    --main-font-color: var(--white);
    --main-icon: var(--darkgreen);
    --font-header: var(--white);
    --font-error: var(--white);
    --font-warning: var(--black);

    --background-error: var(--white);
    --background-warning: var(--orange);

    --body-background: var(--darkgreen);
    
    --top-background: var(--white);
    --top-font-header: var(--darkgreen);
    --hamburger-line-color:var(--darkgreen);

    --main-background: var(--darkgreen);
}

@media (prefers-color-scheme: dark) {
    :root {
        --clr-foreground: hsl(0 0% 100%); 
        --clr-background: hsl(0 0% 0%); 
    }
}

.light {
    --clr-foreground: hsl(0 0% 0%); 
    --clr-background: hsl(0 0% 100%); 
}

.dark {
    --clr-foreground: hsl(0 0% 100%); 
    --clr-background: hsl(0 0% 0%); 
}


html, body {
    /*font-size: 12px;*/
    width: 100%;
    min-height: 100%;             
    overflow: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    color: var(--main-font-color);
}

h1 {
    font-size: 1.6rem;
}

h2 {
    font-size:2rem;
}

svg {
    fill: var(--main-icon);
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.js .outer-wrap {
    overflow: hidden;
    overflow-y: auto;
}

.ad { 
    background-color: var(--ad-background);
}

.topAd, .bottomAd {
    width: 100%;
    height: 80px;
    background-color: var(--ad-background);
}

.sky-scrapper-left, .sky-scrapper-right {
     /* display: none;*/
    width: 200px;
    height: 900px;
    background-color: var(--ad-background);
}

.top {
    width: 100%;
    height: 70px;
    background-color: var(--top-background);
    color: var(--top-font-header);
}

.js .top {
    display: flex;
    justify-content: space-between;
}

.no-js .top-left, .no-js .top-color-mode, .no-js .top-right  { 
    display: none;
}

.js .top-left, .js .top-right {
    display: block;
    width: 10%;
}

.top-middle {
/*                display: flex;
    justify-content: center;*/
    text-align: center;
}

.no-js .top-middle {
    width: 100%;
}

.top-middle h2 { 
    margin: 0;
}

.top-middle img { 
    position: relative;
    top: -10px;
    width: 80px;
}

nav#menu .logo img {
    max-width: 100px;
}

label.hamburg {
    display: block;
    width: 75px;
    height: 50px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

input#hamburg { display:none }

.line {
    position: absolute;
    display: block;
    left: 10px;
    width: 40px;
    height: 4px;
    background: var(--hamburger-line-color);
    border-radius: 2px;
    transition: 0.5s;
    transform-origin: center;
}

.line:nth-child(1) { top: 10px; }
.line:nth-child(2) { top: 20px; }
.line:nth-child(3) { top: 30px; }

#hamburg:checked + .hamburg .line:nth-child(1){
    transform: translateY(10px) rotate(-45deg);
}

#hamburg:checked + .hamburg .line:nth-child(2){
    opacity: 0;
}

#hamburg:checked + .hamburg .line:nth-child(3) {
    transform: translateY(-10px) rotate(45deg);
}

.page-outer-wrap {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    min-height: 100%;
}

.page {
    order: 1;
    width: 100%;
    height: 100%;
}

.sky-scrapper-left {
    order: 2;
    width: 50%;
    background-color: var(--ad-background);
}

.sky-scrapper-right {
    order: 3;
    width: 50%;
    background-color: var(--ad-background);
}

.js .page-inner-wrap {
    container-name: page-inner-wrap; 
    container-type: inline-size;
    display: flex;
    flex-wrap: wrap;
    background-color: var(--main-background);
}

.js.small-screen .page-inner-wrap {                
    width: 300%;
    height: 100%;;
    margin-left: -100%;
    transition: margin-left .5s;
}

.js.active-live .page-inner-wrap {
    margin-left: -10%;
    transition: margin-left .5s;
}

.js.active-menu .page-inner-wrap {               
    margin-left: -190%;
    transition: margin-left .5s;
}

/*.menu {
    background-color: blue;    
}*/

.js.small-screen .menu {
    order: 3;
    width: 33.3%;   
}

.js.small-screen .content-wrap {
    order: 2;
    width: 33.3%;
}

.error {
    background-color: var(--background-error);
    color: var(--font-error);
}

.warning {
    background-color: var(--background-warning);
    color: var(--font-warning);
}

.js.small-screen aside.live {
    order: 1;
    width: 33.3%;
    background-color: red;;
}

.ad-hint {
    width: 100%;
    font-size: var(--add-hint-font-size);
    text-align: center;
}

 .js.small-screen footer {
    order: 4;
    /*display: none;*/
    width: 33.3%;
    margin-left: 33.3%;;
   /* background-color: orange;*/
}

@media (min-width: 768px) {
    html, body {
        overflow: auto;
    }

    .no-js .top-left, .no-js .top-right,
    .js .top-left, .js .top-right 
    {
        display: none;
    }

    .top-middle {
        width: 100%;
        text-align: center;
    }

    .content-wrap {
        order: 2;
        max-width: 720px;
        margin: 0 auto;
    }

    .sky-scrapper-left {
        order: 1;
        width: 150px;
        margin: auto;
    }

    .sky-scrapper-right {
        order: 3; 
        width: 150px;
        margin: auto;
    }

    .page-inner-wrap {
        width: 100%;
        height: auto;
        flex-wrap: wrap;
        margin-left: 0;
    }

    .page {
        width: 80%; /*Only if live is active */
        height: auto;
        margin: 0 auto;
    }

    .page-outer-wrap {
        flex-wrap: nowrap;
    }

    .menu {
        order: 1;
        width: 100%;
    }

    .content-wrap {
        order: 2;
    }

    aside.live {
        order: 3;
    }

    footer {
        order: 4;
        width: 100%;
/*        background-color: blueviolet;*/
        position: relative;
        bottom: 0;
    }
}

@media (min-width: 1024px) {
    .content-wrap {
        order: 2;
        max-width: 860px;
        margin: 0 auto;
    }
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

.sticky + .content {
    padding-top: 102px;
}

.theme-toggle, .search {
    cursor: pointer;
    background: 0;
    border: 0;
    opacity: 0.6;
    padding: .4rem;/**/
    border-radius: 50%;
    position: relative;
    isolation: isolate;
}

.theme-toggle svg { 
    fill: var(--clr-foreground);
}

.theme-toggle:hover, 
.theme-toggle:focus,
.search:hover, 
.search:focus {
    outline: 0;
    background-color: hsl(0 0% 50% / 0.15);
    opacity: 1;
}

[data-theme="light"] .theme-toggle:hover, 
[data-theme="light"] .theme-toggle:focus,
[data-theme="light"] .search:hover, 
[data-theme="light"] .search:focus {
    background-color: rgba(255,255,255,.5);
}

.theme-toggle::before, .search::before {
    content: "";
    position: absolute;
    background-color: hsl(0, 0%, 50% / .2);
    inset: 0;
    border-radius: inherit;
    transform: scale(0);
    opacity: 0;
    z-index: -1;
}

[data-theme="light"] .theme-toggle::before {
    animation: pulseToLight 650ms ease-out; 
}

[data-theme="dark"] .theme-toggle::before {
    animation: pulseToDark 650ms ease-out; 
}

.theme-toggle::after, .search::after {
    content: attr(aria-label);
    position: absolute;
    top: 95%;
    left: 0;
    right: 0;
    color: var(--clr-background);
    background-color: var(--clr-foreground);
    width: max-content;
    font-size: 1rem;
    margin: 0 auto;
    padding: 0.5em .75em;
    border-radius: .125em;
    opacity: .7;
    transform: scale(0);
    transition: transform 0ms linear 100ms, opacity 75ms linear;
    transform-origin: top;
}

.theme-toggle:hover::after,
.theme-toggle:focus::after,
.search:hover::after,
.search:focus::after { 
    opacity: .7;
    transform: scale(1);
}

.rotated-square {
    transform: rotate(45deg);
}

circle.outer-circle {
    fill: var(--clr-background);
}

circle.inner-circle { 
    transition: transform 500ms ease-out;
}

[data-theme="light"] .inner-circle {
    transform: translateX(-15%);
}

.toggle-sun {
    transition: transform 750ms cubic-bezier(.14 , .26, .24, 1.35);
    transform-origin: center center;
}

[data-theme="light"] .toggle-sun { 
    transform: rotate(.5turn);
}
/*
.original-square, 
.rotated-square { 
    transition: transform 500ms ease;
    transform-origin: center center;
}

.light-theme .original-square, 
.light-theme .rotated-square {
/*                transform: rotate(.75turn);* /
    transform: translateX(50%);
    transform-origin: center center;
}*/

@keyframes pulseToLight {
    0% {
        transform: scale(0);
        opacity: .5;
    }
    30% {
        transform: scale(1);
    }
    75% {
       opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}

@keyframes pulseToDark {
    0% {
        transform: scale(0);
        opacity: .5;
    }
    10% {
        transform: scale(1);
    }
    75% {
       opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}
/* Later if live is available
@container page-inner-wrap (width > 765px) {
    .content-wrap {
        width: 80%;
    }

    aside.live {
        width: 20%;
        background-color: yellow;
    }
}*/

.ad, .search {
    display: none;
}

/****** News */
ul.f3-widget-paginator {
  display: flex;
}

ul.f3-widget-paginator > li > a {
  color: var(--font-header);
  margin: 5px;
  width: 10px;
  height: 10px;
}

.news .header a, .news .header a span {
  color: var(--font-header);
  text-decoration: none;
}

.news a.more {
  color: var(--font-header);
  background-color: var(--top-font-header);
  transition: background-color 0.8s ease;
  border-color: var(--font-header);
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  font-weight: bold;
  padding: 5px;
  text-decoration: none;
}

.news a.more:hover {
  background-color: var(--font-header);
  color: var(--top-font-header);
}