@import url('https://fonts.googleapis.com/css?family=Bungee');

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

body {
    background-color: black;
}

html,
button {
    font-family: "Bungee";
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(auto, calc(100vw / 4)));
    grid-template-rows: repeat(3, auto);
    grid-template-areas:
    "header  header  header  header"
    "gallery gallery gallery filters"
    "footer  footer  footer  footer";
}

.header {grid-area: header;}
.gallery {grid-area: gallery;}
.filters {grid-area: filters;}
.footer {grid-area: footer;}

.header {
    height: 11vw;
    background-color: white;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 3vw));
    position: relative;
}

.header__box {
    background-image: url("../images/comic_patern1.jpg");
    background-size: 100%;
    height: calc(100% - 0.7vw);
    width: 100%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 3vw));
    position: absolute;
    top: 0;
    left: 0;
}

.header__title {
    font-size: 4vw;
    line-height: 2;
    padding: 0 5vw;
    color: #741e65;
    text-shadow: -0.2vw 0.2vw white;
}

.gallery {
    background-color: black;
    width: 100%;
    padding: 2vw;
    margin: 0 auto;
    display: grid;
    grid-gap: 2px;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: calc((100vw / 4 * 3 - 4vw) / 7);
}

.gallery__box {
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.gallery__img {
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.gallery__box--wide {
    grid-column: span 3;
    grid-row: span 2;
}

.gallery__box--small {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery__box--tall {
    grid-column: span 2;
    grid-row: span 3;
}

.gallery__box--big {
    grid-column: span 3;
    grid-row: span 3;
}

.gallery__overlay {
    position: absolute;
    bottom: calc((100vw / 4 * 3 - 4vw) / 7 * (-1));
    left: 0;
    height: calc((100vw / 4 * 3 - 4vw) / 7);
    width: 100%;
    background-color: white;
    clip-path: polygon(0 calc(0% + 2vw), 100% 0, 100% 100%, 0 100%);
    transition: all 300ms;
}

.gallery__overlay-box {
    background-image: url("../images/comic_patern1_small.jpg");
    background-position: center;
    background-size: 100%;
    height: 100%;
    position: relative;
    bottom: -0.7vw;
    clip-path: polygon(0 calc(0% + 2vw), 100% 0, 100% 100%, 0 100%);
    text-align: center;
    padding: 2.5vw 1.5vw 0;
    color: #741e65;
    font-size: 1.8vw;
    text-shadow: -0.15vw 0.15vw white;
    line-height: 1.5;
}

.gallery__box:hover .gallery__overlay {
    bottom: 0;
}

.filters {
    color: white;
    margin-right: 1vw;
}

.filters__header,
.filters__box {
    padding: 1vw 2vw;
}

.filters__header {
    font-size: 2.5vw;
}

.filters__box {
    line-height: 1;
}

.filters__box--active {
    background-color: white;
    color: black;
}

.filters__title {
    font-size: 1.5vw;
    margin-bottom: 0.5vw;
}

.filters__button {
    border: solid 2px black;
    background: white;
    color: black;
    font-size: 1vw;
    cursor: pointer;
    padding: 0.2vw 0.4vw;
    transition: all 200ms;
}

.filters__button:focus {
    outline: none;
}

.filters__button.active:hover {
    background-color: #ffb400;
    color: #fd0002;
}

.footer {
    height: 11vw;
    background-color: white;
    clip-path: polygon(0 0, 100% calc(0% + 3vw), 100% 100%, 0 100%);
    position: relative;
}

.footer__box {
    background-image: url("../images/comic_patern1.jpg");
    background-size: 100%;
    height: calc(100% - 0.7vw);
    width: 100%;
    clip-path: polygon(0 0, 100% calc(0% + 3vw), 100% 100%, 0 100%);
    position: absolute;
    bottom: 0;
    left: 0;
}

.clicked {
    background-color: #ffb400;
    color: #fd0002;
    border-color: white;
}

.clicked:hover {
    background-color: #fd0002;
    color: #ffb400;
}

.disabled {
    background-color: #514a4f;
    color: #201e20;
    cursor: not-allowed;
}

.shadowbox {
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.9);
    font-size: 0;
}

.lightbox {
    width: 65%;
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translate(-50%,-50%);
}

.lightbox-img {
    width: 100%;
}

.lightbox-close {
    position: absolute;
    width: 2vw;
    height: 2vw;
    top: -0.7vw;
    right: -16%;
    background-color: white;
    background-image: url("../images/close.png");
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 999;
    transition: background-color 250ms;
    cursor: pointer;
}

.lightbox-close:hover {
    background-color: #fd0002;
}

.lightbox-border {
    position: absolute;
    right: -15%;
    top: 0;
    width: 30%;
    height: 100%;
    background-color: white;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%);
}

.lightbox-info {
    position: relative;
    left: 0.7vw;
    top: 0;
    height: 100%;
    width: 100%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%);
    background-image: url("../images/comic_patern1.jpg");
    background-position: center;
    font-size: initial;
    padding: 5% 5% 5% 8%;
    color: black;
    line-height: 1.4;
}

.lightbox-header {
    margin-bottom: 1vw;
    font-size: 1.8vw;
    color: #741e65;
    font-size: 1.8vw;
    text-shadow: -0.15vw 0.15vw white;
}

.lightbox-filter {
    font-size: 1.2vw;
}

.lightbox-text {
    margin-bottom: 1vw;
    font-size: 1vw;
}