html, body {
    /* font-family: 'Rajdhani', sans-serif; */
    /* font-family: 'Reenie Beanie', cursive; */
    font-family: monospace;
    margin: 0;
    padding: 0;
}

html {
    background-color: #D9D9D9;
}


#menu > img, .horizontal > img {
    width: 20px;
    /* height: 30px; */
    /* background-color: #8b0b8b; */
    /* padding: 5px; */
    margin-left: 7px;
    margin-right: 40px;
    /* display: none; */
}

#menu > img {
    display: none;
}

.horizontal {
    display: none;
}

/* .horizontal {
    display: none;
} */

#menu hr {
    width: 20px;
    height: 3px;
    background-color: #000000;
    padding: 1px;
    margin: 1px;
}


/* div#time */
#time {
    text-align: center;
    color: #8e5f5f;
    font-size: 1.75em;
    margin-top: 0.25em;
    margin-left: -1em;
    /* background-color: #000000; */
}


/* header */
/* .header {
    display: flex; */
    /* border: 2px solid orange; */
/* } */

/* .left { */
    /* border: 2px solid orange; */
    /* position: fixed;
    margin-top: 1em;
    margin-left: 1em;
} */

/* .center { */
    /* border: 2px solid orange; */
    /* position: absolute;
    top: -2.5%;
    left: 35%;
    font-size: 3.5rem;
} */

/* .center a {
    color: #000000;
    text-decoration: none;
}

.center a:hover {
    text-decoration: underline;
    color: rgb(12, 53, 118);
    cursor: pointer;
} */


/* nav */
#navbar {
    /* border: 2px solid orange; */
    position: fixed;
    width: 19vw;
    /* width: 350px; */
    /* margin-top: 5em; */
    height: 100%;
    word-wrap: break-word;
    border-right: solid;
    border-color: rgba(0, 22, 22, 0.4);
}

#navbar .left {
    padding-top: 0.75rem;
    padding-left: 4rem;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #868383;
}

::-webkit-scrollbar-thumb {
    background: #6b5858;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

#navbar::-webkit-scrollbar {
    width: 10px;
}

#navbar::-webkit-scrollbar-track {
    background: #868383;
}

#navbar::-webkit-scrollbar-thumb {
    background: #6b5858;
}

#navbar::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

#navbar ul {
    /* height: 78%; */
    height: 79%;
    padding: 0;
    overflow-x: auto;
    overflow-y: auto;
}

#navbar > ul > li {
    list-style: none;
    /* margin-left: -2em; */
    /* margin-bottom: 1em; */
    margin-bottom: 0.6rem;
    border-top: 1px solid;
    position: relative;
    width: 100%;
    font-size: larger;
    padding-top: 0.6rem;
}

#navbar > ul > li > a {
    margin-left: 1rem;
    /* font-size: 1.5em; */
    text-decoration: none;
    color: rgb(170, 3, 153);
}

#navbar > ul > li > a:hover {
    color: rgb(79, 100, 255);
    text-decoration: underline;
}

#navbar ul li a:active {
    color: rgb(253, 2, 2);
}


/* main */
#main-doc {
    position: absolute;
    margin-left: 23em;
    /* margin-top: 6em; */
    margin-right: 1em;
    /* background-color: #efefef; */
    padding: 1em;
    border-radius: 20px;
    padding-bottom: 2em;
    /* width: 74vw; */
}

section > header {
    font-size: 3em;
    cursor: pointer;
}

section > header:hover {
    text-decoration: underline;
}

section > article {
    font-size: 1.5em;
    word-spacing: 5px;
}


/* Official documentation */
#officialDocumentation {
    margin-top: 2em;
}


#officialDocumentation > a {
    font-size: larger;
    color: #954848;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

#officialDocumentation > a:hover {
    color:rgb(12, 53, 118);
    text-decoration: none;
}


.margin-from-top {
    margin-top: 3rem;
}


/* #hello_world {
    background-color: #b4b0b0;
    border-radius: 10px;
    padding-top: 1em;
} */

/* pre {
    background-color: #b4b0b0;
    border-radius: 10px;
} */

.language-js, .language-html, .language-css {
    border-radius: 1em;
}

.toolbar-item > .copy-to-clipboard-button {
    cursor: pointer;
}


button[value="next"], button[value="prev"] {
    cursor: pointer;
    position: relative;
    left: 86%;
    background-color: orangered;
    border: 1px solid orangered;
    border-radius: 10px;
    width: 75px;
    font-size: 1em;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding: 7px;
}

button[value="next"]:hover, button[value="prev"]:hover {
    background-color: orange;
    border: 1px solid orange;
    border-radius: 5px;
}

button a {
    text-decoration: none;
    color: #f0f8ff;
    display: block;
}

button a:hover {
    color: #8b0b8b;
}


/* basics */
#main-doc > header {
    font-size: 3em;
    text-align: center;
    color: #a52a2a;
    text-decoration: underline;
    cursor: pointer;
}

#main-doc > header:hover {
    text-decoration: none;
}


/* expression and operators */
ol li {
    margin-left: 1rem;
    font-size: 2.25rem;
    text-decoration: underline;
    cursor: pointer;
}

.extra-margin-left{
    margin-left: 2.15rem;
}

ol li:hover {
    text-decoration: none;
}

dt {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

dl > dt {
    text-decoration: underline;
    cursor: pointer;
}

dl > dt:hover {
    text-decoration: none;
}

dl dt code, dl dd code, ul li code, p code, li code {
    background-color: #dbd7d7;
    border-radius: 5px;
    padding: 2.5px;
}

.note {
    background-color: #abd5f6;
    height: 50px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 1px solid #abd5f6;
    box-shadow: -3px 0px blue;
    padding-left: 2rem;
    padding-top: 1.5rem;
}

.note p {
    margin-top: auto;
}

.note p a {
    color: black;
}

.note p a:hover {
    text-decoration: none;
}

.margin-top {
    margin-top: 2rem;
}

.margin-1less-top {
    margin-top: 1rem;
}


/* strings */
article > h3 {
    text-decoration: underline;
}

.para {
    font-size: 1.5em;
}

.line-height-para, .notes {
    line-height: 40px;
}

.line-height-li {
    line-height: 32px;
}

.margin-1more-top {
    margin-top: 3rem;
}

article code[class*=language-], article pre[class*=language-] {
    font-size: 0.8em;
}

code[class*=language-], pre[class*=language-] {
    font-size: 0.9em !important;
}

.hr-border-color {
    /* color: #efefef; */
    /* height: 5px; */
    border: 1px solid #efefef;
}


/* BOM_DOM */
.margin-2_5em-top {
    margin-top: 2.5em;
}


/* walking the DOM */
ol[type="a"] li {
    font-size: larger;
    text-decoration: none;
}

.margin-2em-top {
    margin-top: 2em;
}

.center-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

article > h2 {
    text-decoration: underline;
}



/* practice problems */
.questions li {
    font-size: 1.5rem;
    text-decoration: none;
    font-family: sans-serif;
    color: #b7027e;
}

/* .extra-margin-half-left{
    margin-left: 1.75rem;
} */

.questions li a {
    line-height: 2rem;
    text-decoration: none;
    /* color: #a52a2a; */
    color: #b7027e;
}

.questions li a:hover {
    text-decoration: underline;
}

.btn {
    left: 92% !important;
}


/* problem 1 */
#main-doc > h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
}


/* problem 34 */
.answer {
    margin-top: -20px;
    color: blue;
    font-size: 2rem;
}


/* arrays */
.margin-5em-top {
    margin-top: 5em;
}

.examples {
    font-size: 30px;
}

.light-weight{
    font-size: 25px;
    word-spacing: normal;
}

.light-weight, .examples {
    font-weight: lighter;
    text-decoration: none;
}

.font-size-20px {
    font-size: 16px;
    word-spacing: normal;
}

.light-weight:hover, .examples:hover {
    text-decoration: underline;
}

h3 a, h2 a, header a {
    color: #000000;
    text-decoration: none;
}

/* h3 a[href^="#"]::before {
    content: "#";
    display: inline-block;
    line-height: 1;
    text-decoration: none;
    color: var(--text-inactive);
} */


/* events and other DOM properties */
.link {
    color:#888;
    text-decoration: none;
}

.link:hover {
    color:#8e5f5f;
    text-decoration: underline;
}

.word-spacing-normal {
    word-spacing: normal;
}

/* .table tr {
    width: 100%;
} */

.table tr th  {
    word-spacing: normal;
    /* border: 1px solid #616161; */
    /* border-radius: 5px; */
    text-align: left;
    padding: 15px 15px;
    background-color: #616161;
    color: #abd5f6;
}

.table tr td {
    word-spacing: normal;
    /* border-radius: 5px; */
    padding: 10px 15px;
    background-color: #9b9a9a;
}

/* hr before copyright */
.before-copyright {
    margin-top: 2em;
    height: 2px;
    background-color: #000000;
}

/* footer syntax */
.footer {
    text-align: center;
    font-family: monospace;
    font-size: 25px;
    margin: 0.75em 0 0 0;
}



/* for tablet */
@media only screen and (max-width: 768px) {
    #time {
        display: none;
    }

    #navbar {
        width: fit-content;
    }

    #navbar ul {
        height: 95%;
        overflow-x: auto;
    }

    #navbar > ul > li {
        font-size: 15px;
    }

    #navbar > ul > li > a {
        margin-left: 0.5rem;
    }

    #main-doc {
        margin-left: 20em;
        margin-right: 1em;
        padding: 0.75em;
    }

    #main-doc > header {
        font-size: 2.5em;
        margin-bottom: 1.5rem;
    }

    .line-height-para, .notes {
        line-height: 32px;
    }

    section > header {
        font-size: 1.75em;
        text-decoration: underline;
    }

    section > article {
        font-size: 1.25em;
        margin-top: 2em;
        word-spacing: normal;
    }

    #officialDocumentation > a {
        font-size: large;
        text-decoration: none;
    }
    
    button[value="next"], button[value="prev"] {
        margin-top: 1rem;
        left: 68%;
        padding: 5px;
        font-size: 0.75em;
    }

    .btn {
        left: 87% !important;
    }

    
    ol li {
        margin-left: .75rem;
        font-size: 2rem;
    }


    .para {
        font-size: 1.25em;
    }

    .line-height-li {
        line-height: 25px;
    }

    article code[class*=language-], article pre[class*=language-] {
        /* max-width: 500px; */
        /* font-size: 1rem; */
        text-wrap: balance;
    }

    .events, .imageSize {
        width: 480px;
    }
    
    .table tr th {
        padding: 7px;
    }

    .table tr td {
        padding: 7px;
        text-wrap: balance;
    }


    .questions li {
        font-size: 1.25rem;
    }


    /* footer */
    .footer {
        font-size: 20px;
    }
}


/* for mobile */
@media only screen and (max-width: 600px) {
    #navbar {
        all: unset;
        position: static;
        width: 100%;
        text-align: center;
    }

    .mobile {
        background: #D9D9D9;
        position: fixed;
        top: 0;
        width: 100%;
        display: flex;
        align-items: center;
        border-bottom: 2px solid #8b0b8b;
        margin-bottom: 1em;
        z-index: 1000;
    }

    #menu > img {
        display: block;
        /* left: 5% !important; */
    }

    /* .horizontal > img {
        display: block;
    } */
    
    /* .horizontal > img {
        width: 20px;
        margin: 0;
        padding: 0;
        left: -100%;
        position: relative;
    } */

    #menu > img, .horizontal > img {
        margin-left: 1rem;
    }

    a > .left {
        /* display: block; */
        width: 60%;
        margin-left: auto;
        margin-right: auto;
    }

    #navbar > ul {
        display: none;
    }

    #navbar ul {
        height: 100%;
    }

    #navbar > ul > li {
        padding-left: 10px;
        text-align: left;
        width: 97.25%;
        font-size: large;
    }

    #navbar > ul > li:last-child {
        border-bottom: 1px solid;
    }

    .nav {
        margin-top: 75px;
    }

    #main-doc {
        margin: 0 7px;
        /* margin: 0; */
        margin-top: 75px;
        padding: 0.5em;
    }

    #main-doc > header {
        font-size: 2em;
    }

    section > header {
        font-size: 1.50em;
    }

    section > article {
        font-size: 1em;
    }

    .line-height-para, .notes {
        line-height: 21px;
    }

    .line-height-para {
        text-align: justify;
    }

    button[value="next"], button[value="prev"] {
        left: 60%;
    }

    .btn {
        left: 80% !important;
    }


    ol li {
        margin-left: 0.5rem;
        font-size: 1.5rem;
    }

    dl dt code, dl dd code, ul li code, p code, li code {
        background-color: #a59fa5;
        border-radius: 2px;
        padding: 2px 3px;
    }

    .margin-from-top {
        margin-top: 2rem;
    }

    article code[class*=language-], article pre[class*=language-] {
        font-size: 1rem;
    }

    /* code.language-js {
        font-size: 0.7rem;
    } */

    code[class*=language-], pre[class*=language-] {
        text-wrap: balance;
    }

    
    /* arrays */
    .mobile-width {
        width: 97%;
    }

    .margin-5em-top {
        margin-top: 3em;
    }

    .font-size-20px {
        font-size: inherit;
    }

    .examples {
        font-size: 25px;
    }

    .light-weight{
        font-size: 20px;
    }
    
    .light-weight, .examples {
        text-decoration: underline;
    }


    /* alertPromptConfirm */
    .imageResize {
        width: 85%;
        height: 75%;
        margin-left: auto;
        margin-right: auto;
    }


    /* walking the DOM */
    ol[type="a"] li {
        font-size: medium;
    }

    .center-image {
        /* display: unset; */
        /* margin-left: 0;
        margin-right: 0; */
        width: 85%;
        /* all: unset; */
    }


    .para {
        font-size: 1em;
    }

    .line-height-li {
        line-height: 20px;
        text-align: justify;
    }

    .events, .imageSize {
        width: 95%;
    }


    .question li {
        padding: 0;
        margin: 0;
        font-size: 1rem;
        margin-left: 0;
    }

    .questions li a {
        padding: 0;
        line-height: 1.5rem;
        text-align: justify;
    }

    #main-doc > h1 {
        font-size: 20px;
        text-align: justify;
    }

    /* problem 34 */
    .answer {
        margin-top: -20px;
        color: blue;
        font-size: 1.25rem;
    }


    /* footer */
    .footer {
        margin: 0 0 0.5rem 0;
        font-size: 16px;
        text-align: center;
    }
}