/* Add space after the Elektronikk 101 title */
.story-frame-body h1 {
    margin-bottom: 1em;
}
:root {
    --background: #000; /**/
    --border:#3d3d3d;
    --border-selected: #fff;
    --button-foreground:#fff;
    --button-background:#3d3d3d;
    --code-foreground: #fff;
	--code-background: #3d3d3d;
    --foreground: #aaa; /**/
    --lnik-foreground-selected: #aaa;
    --link-foreground:  #eee8d5;
    --link-background:  #212121;
    --muted-foreground: #fff;
    --page-background: #000;
    --primary: #859900; /**/
    --selection-background: #aaa; /**/
    --selection-foreground: #fff; /**/
    --table-header-background:  #3d3d3d;
    --table-footer-background:  #3d3d3d;
    --tab-foreground: #aaa;
    --tab-backround: #000;
    --tab-border: #444;
    --tab-foreground-selected: #fff;
    --tab-background-selected: #222;
    --tab-background-hover: #444;
    
 
    --tiddler-background: #181818;
    --tiddler-border: #aaa;
}

/* Story frame and content styles for Elektronikk 101 */
.storybar{
    display: flex;
    align-items:flex-start ;
    padding: 0px 0px;
    background: var(--background);
}
.story-frame{
    display: flex;
    background-color: var(--background);
    padding: 14px 50px;
    width: 770px;
    min-width: 770px;
    border: 1px solid var(--border);
}
.story-extra-frame{
    display: flex;
    width:250px;
    padding: 14px;
    background-color: var(--background);
}
@media(max-width:768px){
    .story-frame{
        width:100%;
        min-width: 300px;
    }
    .story-extra-frame{
        display: none;
    }
}
.story-extra-frame img{
    width:500px;
}

/* Invert Spenning.png image in spenning.md */
.invert-img {
    filter: invert(1) hue-rotate(180deg);
}
.story-frame img,
.story-frame svg,
.story-frame canvas,
.story-frame embed,
.story-frame iframe {
    max-width: 100%;
}

/* Invert any image with the invert-img class */
img.invert-img {
    filter: invert(1) hue-rotate(180deg);
}
.story-frame a {
    color: var(--link-foreground);
}
.story-frame-body {
    clear: both;
    font-size: 14px;
    line-height: 20px;
}
/* Elektronikk 101 tab styles extracted from layout.css */

/* Story tabs */
@media(min-width:769px){
    .tab {
        display: -webkit-flex;
        display: flex;
    }
    .tab a{
        text-decoration: none;
    }
    .tab-buttons  {
        z-index: 1;
        display: block;
        padding-top: 14px;
        text-align: right;
        margin-bottom: inherit;
        margin-right: -1px;
        max-width: 33%;
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
    }
    .tab button {
        display: block;
        width: 100%;
        margin-top: 3px;
        margin-right: 0;
        text-align: right;
        color: var(--tab-foreground);
        background-color: var(--tab-background);
        border-top: 1px solid var(--tab-border);
        border-left: 1px solid var(--tab-border);
        border-bottom: 1px solid var(--tab-border);
        border-right: 1px solid var(--tab-border);
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        transition: 0.7s;
    }
    .tab button:hover {
        display: block;
        width: 100%;
        margin-top: 3px;
        margin-right: 0;
        text-align: right;
        color: var(--tab-foreground-selected);
        background-color: var(--tab-background);
    }
    .tab-buttons button.active {
        display: block;
        width: 100%;
        margin-top: 3px;
        margin-right: 0;
        text-align: right;
        color: var(--tab-foreground-selected);
        background-color: var(--tab-background);
        border-top: 2px solid var(--tab-border);
        border-left: 2px solid var(--tab-border);
        border-bottom: 2px solid var(--tab-border);
        border-right: 1px solid #000;
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .tab-content  {
        display: inline-block;
        vertical-align: top;
        padding-left: 14px;
        padding-right: 14px;
        padding-bottom: 14px;
        border: 1px solid var(--tab-border);
        -webkit-flex: 1 0 70%;
        flex: 1 0 70%;
        overflow: auto;
        animation: fadeEffect 1s;
    }
}
.tabcontent {
  animation: fadeEffect 1s; 
}
@media(max-width:768px){
    .tab {
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
        -webkit-flex-direction: column;
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
        flex-wrap: wrap;
    }
    .tab a{
        text-decoration: none;
    }
    .tab-buttons  {
        z-index: 1;
        padding-top: 14px;
        text-align: left;
        margin-bottom: inherit;
        margin-right: -1px;
        max-width: 100%;
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
        flex-direction: row;
    }
    .tab button {
        color: var(--tab-foreground);
        background-color: var(--tab-background);
        border-top: 1px solid var(--tab-border);
        border-left: 1px solid var(--tab-border);
        border-bottom: 1px solid var(--tab-border);
        border-right: 1px solid var(--tab-border);
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        transition: 0.7s;
    }
    .tab button:hover {
        color: var(--tab-foreground-selected);
        background-color: var(--tab-background);
    }
    .tab-buttons button.active {
        color: var(--tab-foreground-selected);
        background-color: var(--tab-background);
        border-top: 1px solid var(--tab-border-selected);
        border-left: 1px solid var(--tab-border-selected);
        border-bottom: 1px solid var(--tab-border-selected);
        border-right: 1px solid var(--page-background);
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .tab-content  {
        display: inline-block;
        vertical-align: top;
        padding-left: 14px;
        padding-right: 14px;
        padding-bottom: 14px;
        border: 1px solid var(--tab-border);
        -webkit-flex: 1 0 70%;
        flex: 1 0 70%;
        overflow: auto;
        animation: fadeEffect 1s;
    }
    .tabcontent {
      animation: fadeEffect 1s; 
    }    
}
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}