a {
    color: black;
    text-decoration: none;
}

.tranco {
    background: mediumpurple;
    color: lightyellow;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
}

.tranco:hover {
    color: yellow;
    box-shadow: 3px 3px 3px lightblue;
}

.npm {
    background: rgb(255, 115, 0);
    color: lightyellow;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
}

.npm:hover {
    color: yellow;
    box-shadow: 3px 3px 3px lightblue;
}

.github {
    background: rgba(169, 169, 169, 0.295);
    color: black;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
}

.github:hover {
    color: yellow;
    box-shadow: 3px 3px 3px lightblue;
}

nav h4 {
    text-align: center;
    font-weight: 900;
    color: lightslategray;
    font-size: 20px;
    margin-bottom: -10px;
}

main a {
    color: blue;
}

table:not(#navigation),
table:not(#navigation) td {
    border: 1px none black;
    border-collapse: separate;
    margin: 0 auto;
}

table:not(#navigation) td {
    border: 1px none;
    margin: 1px;
}

table:not(#navigation) td img {
    display: block;
    margin: 0 auto;
}

#wcc:hover {
    text-decoration: underline;
}

.topic {
    text-decoration: none;
    margin-left: 5px;
    font-size: 20px;
    width: 270px;
    display: block;
}

.topic:hover {
    text-decoration: underline;
}

.subtopic {
    text-decoration: none;
    margin-left: 10px;
    font-size: 19px;
    font-weight: bold;
}

.subtopic:hover {
    text-decoration: underline;
}

.subsubtopic {
    text-decoration: none;
    margin-left: 10px;
    font-size: 14px;
}

.subsubtopic:hover {
    text-decoration: underline;
}

nav>div {
    padding-left: 30px;
    text-indent: -30px;
    display: inline-block;
}

.code {
    background: #ccc;
    padding: 10px 10px;
    margin: 10px 5px;
    box-shadow: 5px 5px 5px;
    border-radius: 5px;

}

.code iframe {
    resize: vertical;
    width: 100%;
}

.codeButton {
    border: 2px solid black;
    background: #555;
    color: white;
    border-radius: 10px;
    margin-left: 5px;
    margin-right: 5px;
    padding-left: 5px;
    padding-right: 5px;
    cursor: pointer;
    box-shadow: 3px 3px;
    font-size: 12px;
}

.codeButton:hover {
    background: #777;
    color: lightyellow;
}

div>pre,
div>pre>code {
    margin: 0;
    padding: 0px;
    position: relative;
    top: 3px;
}

div>pre>code {
    overflow-x:auto !important;
}

iframe {
    background: white;
    width: 99.5%;
    margin-top: 10px;
    margin-bottom: 20px;
    overflow-x:scroll !important;
}

h6 {
    position: relative;
    top: 10px;
    background: #ccc;
    font-weight: normal !important;
    width: 100%;
    padding: 9px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.stackblitz, .expo {
    margin-top: 0;
    width: 100%;
}

.source_file_name {
    font-weight: bold;
}

.manual_output {
    background: white;
    display: block;
    overflow-x: scroll;
}

.menu_divider {
    width: 90%;
    left: 5%;
    position: relative;
}

.current_page {
    color: red !important;
}

.current_page::after {
    content: ' <<';
}

.centre {
    display: block;
    margin: 0 auto;
}

table:not(#navigation)>tbody>tr:first-child {
    background: black;
    color: white;
}

table:not(#navigation)>tfoot {
    background: lightgray;
}

ins iframe {
    background-color: transparent;
}

var{
    background: #bbb;
    border-radius: 5px;
}

mark{
    border-radius: 10px;
}

p{
    margin-top: 1rem !important;
    margin-bottom: 0 !important;    
}

*:not(li):not(main)>ul>li:first-of-type, 
*:not(li):not(main)>ol>li:first-of-type{
    margin-top: -1rem !important;
}

h2,h3,h4,h5,h6{
    margin-top:1.5rem !important;
}

@media (orientation:landscape), (min-width: 150vh) {
    body {
        margin: 0;
        background: url('nav_background.jpg') repeat-y;
        background-size: 270px auto;
    }
    nav {
        float: left;
        width: 270px;
        padding-top: 12px;
        display: block !important;        
    }
    .share {
        display: none;
    }
    #cc {
        text-decoration: none;
        font-size: 25px;
        margin-left: 14px;
        display: block;
        position: absolute;
        height: 33px;
        line-height: 33px;
        width: 240px;
        text-align: center;
        background: linear-gradient(to right, rgba(180, 180, 255, 0.9), rgba(240, 240, 255, 0.8));
        color: black;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }
    .menuButton {
        display: none;
    }
    main {
        float: left;
        width: calc(100% - 290px);
        margin-left: 10px;
        margin-right: 10px;
    }
    main>p>img {
        display: block;
        margin: 0 auto;
        width: 50vw;
    }
    table {
        font-size: 1rem;
    }
    code {
        white-space: pre-wrap;
        padding: 5px !important;
        margin-top: 5px;
        margin-bottom: 5px;
        display: block;
        background: black;
        color: white !important;        
    }    
    .youtube {
        height: 40vh;
    }
    .fb_iframe_widget_fluid_desktop,
    .fb_iframe_widget_fluid_desktop span,
    .fb_iframe_widget_fluid_desktop iframe {
        max-width: 100% !important;
        width: 100% !important;
    }
    .codeButton,
    .tranco, .npm, .github {
        font-size: 0.75rem !important;
    }
    #navigation {
        max-width: 100%;
        font-size: 1rem;
        margin: 0 auto;
        text-align: center;
    }
}

@media (orientation:portrait){
    body {
        margin: 0;
        font-size: min(2.5vw, 0.4cm) !important;
        height: 100%;
        width: 100vw;
        position: absolute;
        overflow-x: hidden;
    }
    nav {
        min-height: 100%;
        position: absolute;
        width: max(60%, 270px);
        padding-top: 12px;
        display: none;
        background: rgb(202, 217, 255);
        z-index: 100;
        font-size: 3vw !important;
    }
    #cc {
        text-decoration: none;
        font-size: 6vw;
        margin-left: 14px;
        display: block;
        position: absolute;
        text-align: center;
        background: linear-gradient(to right, rgba(180, 180, 255, 0.9), rgba(240, 240, 255, 0.8));
        color: black;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 20px;
        padding: 2vw;
    }
    h1 {
        margin-top: 3vw !important;
        margin-top: 1vw !important;
        font-size: 6vw !important;
    }
    .topic {
        font-size: 5vw;
    }
    .subtopic {
        font-size: 4vw;
    }
    .subsubtopic {
        font-size: 3vw;
    }
    .menuButton {
        display: inline;
        font-size: 4vw;
        margin: 2vw;
        padding: 1vw;
        border-radius: 1vw;
        box-shadow: 1vw 1vw 1vw lightblue;
        background: rgb(202, 217, 255);
        position: fixed !important;
        left: 80vw !important;
        top: 0.3vw !important;
        z-index: 999;
    }
    main {
        position: absolute;
        width: calc(100% - 30px);
        margin-left: 10px;
        margin-right: 20px;
    }
    main img {
        display: block;
        margin: 0 auto;
        width: 90vw;
    }
    table:not(#navigation) {
        font-size: clamp(0.5rem, 2vw, 1rem);
    }
    table:not(#navigation) td {
        border: 1px none;
        margin: 1px;
    }
    #navigation {
        width: 90%;
        font-size: 3vw;
        margin: 0 auto;
        text-align: center;
    }
    .youtube {
        height: 30vh;
    }
    .codeButton,
    .tranco, .npm, .github {
        font-size: 0.6rem !important;
    }
    code {
        white-space: pre-wrap;
        padding: 5px !important;
        margin-top: 5px;
        margin-bottom: 5px;
        display: block;
        background: black;
        color: white !important;        
    }
    .fb_iframe_widget_fluid_desktop,
    .fb_iframe_widget_fluid_desktop span,
    .fb_iframe_widget_fluid_desktop iframe {
        max-width: 100% !important;
        width: 100% !important;
        font-size: 2vw !important;
    }
}