@font-face {
    font-family: VCROSDMono;
    src: url(fonts/VCR_OSD_MONO_1.001.ttf);
}

body {
    font-family: VCROSDMono;
    background-color: #252525;
    color:#00c800;
    text-shadow: 0 0 5px #009600;
    margin: auto;
}

.upperThird {
    text-align: center;
    margin-top: 50px;
    font-size: 45px;
}

.fileDiv {
    margin: auto;
    border-style: solid;
    border-color: #00c800;
    box-shadow: 0 0 5px #009600;
    border-width: 5px;
    width: 50%;
    height: max-content;
    padding: 10px 10px 10px 10px;
    display: grid;
    grid-template-areas:
    "🖼️ ⬆️"
    "🖼️ 🔒"
    "🖼️ 📜"
    "🖼️ ➡️";
    gap: -250px;
}

.fileName {
    font-size: 35px;
    padding: 0%;
    grid-area: ⬆️;
}

.fileProtectionStrength {
    font-size: 22px;
    grid-area: 🔒;
}

.fileTypeImage {
    width: 75%;
    grid-area: 🖼️;
}

.fileDescription {
    grid-area: 📜;
}

.fileOpen {
    font: inherit;
    height: 30px;
    width: 225px;
    background-color: #222222;
    border-style: solid;
    border-color: #00c800;
    border-width: 1px;
    color: #00c800;
    grid-area: ➡️;
}

.fileOpen:hover {
    background-color: #00c800;
    border-style: solid;
    border-color: #00c800;
    border-width: 1px;
    color: #222222;
    cursor: pointer;
    grid-area: ➡️;
}

.goBack {
    font: inherit;
    height: 30px;
    width: 125px;
    background-color: #222222;
    border-style: solid;
    border-color: #00c800;
    border-width: 1px;
    color: #00c800;
    position: absolute;
    top: 45px;
    right: 10%;
    transform: translateX(50%);
}

.goBack:hover {
    background-color: #00c800;
    border-style: solid;
    border-color: #00c800;
    border-width: 1px;
    color: #222222;
    cursor: pointer;
}