.page-padding {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

.layout {
    min-height: 100vh;
    flex-direction: column;
    justify-content: center;
    display: flex;
}

.container {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
}

.wire-wrap {
    position: relative;
}

.front-wires {
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}

.box {
    z-index: 2;
    width: 6rem;
    height: 6rem;
    background-color: #edebeb;
    border: 1px solid #d5d5d5;
    border-radius: 1rem;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: -19%;
    bottom: auto;
    left: 0%;
    right: auto;
    box-shadow: 0 0 11px -2px rgba(0, 0, 0, .2);
}

.box.is-middle {
    top: 22%;
}

.box.is-bottom {
    top: auto;
    bottom: -16%;
    left: 0%;
    right: auto;
}

.box.is-right {
    top: auto;
    bottom: 6%;
    left: auto;
    right: 0%;
}

.emoji {
    font-size: 2.6rem;
    line-height: 1;
}

@keyframes slideMask {
    from {
        x: -100%;
    }

    to {
        x: 100%;
    }
}

.mask-rect {
    animation: slideMask 3s ease infinite;
    animation-direction: alternate;
}