@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
body{
background-color: #008080;
background-attachment: fixed;
background-position: center;
background-size:cover;
letter-spacing:1px;
text-align:justify;
font-size:13px;
line-height:20px;
font-family: 'IBM Plex Mono', monospace;
margin:0 auto;
color:black;
overflow:hidden;
}

#main {
    position:relative;
    width:600px;
    margin:70px auto;
}

.mainbody {
    position:relative;
    height:100%;
    max-height:300px;
    width:auto;
    background-color:white;
    border:3px grey outset;
}

.sidebody {
    position:absolute;
    height:300px;
    width:300px;
    background-color:white;
    border:3px grey outset;
}

.title {
    position:relative;
    height:auto;
    width:auto;
    border-bottom:1px grey dotted;
    background:linear-gradient(to right, #000080, #1084D0);
    padding:2px;
    color:white;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.buttonsgroupings {
    position:relative;
    height:auto;
    width:auto;
    display:flex;
    justify-content:space-evenly;
    align-items:center;
}

.buttons {
    position:relative;
    height:20px;
    width:20px;
    border:2px grey outset;
    background-color:darkgrey;
    margin-left:5px;
    cursor:pointer;
}

.buttons:active {
    background-color:grey;
    border:2px darkgrey inset;
}

.buttonsexit {
    position:relative;
    height:20px;
    width:20px;
    border:2px grey outset;
    background-color:darkgrey;
    margin-left:5px;
    cursor:pointer;
}

.buttonsexit:active {
    background-color:red;
    border:2px darkgrey inset;
}

.mainbodytext {
    margin:5px;
    height:auto;
    width:auto;
    overflow:auto;
}

.tree {
    list-style:none;
    padding-left:20px;
    position:relative;
}

.tree li {
    position:relative;
    padding-left:20px;
    line-height:20px;
}

.tree li::before {
    content:"";
    position:absolute;
    top:0;
    left:8px;
    border-left:1px dotted #000;
    height:100%
}

.tree li::after {
    content:"";
    position:absolute;
    top:10px;
    left:8px;
    width:12px;
    border-top:1px dotted #000;
}

.tree li:last-child::before {
    height:0.7em;
}

.tree .icon {
    margin-right:6px;
}

.allfolders {
    height:auto;
    background-color:darkgrey;
    padding:3px;
    border:2px outset darkgrey;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.allfoldersbutton {
    color:grey;
    height:20px;
    width:20px;
    cursor:pointer;
}

a {
    letter-spacing:1px;
    display:inline-block;
    color:darkslategrey;
    text-decoration:none;
    transition:letter-spacing 0.1s ease-in;
}

a:hover {
    text-decoration:gold wavy underline;
    letter-spacing:2px;
}