@font-face {
    font-family: 'Cardo';
    src: url('fonts/Cardo-Bold.ttf');
    src: local('Cardo'), url('fonts/Cardo-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Forum';
    src: url('fonts/Forum-Regular.ttf');
    src: local('Forum'), url('fonts/Forum-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Crimson';
    src: url('fonts/Crimson-Bold.ttf');
    src: local('Crimson'), url('fonts/Crimson-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Della Respira';
    src: url('fonts/DellaRespira-Regular.ttf');
    src: local('Della Respira'), url('fonts/DellaRespira-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Distro';
    src: url('fonts/DISTRO.ttf');
    src: local('Distro'), url('fonts/DISTRO.ttf') format('truetype');
}
@font-face {
    font-family: 'Dosis';
    src: url('fonts/Dosis-Bold.ttf');
    src: local('Dosis'), url('fonts/Dosis-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Fredericka the Great';
    src: url('fonts/FrederickatheGreat-Regular.ttf');
    src: local('Fredericka the Great'), url('fonts/FrederickatheGreat-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Friz Quadrata';
    src: url('fonts/FrizQuadrataRegular.ttf');
    src: local('Friz Quadrata'), url('fonts/FrizQuadrataRegular.ttf') format('truetype');
}
@font-face {
    font-family: 'Geosans Light';
    src: url('fonts/GeosansLight.ttf');
    src: local('Geosans Light'), url('fonts/GeosansLight.ttf') format('truetype');
}
@font-face {
    font-family: 'Macondo Swash Caps';
    src: url('fonts/MacondoSwashCaps-Regular.ttf');
    src: local('Macondo Swash Caps'), url('fonts/MacondoSwashCaps-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Marcellus SC';
    src: url('fonts/MarcellusSC-Regular.ttf');
    src: local('Marcellus SC'), url('fonts/MarcellusSC-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Poiret One';
    src: url('fonts/PoiretOne-Regular.ttf');
    src: local('Poiret One'), url('fonts/PoiretOne-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Spirit Medium';
    src: url('fonts/spiritmedium.ttf');
    src: local('Spirit Medium'), url('fonts/spiritmedium.ttf') format('truetype');
}
@font-face {
    font-family: 'Cinzel';
    src: url('fonts/Cinzel-Bold.ttf');
    src: local('Cinzel'), url('fonts/Cinzel-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Episode I';
    src: url('fonts/EPISODE1.ttf');
    src: local('Episode I'), url('fonts/EPISODE1.ttf') format('truetype');
}
@font-face {
    font-family: 'Fondamento';
    src: url('fonts/Fondamento-Regular.ttf');
    src: local('Fondamento'), url('fonts/Fondamento-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Journal';
    src: url('fonts/JOURNAL.ttf');
    src: local('Journal'), url('fonts/JOURNAL.ttf') format('truetype');
}
@font-face {
    font-family: 'Mervale Script';
    src: url('fonts/MervaleScript-Regular.ttf');
    src: local('Mervale Script'), url('fonts/MervaleScript-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Merienda';
    src: url('fonts/Merienda-Bold.ttf');
    src: local('Merienda'), url('fonts/Merienda-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Nothing You Could Do';
    src: url('fonts/NothingYouCouldDo1.ttf');
    src: local('Nothing You Could Do'), url('fonts/NothingYouCouldDo1.ttf') format('truetype');
}
@font-face {
    font-family: 'Nova Cut';
    src: url('fonts/NovaCut.ttf');
    src: local('Nova Cut'), url('fonts/NovaCut.ttf') format('truetype');
}
@font-face {
    font-family: 'Nova Round';
    src: url('fonts/NovaRound.ttf');
    src: local('Nova Round'), url('fonts/NovaRound.ttf') format('truetype');
}
@font-face {
    font-family: 'Ovo';
    src: url('fonts/Ovo-Regular.ttf');
    src: local('Ovo'), url('fonts/Ovo-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Parisienne';
    src: url('fonts/Parisienne-Regular.ttf');
    src: local('Parisienne'), url('fonts/Parisienne-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Pinyon Script';
    src: url('fonts/PinyonScript-Regular.ttf');
    src: local('Pinyon Script'), url('fonts/PinyonScript-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Quando';
    src: url('fonts/Quando-Regular.ttf');
    src: local('Quando'), url('fonts/Quando-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Quattrocento';
    src: url('fonts/Quattrocento-Bold.ttf');
    src: local('Quattrocento'), url('fonts/Quattrocento-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Radley';
    src: url('fonts/Radley-Regular.ttf');
    src: local('Radley'), url('fonts/Radley-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Raleway';
    src: url('fonts/Raleway-Bold.ttf');
    src: local('Raleway'), url('fonts/Raleway-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Redressed';
    src: url('fonts/Redressed.ttf');
    src: local('Redressed'), url('fonts/Redressed.ttf') format('truetype');
}
@font-face {
    font-family: 'Simonetta';
    src: url('fonts/Simonetta-Black.ttf');
    src: local('Simonetta'), url('fonts/Simonetta-Black.ttf') format('truetype');
}
@font-face {
    font-family: 'Spectral';
    src: url('fonts/Spectral-Bold.ttf');
    src: local('Spectral'), url('fonts/Spectral-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Spectral SC';
    src: url('fonts/SpectralSC-Bold.ttf');
    src: local('Spectral SC'), url('fonts/SpectralSC-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Stardos Stencil';
    src: url('fonts/StardosStencil-Bold.ttf');
    src: local('Stardos Stencil'), url('fonts/StardosStencil-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Stoke';
    src: url('fonts/Stoke-Regular.ttf');
    src: local('Stoke'), url('fonts/Stoke-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Tangerine';
    src: url('fonts/TangerineBold.ttf');
    src: local('Tangerine'), url('fonts/TangerineBold.ttf') format('truetype');
}
@font-face {
    font-family: 'Titillium Web';
    src: url('fonts/TitilliumWeb-Bold.ttf');
    src: local('Titillium Web'), url('fonts/TitilliumWeb-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Vollkorn';
    src: url('fonts/Vollkorn-Bold.ttf');
    src: local('Vollkorn'), url('fonts/Vollkorn-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Voltaire';
    src: url('fonts/Voltaire-Regular.ttf');
    src: local('Voltaire'), url('fonts/Voltaire-Regular.ttf') format('truetype');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Quando', 'Times New Roman', serif;
}
body {
    background: #000;
    overflow-x: hidden;
    overflow-y: overlay;
}
.logo-box {
    height: 80px;
    width: 80px;
    left: 0;
    top: 0;
    margin: 40px;
    position: fixed;
    z-index: 2;
}
.logo {
    width: 100%;
    height: 100%;
    transition: filter 0.5s;
}
.logo:hover {
    filter: drop-shadow(0 0 0.5vw #fff);
}

#bg-video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
}

.item {
    max-width: 80%;
    max-height: 80%;
    bottom: 10%;
    margin-left: 50%;
    transform: translateX(-50%);
    position: absolute;
    filter: contrast(20%) brightness(20%) blur(0.1vw);
    transition: filter .5s;
}
.item-box:hover .item {
    filter: none;
}
.black-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #000000;
}
.image-link {
    width: 100%;
    height: 100%;
    position: absolute;
}

.label {
    text-align: center;
    text-shadow: 0 0.05vw 0 #ffc8a1AA, 0 -0.05vw 0 #180a00aa;
    color: #110601aa;
    font-weight: bold;
    background: url('graphics/label.png');
    background-size: 100% 100%;
    filter: drop-shadow(0.2vw 0.2vw 0.1vw #0008);
}
.title-label {
    height: 6vw;
    width: 30vw;
    line-height: 6vw;
    font-size: 2.5vw;
}

/*Context*/
.context-menu {
    position: absolute;
    background: #fffa;
    border: 1px solid #fff;
    z-index: 100;
}
.context-item {
    padding: 5px;
    width: 100%;
    font-size: 20px;
    font-weight: 900;
    display: block;
    color: #000;
    background: none;
    border: none;
    cursor: pointer;
}
.context-item:hover {
    background: #fff;
}

::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {
    background: #0000;
}
::-webkit-scrollbar-thumb {
    background-color: #51baf7;
    box-shadow: inset 1px 1px 5px #120042, inset -1px -1px 5px #120042;
    border-radius: 6px;
    filter: url('#texture');
}