:root {
    --accent-color: #712c54;
}

@font-face {
    font-family: "Dogica Pixel";
    src: url(fonts/dogicapixel.otf);
}

@font-face {
    font-family: "Pixelmix";
    src: url(fonts/pixelmix.ttf);
}

.hidden {
    display: none !important;
}

.interactive:hover {
    background-color: #ddd;
    cursor: pointer;
}

body {
    margin: 0;
    height: 100vh;
    width: 100vw;
    box-sizing: border-box;
    background-image: url(images/anastasia-taioglou-unsplash.jpg);
    background-size:cover;
    position: relative;
    overflow: hidden;
}

.window {
    position: absolute;
    line-height: 2em;
    image-rendering: pixelated;
    border-radius: 3px;
    font-family: "Dogica Pixel", "Pixelmix", sans-serif;
    background-color: rgba(255,255,255,0.9);
    font-size: 8pt;
    border: 3px solid white;
    display: flex;
    flex-direction: column;
}

.window-buttons {
    display: flex;
    align-items: center;
}

/* TOP BAR */
.top-bar {
    background-image: linear-gradient(to right, var(--accent-color), #814c74);
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 5px;
}

.title {
    align-self: center;
}

/* NAV */
.nav {
    padding: 5px;
    border: 3px solid white;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.nav-back-forward {
    display: flex;
    align-items: center;
}

.nav-button {
    width: 24px;
    height: 24px;
    margin: 0 5px;
}

.nav-button.disabled {
    opacity: 0.5;
}

.nav .breadcrumb-link {
}

/* MAIN */
#main {
    padding: 10px;
    flex-grow: 1;
    overflow-y: scroll;
}

#main::-webkit-scrollbar {
    width: 10px;
}

#main::-webkit-scrollbar-thumb {
    background-color: var(--accent-color);
}

.file-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.file {
    user-select: none;
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 5px;
}

.file-icon {
    width: 48px;
}

.file-label {
    word-break: break-all;
    text-align: center;
}

.intext-image {
    width: 50%;
}

/* Fancy window */

.drag-handle {
    cursor: move;
}