// Universal

.container{

width: 60%;
margin: auto;
overflow: visible;
z-index: 0;

}

html {

scroll-behavior: smooth;

}

body{

font-family: $font_normal;
font-size: $normalsize;
font-weight: 400;
line-height: 1.6;
margin: 0;
@include color(background-color, --background-color, $background_color);
@include color(color, --text-color, $text_color);

}

::selection{

color: $blue_hover

}

.header {

font-size: $huge;
font-weight: 700;

}

h1{

font-size: $LARGE;
font-weight: 700;

}

h2{

font-size: $Large;
font-weight: 600;

}

h3{

font-size: $large;
font-weight: 600;

}

h4{

font-size: $normalsize;
font-weight: 400;

}

p {

padding-bottom: 10px;

}

a{

@include color(color, --text-color, $text_color);

&:hover{
    color: $blue_hover;
}

}

ul {

list-style: square;

}

audio, canvas, iframe, img, svg, video {

vertical-align: middle;
max-width: 100%;

}

// Preventing broken image symbol when using lazysizes img.lazyload:not() {

visibility: hidden;

}

figure {

margin-left: 0;
margin-right: 0;

}

figure > img {

   display: block;
   width: 60%;
   margin: auto;
   border-radius: 10px;
}

figcaption {

   @include color(color, --gray-text, $gray_text);
   font-size: $small;
   text-align: center;
   margin-top: 10px;
}

table {

margin: auto;
border-collapse: collapse;
width: 90%;

}

th, td {

padding: 10px;

}

tbody tr:hover {

@include color(background-color, --float-color, $gray_light);

}

caption {

@extend figcaption;

}

hr {

border: 0;
height: 2px;
@include color(background-color, --gray-element, $gray_element);

}

.footnotes {

ol {
    font-size: $footnotesize;
}

p {
    margin: 5px 0;
    padding-bottom: 0;
}

}

.reversefootnote {

color: $blue;
text-decoration: none;

&:hover {
    color: $blue_hover;
}

}

// Adjustment for anchor tag positioning with fixed header :target {

&[id^="fn"]{
    padding-top: 65px;
    margin-top: -65px;
    color: $blue;
    a {
        color: $blue;
    }
}

&:not(div):not([id^="fn"]):before{
    content: "";
    display: block;
    padding-top: 65px;
    margin-top: -65px;
}

}

// Helper classes

.separator{

margin-top: 60px;

}

.no-select {

-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;    
-ms-user-select: none;      
user-select: none;

}

// Hide visually and maintain layout, but not from screen readers .transparent {

opacity: 0;

}

// Hide visually and from screen readers, but maintain layout // .invisible { // visibility: hidden; // }

// Hide visually and from screen readers // .hidden, [hidden] { // display: none !important; // }

// Like display: none; but visible to screen readers // .visuallyhidden { // position: absolute; // overflow: hidden; // clip: rect(0 0 0 0); // height: 1px; width: 1px; // margin: -1px; padding: 0; border: 0; // }

// --------------------—————------------------ // | Property | occupies space | consumes clicks | // --------------------—————------------------ // | opacity: 0 | ✓ | ✓ | // --------------------—————------------------ // | visibility: hidden | ✓ | ✗ | // --------------------—————------------------ // | display: none | ✗ | ✗ | // --------------------—————------------------

// Indented boxes

blockquote {

border-left-color: $gray_element;
@include indented-box(var(--gray-element, $gray_element));
p {
    padding-bottom: 0;
}

&:not([class]) {
    @include color(color, --gray-text, $gray_text);
    @include gray-link;
}

}

.hint {

border-left-color: $blue;

}

.danger {

border-left-color: $red;

}

// Main Header

main-header {

padding-top: 40px;
padding-bottom: 10px;
cursor: default;

a{
    text-decoration: none;
    font-family: 'Black Ops One', 'Source Code Pro', sans-serif;
    font-size: $Huge;
    margin: 0;
    @include color(color, --text-color, $text_color);
}

}

// Navigation

navbar{

@include color(background-color, --background-color, $background_color);
width: 100%;
padding: 15px 0;
z-index: 10;

.container {
    display: flex;
    align-items: center;
    line-height: 1.5;
}

a{
    color: $blue;
    text-decoration: none;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    padding: 0px 6px;
    margin-right: 10px;
    transition: background-color 0.3s ease-in;
    display: inline-block;
}

a:not(.current):hover{
    color: #fff;
    background-color: $blue_hover;
}

.current{
    color: #fff;
    background-color: $blue;
    cursor: default;
}

.icon {
    display: block;
}

}

.sticky {

position: sticky;
top: 0;
box-shadow: 0 12px 12px -12px rgba(0, 0, 0, 0.5);
box-shadow: 0 12px 12px -12px var(--dark-shadow1, rgba(0, 0, 0, 0.5));

}

dark-toggle-box {

display: none;

}

dark-toggle-label {

margin-left: auto;
margin-right: 10px;
transition: all 0.3s ease-in-out;
transition-property: opacity, transform;
cursor: pointer;
display: none;

}

// Check support for CSS variable @supports ( (–a: 0)) {

#dark-toggle-label {
    display: block;
}

}

dark-toggle-box:checked + dark-toggle-label {

transform: rotate(180deg);

}

navbar:hover dark-toggle-label{

opacity: 1;

}

// Footer

main-footer{

@include color(color, --gray-text, $gray_text);
@include gray-link;
margin-top: 60px;
padding-bottom: 60px;
font-size: $footnotesize;
font-weight: 300;

i, .icon {
    margin-right: 5px;
}

}

copyleft{

transition: opacity 0.15s;

}

key:hover:after{

display: inline-block;
content: attr(aria-label);

}

// Icons if not using Font Awesome Kit

.icon {

display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;

}