body, html {
    height:100%
}

body {
    background: #c2c2c2;
    display:flex;
    margin:0;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-family: 'Noto Sans JP', sans-serif;
}

/*
 * Title
 */
#title {
    color: #4e2050;
}

/*
 * Ninja image
 */
.ninja {
    display: flex;
    flex-wrap: wrap;
}

.ninja-image {
    position: relative;
    background-image:url('images/ninja.png');
}

/*
 * Ninja settings
 */
#ninja-settings {
    position: fixed;
    left: 0;
    background: #e6e6e6;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    padding: 15px;
}
#ninja-settings p {
    text-align: center;
}

#ninja-settings .arrows {
    display: flex;
    justify-content: space-evenly;
}

#ninja-settings .arrows img {
    width: 32px;
    cursor: pointer;
}

/*
 * Email
 */
.email {
    position: fixed;
    top: 0;
    right: 0;
    background: #e6e6e6;
    padding: 15px;
    border-bottom-left-radius: 15px;
}

.email img {
    width: 96px;
}