body {
    max-width: 100%;
    background-color: var(--bg);
    font-family: Comic Sans MS;
}

a {
    color:aquamarine;
}
.mid {
    margin:auto;
    width:fit-content;
}

code {
    background-color: #313233;
    color: #e1f8cb;
    padding: 5px;
    border-radius: 3px;
    font-family:'Courier New', Courier, monospace;
}

.rb {
    padding:5px;
}
.container {
    width:90%;
    margin:auto;
}
.rb {
    margin:auto;
    width:fit-content;
}
.rbc, .rba {
    margin:auto;
    max-width:80%;
}

.rba {
    padding: 5px;
    border-radius: 15px;
    background-color: var(--mid) ;
    margin-top:10px;
}

.pix {
    margin: 10px;
    transition-duration: 0.5s;
}



.top {
    display: flex;
    align-items:start;
    justify-content: center;
    align-content: center; 
    width:fit-content;
    flex-wrap: wrap;
    margin:auto;
    margin-bottom:25px;
}


.photo {
    max-width: 75%;
}
.photoh {
    width: fit-content;
    /* margin:auto; */
}

.window {
    background-color: var(--mid);
    border-radius: 5px 5px 0px 0px;
    padding:5px;
    border:var(--main) solid 1px;
    width: min(100%,750px);
    margin: 10px auto;
}
.windowbar {
    display:flex;
    justify-content: space-between;
    color:var(--light);
    
}

.winbutton {
    background-color: var(--mid);
    line-height: 15px;
    width:15px;
    height:15px;
    text-align: center;
    padding:2px;
    margin-bottom:5px;
    border-radius: 2px;
    border:var(--light) solid 1px;
}

.wintitle {
    margin-left:5px;
}
.wincontent {
    background-color: var(--light);
    padding:5px;
}

.active {
    background-color: var(--hl);
}



.folder > .icon.pink, .subfolder > .icon.pink {
    background-image: url("/assets/images/usb/folderpink.png");
    background-origin:content-box;
    background-repeat: no-repeat;
    width:80px;
    height:65px;
    pointer-events: none;
    margin:auto;
    border: 10px transparent solid;
    border-radius: 10px;
}

.folder:hover > .icon.pink {
    background-color: var(--hl);
    border:10px var(--hl) solid;
}

/* .subfolder:hover > .icon.pink {
    background-color: var(--mid);
    border:10px var(--mid) solid;
} */

.folder, .file, .subfolder {
    width: 110px;
    text-align: center;
    display: inline-block;
    padding: 5px;
    /* padding-bottom:30px; */ 
    margin-bottom:-25px;
    border-radius: 15px 15px 0 0;

}

/* .folder, .subfolder {
    cursor:pointer;
} */
 .folder{
    cursor:pointer;
}


.wincontainer {
    width: fit-content;
}

.winsub {
    background-color: var(--hl);
    min-width:fit-content;
    max-width: inherit;
    border-radius: 0 0 15px 15px;
    padding:5px;
}

.file > .icon.pink {
    background-image: url("/assets/images/usb/txt.png");
    width:80px;
    height:65px;
    border: 10px transparent solid;
    background-origin:content-box;
    background-repeat: no-repeat;
}

.desc {
    background-color: var(--mid);
    color:var(--hl);
    width:fit-content;
    padding:2px;
    border-radius: 5px;
}

.tooltip {
  /* position: relative; */
  display: inline-block;
  /* width:min-content; */
  /* border-bottom: 1px dotted black; */
}

.tooltip .tooltiptext {
  visibility: hidden;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  display:block;
  /* z-index: 1; */
}

.tooltiptext {
    position:relative;
    width: 120px;
}
.tooltiptext::after {
  content: "";
  position: relative;
  top:-32px;
  left:-32px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}