body {
    background-color: #e74c3c;
    animation: bg-color 30s infinite;
    -webkit-animation: bg-color 10s infinite;
  }
  @-webkit-keyframes bg-color {
    0% { background-color: #e74c3c; }
    20% { background-color: #f1c40f; }
    40% { background-color: #1abc9c; }
    60% { background-color: #3498db; }
    80% { background-color: #9b59b6; }
    100% { background-color: #e74c3c; }
  }
  @keyframes bg-color {
    0% { background-color: #e74c3c; }
    20% { background-color: #f1c40f; }
    40% { background-color: #1abc9c; }
    60% { background-color: #3498db; }
    80% { background-color: #9b59b6; }
    100% { background-color: #e74c3c; }
  }

.wrap {
    width: 100vw;
    height: 100vh;
    position: relative;
  }

.wrap .inner {
    width: 50%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }

.wrap img {
    width: 75%;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }


@media screen and (min-width:320px) {
    .wrap img {
        width: 100%;
        height: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
}
}