<main>
  <div class="container">
    <div class="miyoo-mini-plus">
      <div class="screen"></div>
      <div class="controls">
        <div class="menu-button"></div>
        <div class="cross-directions">
          <div class="d-pad-1"></div>
          <div class="d-pad-2"></div>
        </div>
        <div class="ABXY">
          <div class="A"></div>
          <div class="B"></div>
          <div class="X"></div>
          <div class="Y"></div>
        </div>
        <div class="start"></div>
        <div class="select"></div>
      </div>
    </div>
  </div>
</main>

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

:root{
  --myoo-mini-plus-theme:#E1E5E7;
  --dark-main-color:#0e0f19;
  --contrast-buttons:#4F1787;
}

html{
  font-size:62.5%;
  background-color:#393E46;
}

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

.miyoo-mini-plus{
  width:30rem;
  height:45rem;
  border-radius:1rem 1rem 5rem 1rem;
  display:flex;
  justify-content:center;
  align-items:center;
  background-color:var(--myoo-mini-plus-theme);
  position:relative;
}

.screen{
  position:absolute;
  top:0.5rem;
  width:29rem;
  height:20rem;
  border:0.5rem solid black;
  background-color:var(--dark-main-color);
}


.menu-button, .d-pad-1, .d-pad-2, .start, .select, .X, .Y{
    background-color:var(--dark-main-color);
}

.A, .B{
  background-color:var(--contrast-buttons);
}

.menu-button, .d-pad-1, .d-pad-2 , .start, .select, .A, .B, .X, .Y, .ABXY, .sound-space{
  position:absolute;
}

.menu-button{
  top:240px;
  right:145px;
  width:13px;
  height:13px;
  border-radius:50%;
}

.d-pad-1, .d-pad-2{
    border-radius:10px;
}

.d-pad-1{
  top:32.5rem;
  right:23rem;
  height:3%;
  width:15%;
}

.d-pad-2{
  top:30.5rem;
  right:24.5rem;
  width:4.5%;
  height:12%;
}


.ABXY{
  top:270px;
  right:70px;
}

.A, .B, .X, .Y{
  width:20px;
  height:20px;
  border-radius:50%;
}

.A{
  top:50px;
  left:25px;
}

.B{
  top:80px;
}

.X{
  top:25px;
}

.Y{
  top:50px;
  right:10px;
}

.start, .select{
  top:400px;
  width:40px;
  height:10px;
  border-radius:5px;
  transform:rotate(125deg);
  }

.start{
  left:100px;
}

.select{
  left:150px;
}