/* Header */
.header {
    background-color: rgb(25, 26, 27);

    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 10vh;

    box-shadow: 0 0 10px 10px rgb(0, 0, 0, 0.2);
}

/* > Header title */
.header-title {
    background-color: red;

    width: 0; height: 100%;
    display: inline-block;
}

.header-title-text {
    position: absolute;
    top: 50%; left: 2%;
    width: auto;
    display: block;

    transform: translateY(-50%);
}

.header-title-text-link {
    font-size: 3.2vw;
    color: rgb(0, 206, 124);
    text-shadow: 0 0 14px rgb(0, 206, 124, 0.2),
        0 15px 22px rgb(0, 206, 124, 0.2);
}

.header-title-text-link:hover {
    font-size: 3.2vw;
    color: rgb(0, 206, 124);
    text-shadow: 0 0 14px rgb(0, 206, 124, 0.2),
        0 15px 22px rgb(0, 206, 124, 0.2);
}

/* > Search bar */
.header-search {
    position: absolute;
    left: 31.5vw;
    display: inline-block;
    width: auto; height: 100%;
}

.header-search-bar {
    background-color: rgb(0, 0, 0, 0);
    border-width: 0;
    border-bottom: 0.2vw solid rgb(226, 183, 19);
    outline: 0;
    
    position: absolute;
    top: 50%;
    padding: 0.8vw;
    margin-top: -0.2vw;
    padding-bottom: 0;
    display: block;
    width: 12vw;

    transform: translateY(-50%);

    font-size: 2vw;
    color: rgb(226, 183, 19);
    text-shadow: 0 0 10px rgb(226, 183, 19, 0.3),
        0 15px 15px rgb(226, 183, 19, 0.3);
    line-height: 0.75;
    
    -webkit-transition: width .35s ease-in-out;
    transition: width .35s ease-in-out;
}

.header-search-icon {
    position: fixed;
    display: none;
    top: 2vh; right: 4vh;
}

.header-search-icon-image {
    position: relative;
    width: 6vh; height: 6vh;

    transition: 0.3s;
    opacity: 0;
}

.header-search-icon-image:hover {
    transform: translateX(10%);
    cursor: pointer;
}

.header-search-bar::placeholder {
    color: rgb(226, 183, 19, 0.6);
    text-shadow: 0 0 10px rgb(226, 183, 19, 0.3),
        0 15px 15px rgb(226, 183, 19, 0.3);
}

.header-search-bar:focus {
    width: 60vw;
}

/* > Navbar */
.header-navbar {
    float: right;
    width: auto; height: 100%;

    color: white;
}

.header-navbar-list-item {
    position: relative;
    display: inline-block;
    width: 16vh; height: 10vh;

    color: rgb(255, 255, 255);
    text-shadow: 0 0 12px rgb(255, 255, 255, 0.2),
        0 15px 18px rgb(255, 255, 255, 0.2);

    transition: 0.3s;
}

.header-navbar-list-item:hover {
    text-shadow: -5px 0 12px rgb(90, 70, 255, 0.3),
        10px 0 18px rgb(90, 70, 255, 0.3);
    color: rgb(90, 70, 255);

    cursor: pointer;

    transform: translateX(0.25vw);
}

/* >> Navbar contents */
.header-navbar-list-item-contents {
    position: absolute;
    top: 50%; left: 50%;
    vertical-align: middle;
    display: table-cell;
    width: auto; height: auto;

    opacity: 0;
    transform: translate(-50%, -50%);
    animation: fadeintop 0.2s;
    animation-fill-mode: forwards;
}

.header-navbar-list-item-contents-icon {
    margin-left: auto; margin-right: auto;
    display: inline-block;
    width: 16vh;

    text-align: center;
    font-size: 2.4vw;
}

/* Cat panels */

.catpanel {
    position: fixed;
    bottom: 0; left: 0;
    width: 100vw; height: 90vh;
}

/* > Cat panel title */

.catpanel-holder {
    position: absolute;
    top: 7%; left: 10%;
    width: 86%; height: auto;
}

.catpanel-holder-title {
    position: relative;

    font-size: 5vw;
    color: rgb(226, 183, 19);
    text-shadow: 0 0 14px rgb(226, 183, 19, 0.2),
        0 15px 22px rgb(226, 183, 19, 0.2);

    opacity: 0%;
    animation: fadeinleft 0.3s;
    animation-delay: 0.1s;
    animation-fill-mode: forwards;
}

/* > Cat panel table */

.catpanel-table{
    position: absolute;
    top: 21%; left: 10%;

    font-size: 3vw;
    text-align: left;
}

.catpanel-table-row-data-link {
    position: relative;
    display: inline-block;
    width: 35vw; height: 8vh;
    
    opacity: 0%;
    animation: fadeinleft 0.3s;
    animation-fill-mode: forwards;
    transition: 0.3s;
}

.catpanel-table-row-data-link-href {
    color: white;
    text-shadow: 0 0 14px rgb(255, 255, 255, 0.2),
        0 15px 22px rgb(255, 255, 255, 0.2);
}

.catpanel-table-row-data-link-href:hover {
    color: rgb(236, 76, 86);
    text-shadow: 0 0 14px rgb(236, 76, 86, 0.2),
        0 15px 22px rgb(236, 76, 86, 0.2);
}

.catpanel-table-row-data-link:hover {
    transform: translateX(2.5%);
}

/* > Cat panel exit */
.catpanel-exit {
    position: fixed;
    bottom: 5vh; left: 0;
    display: block;
    width: 100vw; height: 5vh;

    font-size: 3vw;
    color: rgb(255, 255, 255);
    text-align: center;
    text-shadow: 0 0 14px rgb(255, 255, 255, 0.2),
        0 15px 22px rgb(255, 255, 255, 0.2);
}

.catpanel-exit-text {
    position: relative;
    display: block;

    opacity: 0%;
    animation: fadeinbottom 0.3s;
    animation-fill-mode: forwards;
    transition: 0.3s;
}

.catpanel-exit-text:hover {
    text-shadow: 5px 0 12px rgb(90, 70, 255, 0.3),
        -10px 0 18px rgb(90, 70, 255, 0.3);
    color: rgb(90, 70, 255);

    cursor: pointer;
}

/* > Subcat panels */

.catpanel-subcat-holder {
    position: absolute;
    top: 7%; left: 10%;
    width: 86%; height: auto;
}

.catpanel-subcat-holder-title {
    position: relative;

    font-size: 5vw;
    color: rgb(236, 76, 86);
    text-shadow: 0 0 14px rgb(236, 76, 86, 0.2),
        0 15px 22px rgb(236, 76, 86, 0.2);

    opacity: 0%;
    animation: fadeinleft 0.3s;
    animation-delay: 0.1s;
    animation-fill-mode: forwards;
}

.catpanel-subcat {
    background-color: rgb(35, 41, 51);

    position: fixed;
    width: 100vw; height: 100vh;

    z-index: -1;
}