@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');


* { box-sizing: border-box;  
}

html, body { margin: 0; height: 100%; padding: 0;  
font-family: 'Courier New', Courier, monospace;
-webkit-font-smoothing: none;
-moz-osx-font-smoothing: auto;
text-rendering: optimizeSpeed;
background-color: rgb(17, 17, 17); color: limegreen;}

.app {
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-rows: 10% 90%;
}

#Heading {
    border: 1px solid #333;
    padding: 12px;
    overflow: auto;
    
    font-weight: 100;
}

#Main {
    display: grid;
    grid-template-columns: 30% 70%;
    min-height: 0;
}

#DirTree_container {
    display: grid;
    grid-template-rows: 10% 90%;
    border: 1px solid #333;
    border-top: 0;
    overflow: auto;
    min-width: 0;
    min-height: 0;
}

#DirTree_Header {
    border-bottom: 1px solid #333;
    padding-top: 6%;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
    font-size:larger;
    font-weight: lighter;
}

#DirTree {
    padding: 12px;
    overflow: auto;
    min-width: 0;
    min-height: 0;
    letter-spacing: 0px;
    word-spacing: 0px;
    font-size: 24px;
    font-weight: 800;
}

#iframeContainerMain {
    border: 1px solid #333;
    border-top: 0;
    border-left: 0;
    padding: 0;
    overflow: auto;
    min-width: 0;
    min-height: 0;
}

#iframeMain{
    display: inline-block;
    width: 100%;
    height: 100%;
}

.clickable_text{
    cursor :pointer;
}
.clickable_text:hover{
    color: green;
    
}