/* --font-family-caveat: "Caveat", cursive;
--font-family-kalam: "Kalam", cursive; */
html {
    margin: 0px;
    padding: 0px;
}
body {
    --color-brightest-blue: #f0f1ff;
    --color-bright-blue: #d8d9ff;
    --color-bright-orange: #fff1e1;
    --color-bright-gray: #999;
    --color-dark-blue: #000080;
    --color-dark-orange: #cc7200;
    --color-dark-grayblue: #404060;
    --color-dark-gray: #404040;
    --color-dark-green: #006000;
    --color-darkest-blue: #003;
    --color-darkest-gray: #222;
    --color-gray: #666;
    --color-gray-white: #eee;
    --color-med-blue: #c0c1ff;
    --color-orange: #ffa500;
    --color-red: #c00;
    --fontsize-fifth: 0.2rem;
    --fontsize-quarter: 0.25rem;
    --fontsize-half: 0.5rem;
    --fontsize-threequarters: 0.75rem;
    --fontsize-small: 0.8rem;
    --fontsize-smaller: 0.9rem;
    --fontsize-base: 1.0rem;
    --fontsize-medium: 1.2rem;
    --fontsize-medium-big: 1.4rem;
    --fontsize-big: 1.6rem;
    --fontsize-bigger: 1.8rem;
    --fontsize-biggest: 2.0rem;
    --gradient-background: linear-gradient(0deg, var(--color-gray-white), #fff, #fff);
    --border-orange: 1px solid var(--bright-orange);
    --border-gray-white: 1px solid var(--color-gray-white);
    --font-family-courier: "Courier Prime", "Courier New", monospace;
    --font-family-kalam: "Kalam", "Comic Sans", Arial, Helvetica, sans-serif;
    --font-family-noto-serif: "Noto Serif", "Century Schoolbook", Georgia, Times, serif;
    --font-family-trebuchet: "Trebuchet MS", Arial, Helvetica, sans-serif;
    --margin-horizontal: 5px 0px;
    --padding-horizontal: 5px 0px;
    --padding-standard: 5px 10px;
    --padding-vertical: 0px 5px;
    --padding-vertical-10px: 0px 10px;
    /* --slides-max-width: 72rem;
    --slides-max-height: 48rem; */
    --slides-max-width: 1520px;
    --slides-max-height: 1080px;
    --url_white50: url(./white50.png);
    --width-li: 18rem;
    --width-nav-left: 14rem;
    font-family: var(--font-family-trebuchet);
    background: #fff;
    text-align: left;
    margin: 0px;
    padding: 0px;
}
p {
    margin: 0px;
    padding: var(--padding-standard);
}
a {
    text-decoration: none;
    color: #000;
    font-style: italic;
    font-weight: 600;
}
a:link {
    color: var(--color-dark-blue);
}
a:visited {
    color: var(--color-darkest-blue);
}
a:hover {
    color: var(--color-orange);
}
article {
    border: var(--border-gray-white);
    background-image: var(--url_white50);
    background-attachment: fixed;
}
article p {
    font-family: var(--font-family-noto-serif);
}
details {
    padding: var(--padding-standard);
    border: var(--border-gray-white);
}
details h3{
    padding: var(--padding-horizontal);
}
details summary{
    cursor: pointer;
}
dl {
    margin-left: 1rem;
}
figure {
    display: inline-block;
    border: 0px;
    margin: 0px;
    padding: var(--padding-standard);
    border: var(--border-gray-white);
    text-align: center;
}
figcaption {
    text-align: center;
}
h1, h2, h3, h4, h5, h6{
    font-weight: bold;
    margin: 0px;
    padding: var(--padding-standard);
}
h1 {
    font-size: var(--fontsize-biggest);
}
h2 {
    font-size: var(--fontsize-big);
}
h3 {
    font-size: var(--fontsize-medium);
}
img {
    height: 140px;
    width: auto;
    vertical-align: middle;
}
nav {
    grid-area: nav;
    border: var(--border-gray-white);
}
main {
    grid-area: main;
    border: var(--border-gray-white);
}
main a {
    font-style: normal;
}
section{
    border-bottom: var(--border-gray-white);
    background-image: var(--url_white50);
    background-attachment: fixed;
}
section h1,h2 {
    background-image: var(--url_white50);
}
.img {
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
}
.back-img {
    background-image: url(./back.png);
    background-attachment: fixed;
    background-position: center;
    background-repeat: repeat;
}
.back-img-white50 {
    background-image: var(--url_white50);
    background-attachment: fixed;
    background-position: center;
    background-repeat: repeat;
}
.background-bright-blue {
    background-color: var(--color-bright-blue);
}
.background-bright-orange {
    background-color: var(--color-bright-orange);
}
.background-brightest-blue {
    background-color: var(--color-brightest-blue);
}
.background-dark-blue {
    background-color: var(--color-dark-blue);
}
.background-med-blue {
    background-color: var(--color-med-blue);
}
.background-white {
    background-color: white;
}
.block {
    display: block;
}
.code {
    color: var(--color-bright-orange);
    background-color: var(--color-dark-gray);
    font-weight: 600;
}
.color-dark-green {
    color: var(--color-dark-green);
}
.color-gray {
    color: var(--color-gray);
}
.color-orange {
    color: var(--color-orange);
    text-shadow: -1px 0px 2px #eee, 0px 1px 2px #000, 1px 0px 2px #000, 0px -1px 2px #eee;
}
.color-red {
    color: var(--color-red);
}
.max-width {
    max-width: 100%;
    height: auto;
}
/*-------------*/
.slides {
    box-sizing: border-box;
}
.slides-hz1,
.slides-hz2,
.slides-hz3,
.slides-hz4,
.slides-hz5,
.slides-hz6,
.slides-hz7,
.slides-hz8,
.slides-hz9,
.slides-hz10,
.slides-hz11,
.slides-hz12 {
    display: none;
    align-items: center;
}
.slides-container {
    max-width: 99%;
    max-height: var(--slides-max-height);
    position: relative;
    margin: auto;
    height: auto;
    padding-top: 70%;
}
.slides-btn-prev,
.slides-btn-next {
    color: #fff;
    text-shadow: -1px 0px 2px #ffa500, 0px 1px 2px #000, 1px 0px 2px #000, 0px -1px 2px #ffa500;
}
.slides-text,
.slides-numbertext,
.slides-dot-hz1,
.slides-dot-hz2,
.slides-dot-hz3,
.slides-dot-hz4,
.slides-dot-hz5,
.slides-dot-hz6,
.slides-dot-hz7,
.slides-dot-hz8,
.slides-dot-hz9,
.slides-dot-hz10,
.slides-dot-hz11,
.slides-dot-hz12 {
    color: #666;
}
.slides-text,
.slides-numbertext {
    font-size: var(--fontsize-base);
    height: var(--fontsize-medium-big);
    margin: var(--fontsize-fifth);
    padding: 0px var(--fontsize-fifth);
    display: inline-block;
}
.slides-dots {
    text-align: center;
}
.slides-dot-hz1,
.slides-dot-hz2,
.slides-dot-hz3,
.slides-dot-hz4,
.slides-dot-hz5,
.slides-dot-hz6,
.slides-dot-hz7,
.slides-dot-hz8,
.slides-dot-hz9,
.slides-dot-hz10,
.slides-dot-hz11,
.slides-dot-hz12 {
    cursor: pointer;
    height: var(--fontsize-medium-big);
    width: var(--fontsize-medium-big);
    margin: 0 2px;
    background-color: #999;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
.slides-active,
.slides-dot-hz1:hover,
.slides-dot-hz2:hover,
.slides-dot-hz3:hover,
.slides-dot-hz4:hover,
.slides-dot-hz5:hover,
.slides-dot-hz6:hover,
.slides-dot-hz7:hover,
.slides-dot-hz8:hover,
.slides-dot-hz9:hover,
.slides-dot-hz10:hover,
.slides-dot-hz11:hover,
.slides-dot-hz12:hover {
    background-color: #333;
}
.slides-btn-prev,
.slides-btn-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    font-weight: bold;
    font-size: var(--fontsize-biggest);
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}
.slides-btn-next {
    right: 0;
    border-radius: 3px 0 0 3px;
}
.slides-btn-prev:hover,
.slides-btn-next:hover,
.slides-text:hover,
.slides-numbertext:hover {
    background-color: #fff6;
    color: #fff6;
}
.slides-img {
    width: 100%;
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    height: auto;
}
/*-------------*/
/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}
@-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}
@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}
/*-------------*/
.font-family-courier {
    font-family: var(--font-family-courier);
    font-weight: 600;
}
.font-family-noto-serif {
    font-family: var(--font-family-noto-serif);
}
.font-initial {
    color: var(--color-dark-blue);
    font-size: var(--fontsize-medium);
    font-weight: 600;
}
.fontsize-half {
    font-size: var(--fontsize-half);
}
.fontsize-base {
    font-size: var(--fontsize-base);
}
.footnote {
    font-family: var(--font-family-noto-serif);
    padding: var(--padding-standard);
}
.img-icon {
    padding: 0px;
    height: 1rem;
    width: auto;
}
.img-icon-small {
    padding: 0px;
    height: 0.9rem;
    width: auto;
}
.img-logo {
    padding: var(--padding-standard);
    height: auto;
    width: auto;
}
.img-max-width {
    padding: var(--padding-standard);
    width: auto;
    height: auto;
    max-width: 80rem;
}
.letter-spaced {
    letter-spacing: 0.2em;
}
.link-top a:link {
    color: var(--color-br);
}
.nav-bar {
    background-color: #fff;
    text-align: center;
}
.nav-link {
    display: block;
    color: #000;
    font-style: normal;
    padding: var(--padding-standard);
    background: var(--gradient-background);
    cursor: pointer;
}
.right {
    text-align: right;
}
.text-centered {
    text-align: center;
}
.text-left {
    text-align: left;
}
.zoom {
    transition: transform .2s;
}
.zoom:hover {
    transform: scale(1.5);
}
.preview {
    height: 8rem;
    width: auto;
    transition: 0.5s;
    cursor: pointer;
}
.preview:hover {
    height: 540px;
    width: auto;
}
#section-footer {
    float: left;
    width: 100%;
}
#timezones td {
    border: var(--border-gray-white);
}
#timezones th {
    border: var(--border-gray-white);
    background-color: var(--color-brightest-blue);
}
.img-magnifier-container {
    position: relative;
}
.img-magnifier-glass {
    position: absolute;
    border: 3px solid #000;
    border-radius: 20px;
    cursor: none;
    /*Set the size of the magnifier glass:*/
    width: 50%;
    height: 50%;
}

/* ---- */

li {
    break-inside: avoid;
    float: left;
    margin: 0px;
    border: 0px;
    padding: 2px;
    width: var(--width-li);
    box-shadow: 1px 1px 1px white inset, -1px -1px 1px #ccc inset;
}
li h3,h4 {
    padding-left: 1rem;
    padding-right: 0px;
}
ol {
    display: grid;
    column-count: 2;
    height: auto;
    list-style-type: none;
}
#collapsible {
    cursor: pointer;
    border: none;
    outline: none;
}
#main-doc {
    background-color: var(--color-gray-white);
}
/* screen orientation portrait or landscape */
.container {
    grid-template-columns: 100%;
    grid-template-rows: auto 1fr;
    grid-template-areas: "nav" "main";
}
@media only screen and (orientation: landscape) {
    .container {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: 100%;
        grid-template-areas: "nav main";
    }
}
/* screen min and max width */
@media only screen and (max-width: 37.5rem) {
    .fontsize-medium {
        font-size: 1rem;
    }
    .fontsize-big {
        font-size: 1.2rem;
    }
    .fontsize-bigger {
        font-size: 1.4rem;
    }
}
@media only screen and (min-width: 37.5rem) {
    .fontsize-medium {
        font-size: 1.2rem;
    }
    .fontsize-big {
        font-size: 1.4rem;
    }
    .fontsize-bigger {
        font-size: 1.5rem;
    }
}
@media only screen and (min-width: 50rem) {
    .fontsize-medium {
        font-size: 1.4rem;
    }
     .fontsize-big {
        font-size: 1.5rem;
    }
    .fontsize-bigger {
        font-size: 1.6rem;
    }
}
@media only screen and (min-width: 72.5rem) {
    .fontsize-medium {
        font-size: 1.5rem;
    }
     .fontsize-big {
        font-size: 1.6rem;
    }
    .fontsize-bigger {
        font-size: 1.8rem;
    }
}
@media only screen and (min-width: 85rem) {
    .fontsize-medium {
        font-size: 1.6rem;
    }
    .fontsize-big {
        font-size: 1.8rem;
    }
    .fontsize-bigger {
        font-size: 2rem;
    }
}