body {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  --pad-body: #c7c8cc;
  --pad-grey-button: #5b5c60;
  --pad-shadow: #1e1e1e;
  --button-shine: #ffffff55;
  --gamepad-height: 360px;
  --gamepad-width: 900px;
  --button-size: 65px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  padding: 32px 64px;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 64px;
  height: 100%;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16px 64px;
  background-color: #f9f9f9;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}

/*
  * Gamepad
  */

.gamepad {
  width: var(--gamepad-width);
  height: var(--gamepad-height);
  border: 2px solid var(--button-shine);
  display: flex;
  align-items: center;
  background-color: var(--pad-body);
  box-shadow: 1px 1px 17px -3px var(--pad-shadow);
  border-radius: calc(var(--gamepad-width) / 2);
  padding: 16px;
}

.axis {
  --axis-size: 240px;
  width: var(--axis-size);
  height: var(--axis-size);
  margin-left: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  border-radius: calc(var(--axis-size) / 2);
  padding: 32px;
  box-shadow: inset -1px -1px 3px 3px var(--button-shine),
    inset 1px 1px 3px var(--pad-shadow);
}
.axis-up {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  box-shadow: 0px 0px 0px 2px var(--pad-shadow);
  border-left: 2px solid var(--button-shine);
  border-right: 2px solid var(--button-shine);
  border-top: 2px solid var(--button-shine);
}
.axis-down {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  box-shadow: 0px 0px 0px 2px var(--pad-shadow);
  border-left: 2px solid var(--button-shine);
  border-right: 2px solid var(--button-shine);
  border-bottom: 2px solid var(--button-shine);
}
.axis-left {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  box-shadow: 0px 0px 0px 2px var(--pad-shadow);
  border-left: 2px solid var(--button-shine);
  border-top: 2px solid var(--button-shine);
  border-bottom: 2px solid var(--button-shine);
}
.axis-right {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  box-shadow: 0px 0px 0px 2px var(--pad-shadow);
  border-right: 2px solid var(--button-shine);
  border-top: 2px solid var(--button-shine);
  border-bottom: 2px solid var(--button-shine);
}

.axis-button {
  background-color: var(--pad-grey-button);
}

.axis-mid {
  z-index: 1;
  outline: 2px solid var(--pad-grey-button);
}

.circle {
  width: 70%;
  height: 70%;
  border-radius: 100px;
  box-shadow: inset -1px -1px 2px var(--button-shine),
    inset 1px 1px 2px var(--pad-shadow);
}

.select-start {
  display: flex;
  align-items: center;
  justify-content: baseline;
  flex: 1;
  height: 100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  height: 100%;
}

.mid-button {
  --size: 24px;
  height: var(--size);
  width: 75%;
  border-radius: calc(var(--size) / 2);
  background-color: var(--pad-grey-button);
  transform: rotate(-30deg);
  margin: 68% auto 0 auto;
  box-shadow: 0 0 0px 2px var(--pad-shadow),
    inset 0px 8px 12px var(--button-shine),
    inset 0px -4px 12px var(--pad-shadow);
}

.select {
}

.start {
}

.buttons {
  padding: 32px;
  --buttons-size: calc(var(--gamepad-height) - 32px);
  width: var(--buttons-size);
  height: var(--buttons-size);
  display: grid;
  grid-template-columns:
    calc(var(--buttons-size) / 3) calc(var(--buttons-size) / 3)
    calc(var(--buttons-size) / 3);
  grid-template-rows:
    calc(var(--buttons-size) / 3) calc(var(--buttons-size) / 3)
    calc(var(--buttons-size) / 3);
  border: 1px solid var(--button-shine);
  box-shadow: 0 0 0 1px var(--pad-shadow);
  background-color: #707277;
  border-radius: calc(var(--buttons-size) / 2);
}

.button {
  border-radius: calc(var(--button-size) / 2);
  width: var(--button-size);
  height: var(--button-size);
  box-shadow: 0 0 0 1px var(--pad-shadow), inset 0px 2px 3px var(--button-shine),
    inset 0px -2px 1px var(--pad-shadow);
}

.button-x {
  background-color: blue;
}

.button-y {
  background-color: green;
}

.button-a {
  background-color: red;
}

.button-b {
  background-color: yellow;
}

.button-background-group {
  /* position: absolute; */
  transform: rotate(45deg);
  background-color: var(--pad-body);
  padding: 2px;
  border-radius: 100px;
  width: calc(2.83 * var(--button-size));
}

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid blue;
}