*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --background-color: #eee7d2;
    --text-color: #060a0a;
    --link-color: #060a0a;
    --border-color: black;
}
body{
    font-family: 'Courier New', Courier, monospace;
    background-color: var(--background-color);
    min-height: 100vh;
}
#back{
    display: block;
    font-family: 'Courier New', Courier, monospace;
}
#back a{
    display: block;
    text-decoration: none;
    color: black;
    font-weight: bold;
    background-color: rgba(0,0,0,0);
    padding: 0.5rem;
    padding-left: 0;    
    width: fit-content;
}
#back a::before{
    content: "<< ";
}
table{
    display: flex;
    flex-direction: column;
}
table tr{
    display: flex;
    flex-direction: row;
}
table tr td{
    display: block;
}
#chattable{
    height: 100%;
}

#chatHolder{
    height: calc(80% - 2rem);
    min-height: 300px;
    width: 300px;
    position: absolute;
    bottom: 0;
    right: -150px;
    margin: 1rem;
    transform: rotate(5deg);
    transform-origin: bottom;
    transition: all 1s ease;
}
#chatHolder:hover{
    transform: translateX(-150px) rotate(0deg);
 
}
#chatHolder iframe{
    height: 100%;
    min-height: 300px;
    border: none;
}
.wrapper{
    max-width: 900px;
    margin: auto;
    height: 100vh;
    overflow-y: auto;
}
.tooltip{
    background-color: rgba(0,0,0,0.5);
    color: white;
    display: block;
    padding: 0.5rem;
    text-align: center;
    width: fit-content;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
/**************************
COLOURS
**************************/
:root{
    --main: #000;
    --secondary: #FFF;
}

/**************************
SITEMAPS
**************************/
ul#sitemap, #sitemap li{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#sitemap *{
    list-style: none;
    list-style-type: none;
}
/* ul:not(:first-child){
    border-left: solid 1px var(--kuro);
    padding: 0 2rem;
} */
#sitemap.link{
    /* color: var(--kuro); */
    display: flex;
}
#sitemap .child.first{
    border-bottom: solid 1px var(--main);
}
#sitemap .child{
    border-left: solid 1px var(--main);
    padding-left: 0.5rem;
}
#sitemap a{
    color: inherit;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    width: 100%;
}
#sitemap .visited:after{
    content: " ✓";
    display: block;
    margin-left: auto;
    padding: 0 0.5rem;
}
#sitemap .link.alt{
    background-color: #48192e41;
}
#sitemap .link:not(.alt){
    background-color: #28182200;
}
#sitemap .link:hover{
    background-color: var(--main);
    color: var(--secondary);
}
a{
    color: var(--link-color);
}

#sidebar{
    border-left: solid var(--border-color) 1px;
    width: 162px;
    padding: 10px;
}
#sidebar li{
    margin-left: 0.5rem;
}