@font-face {
    font-family: IndieFlower;
    src: url(IndieFlower-Regular.ttf);
}

body {
    background: #222;
    color: white;
    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
    margin: 0px;
    width: 100vw;
    min-height: 100vh;
    padding: 50px 0px;

    font-family: IndieFlower, sans-serif;
}

.header {
    font-size: 28px;
    margin-bottom: 30px;
    text-align: center;
    display: inline-block;
    width: 100%;
}

.image-frame {
    padding: 10px 10px 0px 10px;
    background: white;
    color: black;
    box-shadow: 0px 0px 2px 1px #000;
    margin: 25px 10px;
}

.image-frame > .image {
    width: 400px;
    height: 400px;
    background-color: black;
    background-position: center;
    background-size: cover;

    box-shadow: inset 0px 0px 5px 1px #000;
}

.image-frame > span {
    font-size: 24px;
    width: 100%;
    max-width: 400px;
    padding: 5px 0px;
    display: inline-block;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vertical-images {
    width: 100%;
    display: flex;
    justify-content: center;
}

.tilt-left-slight {
    transform: rotate(-1deg);
}

.tilt-right-slight {
    transform: rotate(1deg);
}

.tilt-left {
    transform: rotate(-3deg) translateX(10px);
}

.tilt-right {
    transform: rotate(3deg) translateX(-10px);
}

.tilt-left-much {
    transform: rotate(-6deg);
}

.tilt-right-much {
    transform: rotate(6deg);
}