.wrapper {
  widows: 100%;
  padding: 20px;
  box-sizing:border-box;
  text-align:center;
}

.circle {
  width: 100px;
  padding:50px 0;
  line-height: 0;
  margin: 60px auto;
  background-color: pink;
  color: white;
  border-radius: 50px;
  cursor:pointer;
  transition:background 1s, transform 1s ;
}
.circle:hover {
  background-color: salmon;
  transform: rotate(360deg);
}


/***************************
マリオのアニメーション
**************************/
html,body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
}
.grass , .sky , .road {
  position: relative;
}

.sky{
  height: 40%;
  background: skyblue;
}

.grass{
  height: 30%;
  background: seagreen;
}

.road {
  height: 30%;
  background: dimgrey;
  box-sizing: border-box;
  border-top:10 solid gray;
  width: 100%;
}

.lines {
  box-sizing:border-box;
  border: 5px dashed #fff;
  height: 0px;
  width:100%;
  position: absolute;
  top:45%; 
}

.mario {
  position: absolute;
  top: -50px;
  left:0px;
  /*速度を関数的に変えられる
  animation-timing-function: cubic-bezier(0.075, 0.82, 0, .28)
  animation-timing-function: linear;*/
  animation: drive 8s both infinite linear,
    jump 0.3 2s ease;
}
.luigi{
  position: absolute;
  top:0px;
  left:0;
  animation-name: drive;
  animation-duration:5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}
.cloud {
  position: absolute;
}
.cloud:nth-child(1) {
  width:200px;
  top:120px;
  opacity:0.5;
  animation: wind 80s linear infinite reverse;
}
.cloud:nth-child(2) {
  width:300px;
  top:0;
  animation: wind 50s linear infinite reverse;
}

@keyframes drive {
  from{
    transform:translateX(-100px)
  }
  to{
    transform: translateX(100vw)
  }
}

@keyframes wind {
  from{left:-300px}
  to{left:100%}
}

@keyframes jump {
 0%{top:-40px} 
 50%{top:-100px}
 100%{top:-40px}
}