html, body{
	overflow-y: scroll;
}
body {
    font-family: Verdana;
}

.banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.path {
    width: 80vw;
}

.path a {
    text-decoration: none;
}

.path a:hover {
    text-decoration: underline;
}

.content {
    margin-top: 110px;
}

#readme {
    width: 80vw;
    margin: auto;
}

#readme-header {
    height: 40px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-weight: 600;
    font-size: 30px;
    padding-left: .5em;
}

#readme-content {
    padding: .5em 1.5em 1.5em 1.5em;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.flex-container {
    display: flex;
    flex-flow: column;
    width: 80vw;
    margin: .5em auto 0 auto;
}

.file-info {
    display: flex;
}

.file-info > div {
    margin: .1em;
    height: 40px;
    font-size: 20px;
    display: flex;
    align-items: center;
}

@media (max-width: 750px) {
    .file-info .name {
        width: calc(100% - 30px);
    }

    .file-info .last-modified {
        display: none;
    }
}

@media (max-width: 500px) {
    .file-info .name {
        width: calc(100% - 110px - 30px);
    }

    .file-info .size {
        display: none;
    }
}

.header {
    font-weight: 600;
}

.file-info .icon {
    width: 30px;
    justify-content: center;
}

.file-info .name {
    flex: auto;
    width: calc(100% - 110px - 30px - 250px);
    overflow-x: clip;
    text-wrap: nowrap;
}

.file-info .size {
    width: 110px;
    margin-left: auto;
    text-align: right;
}

.file-info .last-modified {
    width: 250px;
    margin-left: auto;
    text-align: right;
}

.flex-container a {
    text-decoration: none;
    color: black;
}

.modal {
    display: none;
    position: fixed;
    z-index: 5;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    overflow-y: auto;
}

.modal-card {
    justify-content: center;
    display: flex;
}

.modal-body {
    border-radius: 5px;
    padding: 1em;
    width: 50vw;
    margin-top: 5em;
    margin-bottom: 5em;
}

.button {
    padding: 0.5em;
    border-radius: 3px;
    text-decoration: none;
}

.button:hover {
    box-shadow: .15em .15em lightgrey;
    cursor: pointer;
}

.codeblock {
    padding: 1em;
    border-radius: 5px;
    font-family: Consolas;
}

code {
    padding: 0 !important;
}

img {
    max-width: 100%;
}

video, audio {
    width: 100%;
}

/* Preview popup */

.preview-title {
    display: inline;
    margin-right: 1em;
}

.preview-content {
    margin: 1em 0;
}

@media (max-width: 1000px) {
    .modal-body {
        width: 100%;
    }
}

/* PDF preview */

object {
    height: 80dvh;
}