*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.font-lilita-one { font-family: "Lilita One"; }
.font-arial { font-family: "Arial"; }
.fz16 { font-size: 16px; }

.bg-black { background-color: #131825; }
.bg-purple { background-color: #6c63ff; }
.bg-purple-gradient { background: linear-gradient(to right, #6c63ff, #9198e5); }
.bg-white { background: linear-gradient(to right, #dbdbdb, #c7c7c7); }
.bg-lblack { background-color: #232a3e; }
.bg-red { background-color: #ff6584; }
.bg-green { background-color: #22c55e; }
.bg-orange { background-color: #f59e0b; }
.bg-lblue { background-color: #06b6d4; }
.bg-pink { background-color: #ec4899; }
.bg-gray { background-color: rgba(185, 185, 185, 0.548); }

.bs-black20 { box-shadow: 0px 0px 20px black; }

.border2 { border: 2px solid black; }
.border2:hover { border: 2px solid lime; }

.br8 { border-radius: 8px; }
.br16 { border-radius: 16px; }

.p16 { padding: 16px; }

.cien-x-cien {width: 100%;height: 100%;border:2px solid black;border-radius:16px}

.of-hidden { overflow: hidden; }

.flex { display: flex; }
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }

.no-display { display: none; }

.jc-space-between { justify-content: space-between; }
.jc-center { justify-content: center; }
.jc-self-center { justify-self: center; }
.jc-self-flex-start { justify-self: flex-start; }
.jc-self-space-between { justify-self: space-between; }

.align-items-center { align-items: center; }
.align-items-flex-start { align-items: flex-start; }
.align-self-center { align-self: center; }

.gap6 { gap: 6px; }
.gap8 { gap: 8px; }

.wrap { flex-wrap: wrap; }

.flex-1 { flex: 1; }
.f-1-1-160 { flex: 1 1 160px; }
.f-2-1-300 { flex: 2 1 300px; }
.f-1-1-200 { flex: 1 1 200px; }

.app-header {
    width: 100vw;
    height: 64px;
    padding: 0 30px;
}
.title-font-size{font-size:25px}

.app-main {
    width: 100vw;
    height: calc(100vh - 112px);
}

.app-footer {
    width: 100vw;
    height: 48px;
}

.block-container {
    width: 100%;
    height: 100%;
}

.nav-container {
    width: 100%;
    height: 50px;
}

.nav-title {
    width: 40%;
    height: 100%;
}

.nav-year {
    width: 20%;
    height: 100%;
}

.nav-page {
    width: 12%;
    height: 100%;
}

.nav-search {
    width: 12%;
    height: 100%;
}
.nav-filter{
    width: 12%;
    height: 100%;
}

#search-button img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

.results {
    width: 100%;
    height: calc(100% - 50px);
    overflow:scroll;
}

.billboard {
    width: 140px;
    height: 180px;
}

.billboard:hover {
    box-shadow: 0px 0px 50px black;
    transform: scale(1.1);
    transition: all 0.5s ease-in-out;
}

.b-poster {
    width: 100%;
    height: 60%;
}

.b-meta {
    width: 100%;
    height: 40%;
}

@media (min-width:768px) {
    .title-font-size{font-size:30px; justify-content:center;}
    .block-container {
        width: 90%;
        height: 90%;
        border-radius: 8px;
        margin: 90px;
    
    }
    .nav-title {
        width: 60%;
        height: 100%;
    }

    .nav-year {
        width: 30%;
        height: 100%;
    }

    .nav-page {
        width: 5%;
        height: 100%;
    }

    .nav-search {
        width: 5%;
        height: 100%;
    }

    .results{overflow:unset}

    }