EffectHub.com: your best source for gaming

Recommendation

More Effects...

var $buttonA = $('.button--a');
var $buttonB = $('.button--b');
var $buttonX = $('.button--x');
var $buttonY = $('.button--y');
var $dDown = $('.d--down');
var $dLeft = $('.d--left');
var $dRight = $('.d--right');
var $dUp = $('.d--up');
var $groundBack = $('.ground--back');
var $groundFore = $('.ground--fore');
var $groundLevel = $('.ground--level');
var $highlights = $('.highlight');
var $mario = $('.mario');
var $world = $('.world');

$(document).ready(init);

////

function init() {
  Object.keys(worldLayers).forEach(initSlider);

console.log('init', Modernizr.touch, $('html').classList);
  if (Modernizr.touch) {
    return;
  }
  
  run();

setTimeout(() => {
    stand().then(flashHighlights);
  }, speed.groundLevel);
}

////

function bindEvents() {
  $dRight.on('mousedown', run);
  $dRight.on('mouseup', stand);
  $dRight.on('mouseout', stand);

$buttonX.on('mousedown', run);
  $buttonX.on('mouseup', stand);
  $buttonX.on('mouseout', stand);

$buttonY.on('mousedown', run);
  $buttonY.on('mouseup', stand);
  $buttonY.on('mouseout', stand);
  
  $(window).resize(stand);
}

function flashHighlights(add = false) {
  $highlights[add ? 'addClass' : 'removeClass']('highlight--active');

setTimeout(() => {
    if (flashCount === 6) {
      return;
    }
    flashHighlights(!add);
    flashCount = flashCount + 1;
  }, add ? 800 : 400);
}

function initSlider(slider) {
  var slickSettings = {
    arrows: false,
    autoplay: false,
    autoplaySpeed: 0,
    centerMode: true,
    centerPadding: 0,
    cssEase: 'linear',
    infinite: true,
    slidesToScroll: 1,
    slidesToShow: 3,
    speed: speed[slider],
    touchMove: false,
    responsive: [{
      breakpoint: 800,
      settings: {
        centerMode: false,
        slidesToShow: 2
      }
    }]
  };

for (let x = 1; x <= 3; x++) {
    worldLayers[slider].find('.ground__slide').clone().appendTo(worldLayers[slider]);
  }

worldLayers[slider].slick(slickSettings);
}

function run(event) {
  clearInterval(stopRun);

Object.keys(worldLayers).forEach(worldMove);

stopRun = setInterval(_step, runInterval);

function _step() {
    if (stage === 1) {
      direction = 1;
    }

if (stage === 3) {
      direction = -1;
    }

stage = stage + direction;

$mario.removeClass('mario--run-1 mario--run-2 mario--run-3');

$mario.addClass('mario--run-' + stage);
  }
}

function stand(event) {
  unbindEvents();
  
  if (event) {
    event.currentTarget.blur();
  }
  
  worldStop('groundBack');
  
  setTimeout(() => {
    worldStop('groundFore');
  }, speed.groundLevel);
  
  return new Promise((resolve) => {
    setTimeout(() => {
      worldStop('groundLevel');

clearInterval(stopRun);

if ($mario.hasClass('mario--run-1')) {
        Object.keys(worldLayers).forEach(worldStop);
        bindEvents();
        resolve('');
        return;
      }

$mario.removeClass('mario--run-1 mario--run-2 mario--run-3');
      $mario.addClass('mario--run-2');

resolve('');
      
      bindEvents();
      
      setTimeout(() => {
        $mario.removeClass('mario--run-2');
        $mario.addClass('mario--run-1');
      }, runInterval);
    }, speed.groundFore);
  });
}

function unbindEvents() {
  $dRight.off();
  $buttonX.off();
  $buttonY.off();
  $(window).off();
}

function worldMove(slider) {
  worldLayers[slider].slick('slickPlay');
}

function worldStop(slider) {
  worldLayers[slider].slick('slickPause');
}

CSS

/** * * * * * * * * * * * * * * *
 * COLORS * * * * * * * * * * * * 
 * * * * * * * * * *  * * * * * */
/** * * * * * * * * * * * * * * *
 * DIMENSIONS * * * * * * * * * * 
 * * * * * * * * * *  * * * * * */
/** * * * * * * * * * * * * * * *
 * BASE * * * * * * * * * * * * * 
 * * * * * * * * * *  * * * * * */
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: 'Open Sans Condensed', Helvetica, Arial, sans-serif;
}

html {
  background-color: #000;
}
html.touch .controller {
  display: none;
}

/** * * * * * * * * * * * * * * *
 * WORLD  * * * * * * * * * * * * 
 * * * * * * * * * *  * * * * * */
.world {
  background-color: #0063bd;
  height: 100vh;
  max-height: 840px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 1020px;
  min-width: 660px;
}
.world .ground {
  position: absolute;
}
.world .ground--back {
  background-color: rgba(0, 0, 255, 0.2);
  height: 60vh;
  width: 100%;
}
.world .ground--back::before {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(40%, rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.2)));
  background-image: linear-gradient(rgba(0, 0, 0, 0) 40%, rgba(255, 255, 255, 0.2));
  content: '';
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}
.world .ground--back .ground__slide {
  height: 60vh;
}
.world .ground--back .ground__slide:nth-child(odd) .ground__cloud--1 {
  top: 30%;
}
.world .ground--back .ground__slide:nth-child(odd) .ground__cloud--2 {
  display: none;
}
.world .ground--back .ground__slide:nth-child(odd) .ground__cloud--3 {
  top: 60%;
  right: 0;
}
.world .ground--fore {
  background-color: rgba(0, 128, 0, 0.2);
  height: 60vh;
  width: 100%;
}
.world .ground--fore .ground__slide {
  height: 60vh;
}
.world .ground--fore .ground__slide:nth-child(odd) .ground__dome--1 {
  height: 25%;
}
.world .ground--fore .ground__slide:nth-child(odd) .ground__dome--2 {
  height: 45%;
}
.world .ground--fore .ground__slide:nth-child(odd) .ground__dome--3 {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNjNmU3ZTciLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iI2I5ZGVkZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2EyY2ZjZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #c6e7e7), color-stop(70%, #b9dede), to(#a2cfcf));
  background-image: linear-gradient(to right, #c6e7e7 50%, #b9dede 70%, #a2cfcf 100%);
  border: 0;
  height: 65%;
  z-index: 100;
}
.world .ground--level {
  background-color: rgba(255, 0, 0, 0.2);
  height: 42vh;
  bottom: 0;
  width: 100%;
}
.world .ground--level .ground__slide {
  height: 42vh;
}
.world .ground__slide {
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 33.33333vw;
}

.world--yoshis-island-1 .ground__cloud {
  background-color: #fff;
  border-bottom: 1.56vh solid #def0f4;
  border-radius: 6vh;
  height: 6vh;
  position: absolute;
  width: 50%;
}
.world--yoshis-island-1 .ground__cloud--1 {
  top: 6vh;
}
.world--yoshis-island-1 .ground__cloud--2 {
  top: 12vh;
  left: 20%;
}
.world--yoshis-island-1 .ground__cloud--3 {
  top: 30vh;
  left: 30%;
}
.world--yoshis-island-1 .ground__dirt {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiNjODk4NTgiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlMGMxNGUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(40%, #c89858), to(#e0c14e));
  background-image: linear-gradient(#c89858 40%, #e0c14e 100%);
  height: 100%;
  position: absolute;
  width: 100%;
}
.world--yoshis-island-1 .ground__dome {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiM2MmIzZGMiLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iIzViYTlkMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBhNTM4MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #62b3dc), color-stop(70%, #5ba9d0), to(#0a5380));
  background-image: linear-gradient(to right, #62b3dc 50%, #5ba9d0 70%, #0a5380 100%);
  border: 0.39vh solid #0a5380;
  border-radius: 13.33333vw;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  height: 50%;
  position: absolute;
  bottom: 0;
  width: 30%;
  z-index: 101;
}
.world--yoshis-island-1 .ground__dome::before {
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  content: '';
  height: 3vh;
  min-height: 15px;
  max-height: 50px;
  position: absolute;
  top: 5%;
  right: 20%;
  -webkit-transform: rotate(-22.5deg);
          transform: rotate(-22.5deg);
  width: 3vh;
  min-width: 15px;
  max-width: 50px;
}
.world--yoshis-island-1 .ground__dome--1 {
  left: 10%;
}
.world--yoshis-island-1 .ground__dome--2 {
  height: 35%;
  right: 5%;
}
.world--yoshis-island-1 .ground__dome--3 {
  height: 200%;
  left: 25%;
}
.world--yoshis-island-1 .ground__grass {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiMwMGNlMDAiLz48c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iIzAwYTcyOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(40%, #00ce00), color-stop(80%, #00a728));
  background-image: linear-gradient(#00ce00 40%, #00a728 80%);
  border-top: 0.39vh solid #05472a;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 4.2vh;
  position: absolute;
  width: 100%;
}
.world--yoshis-island-1 .ground__overhang {
  height: 6.66667vw;
  position: relative;
  width: 100%;
}
.world--yoshis-island-1 .ground__overhang::before, .world--yoshis-island-1 .ground__overhang::after {
  border-top: 4.2vh solid transparent;
  border-bottom: 4.2vh solid #00a728;
  border-radius: 50%;
  content: '';
  position: absolute;
  width: 100%;
}
.world--yoshis-island-1 .ground__overhang::before {
  border-bottom-color: #05472a;
  top: -10%;
}
.world--yoshis-island-1 .ground__overhang::after {
  border-bottom-width: 3.78vh;
  top: -10%;
  left: 2.5%;
  width: 95%;
}

/** * * * * * * * * * * * * * * *
 * CONTROLLER * * * * * * * * * *
 * * * * * * * * * *  * * * * * */
.controller {
  height: 30vh;
  opacity: 1;
  position: absolute;
  bottom: 3vh;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: opacity .6s ease-in-out;
  transition: opacity .6s ease-in-out;
  width: 75vh;
}

.controller--hidden {
  opacity: 0;
}

.controller__buttons-wrapper {
  background-color: #d2d2d2;
  border: 0.39vh solid #b0b0b8;
  border-top-width: 0;
  border-left-width: 0;
  border-radius: 50%;
  height: 30vh;
  position: absolute;
  right: 0;
  width: 30vh;
}

.controller__buttons {
  background-color: #b0b0b8;
  border-radius: 50%;
  content: '';
  height: 25.8vh;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  width: 25.8vh;
}
.controller__buttons::before, .controller__buttons::after {
  background-color: #d2d2d2;
  border-radius: 6vh;
  content: '';
  height: 6vh;
  position: absolute;
  top: 6.975vh;
  right: 2.475vh;
  bottom: 6.975vh;
  left: 2.475vh;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  width: 15vh;
  z-index: 900;
}
.controller__buttons::before {
  bottom: auto;
  right: auto;
}
.controller__buttons::after {
  top: auto;
  left: auto;
}
.controller__buttons .button {
  border: 0;
  border-radius: 50%;
  height: 4.5vh;
  position: absolute;
  -webkit-transition: background-color .1s ease-in-out;
  transition: background-color .1s ease-in-out;
  width: 4.5vh;
  z-index: 901;
}
.controller__buttons .button:focus {
  outline: none;
}
.controller__buttons .button:hover {
  cursor: pointer;
}
.controller__buttons .button::after {
  color: #fff;
  font-size: 2.925vh;
  font-style: italic;
}
.controller__buttons .button--a {
  background-color: #674ec1;
  top: 50%;
  right: 4.8vh;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.controller__buttons .button--a:hover {
  background-color: #3e2c7d;
}
.controller__buttons .button--a::after {
  content: 'A';
  position: absolute;
  top: -70%;
  right: -70%;
}
.controller__buttons .button--b {
  background-color: #674ec1;
  bottom: 4.8vh;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.controller__buttons .button--b:hover {
  background-color: #3e2c7d;
}
.controller__buttons .button--b::after {
  content: 'B';
  position: absolute;
  bottom: -70%;
  left: -70%;
}
.controller__buttons .button--x {
  background-color: #bab8f1;
  top: 4.8vh;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.controller__buttons .button--x:hover {
  background-color: #6763e0;
}
.controller__buttons .button--x::after {
  content: 'X';
  position: absolute;
  top: -70%;
  right: -70%;
}
.controller__buttons .button--y {
  background-color: #bab8f1;
  top: 50%;
  left: 4.8vh;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.controller__buttons .button--y:hover {
  background-color: #6763e0;
}
.controller__buttons .button--y::after {
  content: 'Y';
  position: absolute;
  bottom: -70%;
  left: -70%;
}

.controller__dpad-wrapper {
  background-color: #d2d2d2;
  border: 0.39vh solid #b0b0b8;
  border-top-width: 0;
  border-right-width: 0;
  border-radius: 50%;
  height: 30vh;
  position: absolute;
  left: 0;
  width: 30vh;
}

.controller__dpad {
  border: 0.39vh solid #b0b0b8;
  border-radius: 50%;
  height: 19.5vh;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 19.5vh;
}
.controller__dpad::before {
  background-color: #686868;
  content: '';
  height: 6.75vh;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: rotate(45deg) translateX(-50%) translateY(-50%);
          transform: rotate(45deg) translateX(-50%) translateY(-50%);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  width: 6.75vh;
}
.controller__dpad .d {
  background-color: #686868;
  border-radius: 10%;
  height: 4.5vh;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transition: background-color .1s ease-in-out;
  transition: background-color .1s ease-in-out;
  width: 4.5vh;
}
.controller__dpad .d:hover {
  background-color: #464646;
  cursor: pointer;
}
.controller__dpad .d--up {
  -webkit-transform: translateX(-50%) translateY(-150%);
          transform: translateX(-50%) translateY(-150%);
}
.controller__dpad .d--right {
  -webkit-transform: translateX(50%) translateY(-50%);
          transform: translateX(50%) translateY(-50%);
}
.controller__dpad .d--down {
  -webkit-transform: translateX(-50%) translateY(50%);
          transform: translateX(-50%) translateY(50%);
}
.controller__dpad .d--left {
  -webkit-transform: translateX(-150%) translateY(-50%);
          transform: translateX(-150%) translateY(-50%);
}

.controller__select-start-wrapper {
  background-color: #d2d2d2;
  border-bottom: 0.39vh solid #b0b0b8;
  height: 24vh;
  position: absolute;
  left: 15vh;
  width: 45vh;
}

.controller__select-start {
  height: 7.5vh;
  position: absolute;
  bottom: 5%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 15vh;
  z-index: 999;
}
.controller__select-start .button {
  height: 100%;
  position: absolute;
  width: 50%;
}
.controller__select-start .button:hover {
  cursor: pointer;
}
.controller__select-start .button:hover::before {
  background-color: #464646;
}
.controller__select-start .button::before {
  background-color: #686868;
  border-radius: 2.25vh;
  content: '';
  height: 2.25vh;
  position: absolute;
  top: 25%;
  -webkit-transform: rotate(-36deg);
          transform: rotate(-36deg);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transition: background-color .1s ease-in-out;
  transition: background-color .1s ease-in-out;
  width: 90%;
}
.controller__select-start .button::after {
  color: #686868;
  font-size: 2.25vh;
  font-style: italic;
  position: absolute;
  bottom: 0;
}
.controller__select-start .button--select::after {
  content: 'SELECT';
}
.controller__select-start .button--start {
  right: 0;
}
.controller__select-start .button--start::after {
  content: "START";
}

/** * * * * * * * * * * * * * * *
 * MARIO  * * * * * * * * * * * * 
 * * * * * * * * * *  * * * * * */
.mario__wrapper {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 30vh;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  bottom: 36vh;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(0);
          transform: translateX(-50%) translateY(0);
  min-width: 15vh;
}

.mario {
  height: 30vh;
  position: relative;
  width: 15vh;
}
.mario > div {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.mario .mario__body {
  height: 12vh;
  top: 35%;
  -webkit-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
  width: 12vh;
  z-index: 200;
}
.mario .mario__body > div {
  position: absolute;
}
.mario .mario__body .arm {
  background-color: #ff3968;
}
.mario .mario__body .buttons {
  height: 2.4vh;
  top: 35%;
  left: 45%;
  width: 6vh;
}
.mario .mario__body .buttons::before, .mario .mario__body .buttons::after {
  background-color: #fff;
  border-radius: 50%;
  content: '';
  height: 1.8vh;
  position: absolute;
  width: 1.8vh;
}
.mario .mario__body .buttons::after {
  right: 0;
  width: 1.2vh;
}
.mario .mario__body .fist {
  background-color: #fff;
  border: 0.39vh solid #886029;
  border-radius: 50%;
  height: 4.8vh;
  width: 4.8vh;
}
.mario .mario__body .fist--left {
  border-bottom-right-radius: 30%;
  -webkit-transform: rotate(-22.5deg);
          transform: rotate(-22.5deg);
}
.mario .mario__body .fist--right {
  border-top-right-radius: 30%;
}
.mario .mario__body .fist--right::before {
  background-color: #fff;
  border: 0.39vh solid #886029;
  border-radius: 50%;
  content: '';
  height: 1.8vh;
  position: absolute;
  width: 1.8vh;
}
.mario .mario__body .torso {
  background-color: #ff3968;
  border: 0.39vh solid #a22251;
  border-radius: 50%;
  height: 12vh;
  width: 12vh;
}
.mario .mario__body .waist {
  border-top: 4.8vh solid transparent;
  border-bottom: 7.2vh solid #0e218c;
  border-radius: 50%;
  top: 1%;
  width: 12vh;
}
.mario .mario__body .waist::before {
  border-top: 3.6vh solid transparent;
  border-bottom: 4.8vh solid #79dac8;
  border-radius: 50%;
  content: '';
  position: absolute;
  top: -3.6vh;
  left: 2.76vh;
  width: 9vh;
}
.mario .mario__head {
  height: 12vh;
  top: 0;
  left: 45%;
  -webkit-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
  width: 12vh;
  z-index: 201;
}
.mario .mario__head > div {
  position: absolute;
}
.mario .mario__head .ear {
  background-color: #ffbebc;
  border: 0.39vh solid #ffbebc;
  border-top-color: #ffd6d1;
  border-left-width: 0;
  border-radius: 50%;
  height: 3vh;
  top: 45%;
  left: -10%;
  width: 3vh;
}
.mario .mario__head .ear::before {
  border: 0.39vh solid transparent;
  border-right-color: #cc5856;
  border-radius: 50%;
  content: '';
  height: 50%;
  position: absolute;
  top: 15%;
  left: 25%;
  width: 30%;
}
.mario .mario__head .eye {
  background-color: #fff;
  border-radius: 2.7vh;
  height: 100%;
  position: absolute;
  width: 45%;
}
.mario .mario__head .eye::before {
  background-color: #000;
  border-radius: 3.3vh;
  content: '';
  height: 65%;
  position: absolute;
  bottom: 5%;
  left: 5%;
  width: 3vh;
  width: 50%;
}
.mario .mario__head .eye--left {
  border-top: 0.39vh solid transparent;
  border-bottom-color: #000;
  border-left-color: #000;
  width: 50%;
}
.mario .mario__head .eye--left::before {
  right: 0;
  left: auto;
}
.mario .mario__head .eye--right {
  right: 0;
}
.mario .mario__head .eyes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 3.6vh;
  top: 30%;
  right: 5%;
  width: 5.4vh;
}
.mario .mario__head .face {
  background-color: #ffd6d1;
  border-radius: 50%;
  height: 7.8vh;
  bottom: 10%;
  right: 5%;
  width: 7.8vh;
}
.mario .mario__head .hat {
  height: 7.5vh;
  top: -1.5vh;
  left: -1.5vh;
  width: 15vh;
}
.mario .mario__head .hat > div {
  position: absolute;
}
.mario .mario__head .hat__bill {
  height: 3.75vh;
  bottom: 5%;
  left: 1.5vh;
  width: 13.5vh;
}
.mario .mario__head .hat__bill::before {
  border-top: 2.34vh solid #000;
  border-radius: 50%;
  content: '';
  height: 5.25vh;
  position: absolute;
  left: 0%;
  bottom: -140%;
  -webkit-transform: rotate(-22.5deg);
          transform: rotate(-22.5deg);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  width: 75%;
}
.mario .mario__head .hat__bill::after {
  border-top: 3.12vh solid #000;
  border-radius: 50%;
  content: '';
  height: 3vh;
  position: absolute;
  top: -30%;
  right: 5%;
  width: 75%;
}
.mario .mario__head .hat__top {
  height: 6.75vh;
  top: 1.125vh;
  left: 1.125vh;
  width: 12.375vh;
}
.mario .mario__head .hat__top > div {
  position: absolute;
}
.mario .mario__head .hat__top__back {
  background-color: #ff3968;
  border: 0.195vh solid #000;
  border-right-color: transparent;
  border-radius: 1.5vh;
  border-top-right-radius: 0;
  height: 3vh;
  bottom: -17%;
  left: -10%;
  -webkit-transform: rotate(-43deg);
          transform: rotate(-43deg);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  width: 7.5vh;
}
.mario .mario__head .hat__top__front {
  background-color: #ff3968;
  border: 0.39vh solid #000;
  border-bottom-color: transparent;
  border-left-width: 0;
  border-radius: 2.25vh;
  border-top-left-radius: 60%;
  border-bottom-right-radius: 50%;
  height: 4.875vh;
  top: -20%;
  right: 0;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  width: 9vh;
}
.mario .mario__head .mullet {
  height: 3vh;
  bottom: 10%;
  left: 0;
  width: 3vh;
}
.mario .mario__head .mullet::before, .mario .mario__head .mullet::after {
  background-color: #000;
  border-radius: 50%;
  content: '';
  height: 70%;
  position: absolute;
  width: 70%;
}
.mario .mario__head .mullet::after {
  right: 0;
  bottom: 0;
}
.mario .mario__head .mustache {
  height: 2.4vh;
  top: 70%;
  right: -15%;
  width: 8.4vh;
  z-index: 200;
}
.mario .mario__head .mustache__tuft {
  background-color: #000;
  border-radius: 50%;
  height: 60%;
  position: absolute;
  width: 30%;
}
.mario .mario__head .mustache__tuft--2 {
  height: 60%;
  bottom: 0;
  left: 15%;
}
.mario .mario__head .mustache__tuft--3 {
  height: 60%;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 40%;
}
.mario .mario__head .mustache__tuft--4 {
  height: 60%;
  bottom: 0;
  right: 15%;
}
.mario .mario__head .mustache__tuft--5 {
  right: 0;
}
.mario .mario__head .nose {
  background-color: #ffbebc;
  border-right: 0.39vh solid #cc5856;
  border-bottom: 0.39vh solid #cc5856;
  border-radius: 1.5vh;
  height: 3vh;
  top: 55%;
  right: -5%;
  width: 5.4vh;
  z-index: 201;
}
.mario .mario__head .nose::before {
  background-color: #ffd6d1;
  border-radius: 1.8vh;
  content: '';
  height: 1.8vh;
  position: absolute;
  top: 2%;
  right: 5%;
  width: 3.6vh;
}
.mario .mario__head .nose::after {
  background-color: #ffefee;
  border-radius: 6vh;
  content: '';
  height: 0.6vh;
  position: absolute;
  top: 5%;
  right: 10%;
  width: 1.8vh;
}
.mario .mario__head .sideburns {
  background-color: #000;
  border-radius: 50%;
  border-bottom-left-radius: 30%;
  height: 2.04vh;
  top: 40%;
  left: 10%;
  width: 2.04vh;
}
.mario .mario__head .sideburns::before, .mario .mario__head .sideburns::after {
  background-color: #000;
  border-radius: 50%;
  content: '';
  height: 70%;
  position: absolute;
  width: 60%;
}
.mario .mario__head .sideburns::before {
  top: 70%;
  left: 20%;
}
.mario .mario__head .sideburns::after {
  height: 60%;
  top: 50%;
  left: 70%;
  width: 60%;
}
.mario .mario__head .skull {
  background-color: #ffbebc;
  border: 0.39vh solid #cc5856;
  border-radius: 50%;
  height: 11.4vh;
  bottom: 0;
  right: 0;
  width: 11.4vh;
}
.mario .mario__legs {
  height: 6vh;
  bottom: 15%;
  width: 12vh;
  z-index: 201;
}
.mario .mario__legs > div {
  position: absolute;
}
.mario .mario__legs .foot {
  background-color: #895201;
  border: 0.39vh solid #402b0e;
}
.mario .mario__legs .leg {
  background-color: #0e218c;
}

/** * * * * * * * * * * * * * * *
 * MARIO RUN-1  * * * * * * * * * 
 * * * * * * * * * *  * * * * * */
.mario--run-1 .mario__body {
  -webkit-transform: translateX(-50%) translateY(-8%);
          transform: translateX(-50%) translateY(-8%);
}
.mario--run-1 .mario__body .arm--left {
  border: 0.39vh solid #a22251;
  border-radius: 4.8vh;
  border-top-right-radius: 20%;
  height: 4.8vh;
  top: 0;
  left: 20%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  width: 7.2vh;
  z-index: 200;
}
.mario--run-1 .mario__body .fist--left {
  top: 15%;
  left: 40%;
  z-index: 200;
}
.mario--run-1 .mario__body .fist--right {
  display: none;
}
.mario--run-1 .mario__head {
  -webkit-transform: translateX(-50%) translateY(-6%);
          transform: translateX(-50%) translateY(-6%);
}
.mario--run-1 .mario__legs .foot--left,
.mario--run-1 .mario__legs .foot--right {
  border: 0.39vh solid transparent;
  border-radius: 20%;
  border-top-right-radius: 2.1vh;
  border-top-left-radius: 30%;
  height: 3.3vh;
  bottom: 0;
  left: 10%;
  width: 6.6vh;
}
.mario--run-1 .mario__legs .foot--left::before,
.mario--run-1 .mario__legs .foot--right::before {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  content: '';
  height: 20%;
  position: absolute;
  top: 15%;
  right: 15%;
  width: 20%;
  z-index: 201;
}
.mario--run-1 .mario__legs .foot--left {
  border-right-color: #402b0e;
  z-index: 200;
}
.mario--run-1 .mario__legs .foot--right {
  left: 30%;
}
.mario--run-1 .mario__legs .foot__sole {
  background-color: #402b0e;
  height: 0.6vh;
  position: absolute;
  left: 0;
  bottom: -20%;
  width: 6.3vh;
}
.mario--run-1 .mario__legs .leg--left,
.mario--run-1 .mario__legs .leg--right {
  border: 0.39vh solid transparent;
  border-radius: 10%;
  height: 3vh;
  top: 0;
  left: 10%;
  width: 5.4vh;
  z-index: 200;
}
.mario--run-1 .mario__legs .leg--left {
  border-right-color: #000;
  border-top-right-radius: 50%;
  z-index: 201;
}
.mario--run-1 .mario__legs .leg--right {
  left: 30%;
}

/** * * * * * * * * * * * * * * *
 * MARIO RUN-2  * * * * * * * * * 
 * * * * * * * * * *  * * * * * */
.mario--run-2 .mario__body {
  -webkit-transform: translateX(-50%) translateY(-4%);
          transform: translateX(-50%) translateY(-4%);
}
.mario--run-2 .mario__body .arm--left {
  border: 0.39vh solid transparent;
  border-top-color: #a22251;
  border-bottom-color: #a22251;
  border-left-color: #a22251;
  border-radius: 40%;
  border-top-left-radius: 60%;
  height: 6vh;
  top: 5%;
  left: -10%;
  width: 6vh;
  z-index: 200;
}
.mario--run-2 .mario__body .fist--left {
  top: 20%;
  left: 15%;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  z-index: 200;
}
.mario--run-2 .mario__body .fist--right {
  top: 15%;
  right: 0;
}
.mario--run-2 .mario__body .fist--right::before {
  top: -5%;
  left: 15%;
}
.mario--run-2 .mario__head {
  -webkit-transform: translateX(-50%) translateY(0);
          transform: translateX(-50%) translateY(0);
}
.mario--run-2 .mario__legs .foot--left {
  border-radius: 50%;
  border-bottom-right-radius: 30%;
  border-bottom-left-radius: 30%;
  height: 3.3vh;
  top: 35%;
  left: 0;
  -webkit-transform: rotate(36deg);
          transform: rotate(36deg);
  width: 4.2vh;
}
.mario--run-2 .mario__legs .foot--left::before, .mario--run-2 .mario__legs .foot--left::after {
  content: '';
  position: absolute;
}
.mario--run-2 .mario__legs .foot--left::before {
  background-color: #895201;
  border: 0.39vh solid #402b0e;
  border-left-width: 0;
  border-radius: 60%;
  border-top-left-radius: 40%;
  border-bottom-right-radius: 20%;
  border-bottom-left-radius: 0;
  height: 2.1vh;
  top: 20%;
  left: 50%;
  -webkit-transform: rotate(-36deg);
          transform: rotate(-36deg);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  width: 3.9vh;
}
.mario--run-2 .mario__legs .foot--left::after {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  height: 30%;
  top: -20%;
  right: -50%;
  -webkit-transform: rotate(-36deg);
          transform: rotate(-36deg);
  width: 30%;
}
.mario--run-2 .mario__legs .foot--right {
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  border-radius: 1.2vh;
  border-top-right-radius: 2.1vh;
  border-top-left-radius: 50%;
  height: 3.3vh;
  top: 15%;
  right: -15%;
  -webkit-transform: rotate(-36deg);
          transform: rotate(-36deg);
  width: 6.6vh;
}
.mario--run-2 .mario__legs .foot--right::before {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  content: '';
  height: 20%;
  position: absolute;
  top: 15%;
  right: 15%;
  width: 20%;
}
.mario--run-2 .mario__legs .foot__sole--right {
  height: 1.8vh;
  position: absolute;
  left: -5%;
  bottom: -10%;
  width: 6.6vh;
}
.mario--run-2 .mario__legs .foot__sole--right::before, .mario--run-2 .mario__legs .foot__sole--right::after {
  background-color: #402b0e;
  border-radius: 45%;
  content: '';
  height: 100%;
  position: absolute;
  width: 55%;
}
.mario--run-2 .mario__legs .foot__sole--right::before {
  border-bottom-right-radius: 0;
}
.mario--run-2 .mario__legs .foot__sole--right::after {
  border-bottom-left-radius: 0;
  right: 0;
}
.mario--run-2 .mario__legs .leg--left {
  border-radius: 50%;
  border-top-right-radius: 0;
  border-top-left-radius: 20%;
  border-bottom-right-radius: 60%;
  border-bottom-left-radius: 40%;
  height: 3vh;
  top: 0;
  left: 0;
  -webkit-transform: rotate(36deg);
          transform: rotate(36deg);
  width: 4.8vh;
  z-index: 200;
}
.mario--run-2 .mario__legs .leg--right {
  border-radius: 40%;
  height: 2.4vh;
  top: 15%;
  right: 20%;
  -webkit-transform: rotate(-36deg);
          transform: rotate(-36deg);
  width: 3vh;
}

/** * * * * * * * * * * * * * * *
 * MARIO RUN-3  * * * * * * * * * 
 * * * * * * * * * *  * * * * * */
.mario--run-3 .mario__body {
  -webkit-transform: translateX(-50%) translateY(0);
          transform: translateX(-50%) translateY(0);
}
.mario--run-3 .mario__body .arm--left {
  border-top: 0.39vh solid #a22251;
  border-left: 0.39vh solid #a22251;
  border-top-left-radius: 2.4vh;
  height: 4.8vh;
  top: 0;
  left: -10%;
  width: 4.8vh;
}
.mario--run-3 .mario__body .fist--left {
  top: 25%;
  left: -15%;
}
.mario--run-3 .mario__body .fist--right {
  top: 0;
  right: -15%;
}
.mario--run-3 .mario__body .fist--right::before {
  top: -5%;
  left: 15%;
}
.mario--run-3 .mario__head {
  -webkit-transform: translateX(-50%) translateY(4%);
          transform: translateX(-50%) translateY(4%);
}
.mario--run-3 .mario__legs .foot--left {
  border-radius: 40%;
  height: 6vh;
  top: -10%;
  left: -15%;
  -webkit-transform: rotate(11.25deg);
          transform: rotate(11.25deg);
  width: 3.6vh;
  z-index: 199;
}
.mario--run-3 .mario__legs .foot--left::before {
  background-color: #895201;
  border: 0.39vh solid #402b0e;
  border-left-color: transparent;
  border-radius: 50%;
  content: '';
  height: 3.6vh;
  position: absolute;
  top: -5%;
  right: -50%;
  width: 3vh;
}
.mario--run-3 .mario__legs .foot--right {
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  border-radius: 1.2vh;
  border-top-right-radius: 2.1vh;
  border-top-left-radius: 50%;
  height: 3.9vh;
  top: -20%;
  right: -25%;
  -webkit-transform: rotate(-60deg);
          transform: rotate(-60deg);
  width: 6.6vh;
}
.mario--run-3 .mario__legs .foot--right::before {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  content: '';
  height: 20%;
  position: absolute;
  top: 15%;
  right: 15%;
  width: 20%;
}
.mario--run-3 .mario__legs .foot__sole--right {
  height: 1.8vh;
  position: absolute;
  left: -5%;
  bottom: -10%;
  width: 6.6vh;
}
.mario--run-3 .mario__legs .foot__sole--right::before, .mario--run-3 .mario__legs .foot__sole--right::after {
  background-color: #402b0e;
  border-radius: 45%;
  content: '';
  height: 100%;
  position: absolute;
  width: 55%;
}
.mario--run-3 .mario__legs .foot__sole--right::before {
  border-bottom-right-radius: 0;
}
.mario--run-3 .mario__legs .foot__sole--right::after {
  border-bottom-left-radius: 0;
  right: 0;
}
.mario--run-3 .mario__legs .leg--left {
  border: 0.39vh solid transparent;
  border-radius: 1.8vh;
  border-bottom-left-radius: 40%;
  height: 3.9vh;
  top: -0.6vh;
  left: 0;
  -webkit-transform: rotate(11.25deg);
          transform: rotate(11.25deg);
  width: 5.4vh;
  z-index: 200;
}
.mario--run-3 .mario__legs .leg--right {
  height: 1.8vh;
  top: 15%;
  right: 10%;
  width: 6vh;
}

/** * * * * * * * * * * * * * * *
 * UTILS  * * * * * * * * * * * * 
 * * * * * * * * * *  * * * * * */
.highlight {
  border: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.highlight--active {
  border: 0.39vh solid #f13d19 !important;
  -webkit-box-shadow: 0 0 0.78vh #f13d19;
          box-shadow: 0 0 0.78vh #f13d19;
}

HTML

</div> 
  </div> 
  
  <div class="controller">
    <div class="controller__select-start-wrapper">
      <div class="controller__select-start">
        <div class="button button--select"></div>
        <div class="button button--start"></div>
      </div>
    </div>

Recommendation

Join Effecthub.com