html {
    font-family: sans-serif;
}
body {
    margin: 0;
    padding: 0;
}

.icon,
.icon-small,
.list-icon {
    height: 38px;
    cursor: pointer;
    aspect-ratio: 1 / 1;
    transition: 0.2s;
    user-select: none;
}

.icon-small {
    height: 30px;
}

.list-icon {
    height: 32px;
}

.icon:hover,
.icon-small:hover,
.list-icon:hover {
    filter: invert(40%);
    transition: 0.2s;
}

.icon-inline {
    display: inline;
    margin: 10px;
}

.flex-container {
    display: flex;
    width: 100%;
    align-items: center;
}

.float-right {
    float: right;
}
.float-clear {
    clear: both;
    background-image: url();
}

.show-element {
    display: block !important;
}

.hide-element {
    display: none !important;
}

/* =========================================
   View
========================================= */

.image-container {
    max-width: 960px;
    margin: auto;
    background-color: #ffffff;
}

.image-container img {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    display: block;
    z-index: -1;
}

.image-comic-container {
    position: relative;
}

.background-container {
    background-size: cover !important;
}

/* =========================================
   Footer
========================================= */

footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    height: 5rem;
    padding: 0 10%;
    border-top: 2px solid #b3b2b2;
    background-color: #ffffff;
}

footer a {
    text-decoration: none;
    color: #502479;
}

footer a:hover {
    color: #686868;
}