/* || Article contents */

.chapter-heading {
    display: flex;
    border-bottom: 1px solid var(--dark-border-color);
}

/* || General styles 
*************************/



html {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  position: relative;
}

footer {
  position: absolute;
  bottom: 0;
}


*,
*::before,
*::after {
  box-sizing: inherit;
}

main {
    margin-left: auto;
    margin-right: auto;
    /*padding-bottom for footer absolute position*/
    padding-bottom: 7rem;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

nav {
    margin: auto;
}

/* || Header  and Navigation*
*************************/
.site-nav {
        list-style: none;
        margin: 0 auto;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
    }


.site-nav > li {
    margin: 1px;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
}

.site-nav > li > a {
    display: block;
    padding: 7px 3px 7px 3px;
}

.site-nav > li:hover {
    background-color: var(--dark-nav-hover-color);
}

.site-nav > li:active {
    background-color: var(--dark-nav-action-color);
}

nav a:link, nav a:visited, nav a:hover, nav a:active {
    text-decoration: none;
    color: white;
}

/* || Title of the article */

header {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 3rem;

}

/* || Media queries */


@media screen and (max-width: 767px) {

    main, .site-nav {
        width: 100%;
    }
}



@media screen and (min-width: 768px) {

  /*  main {
    font-size: calc(1rem + ((1vw - 7.68px) * 0.4557));

    } */

    main, .site-nav {
        width: 768px;
    }

}

@media screen and (min-width: 1920px) {

    :root {
        font-size: 22px;
    }

    main, .site-nav {
        width: 1056px;
    }
}

@media (min-width: 2560px) {

    :root {
        font-size: 29px;
    }
    
    .site-nav, main {
        width: 1408px;
    }
}

@media (min-width: 3840px) {

    :root {
        font-size: 42.5px;
    }

    .site-nav, main {
      width: 2112px;
  }
}

/* || Footer */

footer {
    display: flex;
    width: 100%;
    border-top: 1px solid var(--dark-border-color);
    margin-top: 1rem;
    padding-top: 1rem;
    height: 5rem;
}

footer > p {
    display: block;
    margin: auto auto;
}

footer > p > a {
    text-decoration: none;
    color: var(--dark-footer-text-color);
}

footer > p > a:hover {
    text-decoration: underline;
    color: var(--dark-footer-text-color);
}

footer > p > a:active, footer > p > a:visited {
    text-decoration: none;
    color: var(--dark-footer-text-color);
}

/* || Images */
.image-container {
    border: rgb(145, 166, 130) 1.5px solid;
    display: inline-flex;
    float: right;
    flex-wrap: wrap;
    max-width: 50%;
    padding: 5px;
    margin: 0 0 1em 1em;
    vertical-align: middle;
}

.left {
    float: left;
    margin: 0 1em 1em 0;
}

.wide {
    max-width: 100%;
    margin: 1em 0 1em 0;
}

img {
    width: 100%;
    height: 100%;
    max-height: 700px;
}

.image-desc {
    background-color: none;
    color: rgb(200, 200, 200);
    margin: auto;
    text-align: center;
}

img:hover {
    cursor: pointer;
}

.image-container:hover .image-desc {
    color: white;
}

/* || Color light theme*/

:root {
    --background-color: black;
    --link-color: rgb(124, 172, 87);
    --link-hover-color: rgb(51, 117, 54);
    --link-visited-color: rgb(78, 97, 72);
    --link-action-color: rgb(54, 204, 8);
    --border-color: rgb(0, 31, 5);
    --text-color: black;
    --header-text-color: rgb(49, 54, 45);
    --nav-hover-color: rgb(191, 201, 185);
    --nav-action-color: rgb(182, 159, 159);
    --nav-background-color: rgb(182, 159, 159);
    --text-selection-color: rgb(90, 107, 77);

}

/* || Color Dark theme */

:root {
    --dark-background-color: #131313;
    --dark-link-color: rgb(81, 180, 86);
    --dark-link-hover-color: rgb(145, 211, 98);
    --dark-link-action-color: var(--link-action-color);
    --dark-link-visited-color: rgb(166, 205, 155);
    --dark-border-color: rgb(143, 143, 143);
    --dark-text-color: white;
    --dark-header-text-color: rgb(90, 133, 90);
    --dark-nav-hover-color: rgb(59, 66, 58);
    --dark-nav-action-color: rgb(59, 66, 58);
    --dark-nav-background-color: var(--nav-background-color);
    --dark-text-selection-color: var(--text-selection-color);
    --dark-footer-text-color: rgb(199, 199, 199);



}

html {
    color: white;
    background-color: var(--dark-background-color);
}

a, a:hover, a:active, a:focus, a:visited {
    text-decoration: none;
}

a {
    color: var(--dark-link-color);
    text-decoration: underline;    
}

a:hover {
    color: var(--dark-link-hover-color);
    text-decoration: underline;
    padding: 0;
}

a:active {
    color: var(--dark-link-action-color);
}

a:visited {
    color: var(--dark-link-visited-color);
}

.chapter-heading > a {
    color: var(--dark-header-text-color);
    text-decoration: none;
}

.chapter-heading > a:hover {
    color: rgb(180, 180, 180);
}


::selection {
    color: white;
    background-color: rgb(90, 107, 77);
}