*, *:after, *:before {
    box-sizing  : border-box;
    font-family : 'Roboto Condensed', 'Roboto', 'Fira Code', 'Open Sans SemiBold', 'OpenSans', 'Segoe UI', Helvetica, Arial, -apple-system, sans-serif
}

/*noinspection CssOverwrittenProperties*/
a {
    text-decoration-line  : grammar-error;
    text-decoration-line  : spelling-error;
    text-decoration-style : wavy;
}

nav * {
    font-family     : 'Wendy One', 'Fira Mono', 'OpenSans', 'Open Sans', 'Segoe UI', Helvetica, Arial, -apple-system, sans-serif !important;
    text-align      : center;
    margin-bottom   : 0;
    text-decoration : none !important;
}

nav .brand-logo {
    display             : flex;
    display             : -o-flex;
    display             : -ms-flex;
    display             : -moz-flex;
    display             : -ms-flexbox;
    display             : -webkit-flex;

    align-items         : center;
    -webkit-align-items : center;

    padding-left        : 0.2rem;
}

nav a.brand-logo > img {
    max-height : 52px;
    max-width  : 52px;
}

.responsive {
    float       : left;
    margin-left : 2vh;
}

.clearfix:after {
    content : "";
    display : table;
    clear   : both;
}

.pb-5 {
    padding-bottom : 0.5rem;
}

.card {
    content            : "\\A";
    position           : relative;
    top                : 0;
    left               : 0;
    transition         : all 0.5s;
    -webkit-transition : all 0.5s;
}

.card:hover {
    transform : scale(1.5);
    position  : relative;
    z-index   : 22;
}

.meme-item .card {
    transition             : all 0.5s;
    -webkit-transition     : all 0.5s;

    display                : flex;
    display                : -o-flex;
    display                : -ms-flex;
    display                : -moz-flex;
    display                : -ms-flexbox;
    display                : -webkit-flex;

    flex-direction         : column;
    -ms-flex-direction     : column;
    -webkit-flex-direction : column;

    align-items            : stretch;
    -webkit-align-items    : stretch;
}

.meme-item .card .meme-user {
    padding : 0.2rem;
}

.meme-item .card .video-indicator {
    height                  : 32px;
    width                   : 32px;
    position                : absolute;
    top                     : 5px;
    left                    : calc(100% - 37px);

    border                  : none;
    border-radius           : 100%;

    backdrop-filter         : blur(5px);
    -webkit-backdrop-filter : blur(5px);
}

div.gallery img {
    margin-bottom : 2vh;
    border        : 1px solid #000000;
    float         : left;
}

div.gallery img:hover {
    border : 1px solid #777777;
}

#shadow_back {
    display    : none;
    background : #00000073 !important;
    height     : 100% !important;
    width      : 100% !important;
    position   : fixed !important;
    left       : 0 !important;
    right      : 0 !important;
    top        : 0 !important;
    z-index    : 25;
}

#shadow_back > div {
    position : relative !important;
    margin   : auto auto !important;
    width    : fit-content !important;
}

#shadow_back .card-panel {
    width   : 50vw !important;
    height  : 90vh !important;
    padding : 0 !important;
}

#shadow_back #memeLoader {
    position   : absolute !important;
    border     : none !important;
    max-width  : 20% !important;
    max-height : 20% !important;
    top        : 40% !important;
    left       : 40% !important;
}

#shadow_back #memeImage, #shadow_back #memeVideo {
    display    : block;
    position   : absolute;
    top        : 50%;
    left       : 50%;
    border     : none !important;
    max-height : 100% !important;
    max-width  : 100% !important;
    padding    : 2px !important;
    margin     : auto -50% auto auto !important;
    transform  : translate(-50%, -50%) !important;
}

#shadow_back #uploadedInfo {
    display                    : block;
    position                   : relative;
    background                 : #607d8b;
    top                        : 100%;
    border-bottom-left-radius  : 5px;
    border-bottom-right-radius : 5px;
    text-align                 : center;
    color                      : #ffffff !important;
    font-size                  : 1.3em !important;

    box-shadow                 : 1px 4px 2px 0 rgba(0, 0, 0, 0.14);
    -o-box-shadow              : 1px 4px 2px 0 rgba(0, 0, 0, 0.14);
    -moz-box-shadow            : 1px 4px 2px 0 rgba(0, 0, 0, 0.14);
    -webkit-box-shadow         : 1px 4px 2px 0 rgba(0, 0, 0, 0.14);

    text-shadow                : 0 2px 1px rgba(0, 0, 0, 0.14);
}

#shadow_back a {
    color : #d4e157 !important;
}

@media only screen and (max-width : 992px) {
    nav .brand-logo {
        left              : initial !important;
        -webkit-transform : initial !important;
        transform         : initial !important;
    }
}