/* giving the body a background */
.body {
    background: url("https://www.nme.com/wp-content/uploads/2021/09/monster-hunter-rise-sunbreak.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  /* styling the entire container */
  
  .container {
    height: 100vh;
    width: 100vw;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* styling the nintendo switch */
  #nintendo-switch {
    margin-top: 20px;
    background-color: #222;
    height: 400px;
    width: 800px;
    border-radius: 110px;
  }
  
  /* styling buttons */
  button {
    background-color: transparent;
    border: none;
  }
  
  

  /* switch left side */
  #switch-left {
    height: 400px;
    width: 150px;
    background-color: #AEE8F5;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
  }
  
  /* left side select button */
  #select-button-area {
    text-align: right;
    background-color: transparent;
    transform: translateY(20px);
  }
  
  #select-btn {
    color: #000;
    background-color: transparent;
    font-size: 36px;
  }
  
  /* left analog area and stick */
  #left-analog-area {
   transform: translateY(40px) translateX(30px); 
  }
  
  #left-analog {
   font-size: 60px; 
   text-shadow: 0 0 2px #000, 0 0 10px #333;
  }
  
  #arrow-keys {
    font-size: 28px;
    margin: 0;
    padding: 10px;
    position: relative;
    text-align: center;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    transform: translateY(80px) translateX(10px);
  }
  
  #up, #down, #left, #right {
    color: #111;
    text-shadow: 0 0 2px #333;
  }
  
  #up-and-down {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  
  #left-and-right {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  
  #up {
     transform: translateY(10px);
  }
  
  #down {
    transform: translateY(-10px);
  }
  
  #left {
    transform: translateX(-10px);
  }
  #right {
    transform: translateX(10px);
  }
  
  #capture-area {
    display: flex;
    height: 30px;
    width: 30px;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 1px solid black;
    transform: translateY(140px) translateX(90px);
    font-size: 24px;
    border-radius: 5px;
    background-color: #222;
  }
  
  #capture {
    color: #000;
  }
  
  

  /* switch right side */
  #switch-right {
    height: 400px;
    width: 150px;
    background-color: red;
     border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
  }
  
  /* right side start button */
  #start-button-area {
    background-color: transparent;
    transform: translateY(20px);
  }
  
  #start-btn {
    color: #000;
    background-color: transparent;
    font-size: 36px;
  }
  
  /* styling the nintendo switch screen */
  #switch-screen {
    display: flex;
    height: 400px;
    width: 60%;
    border-radius: 10px;
    border: 50px solid #000;
    background-color: #000;
    margin: auto;
    padding: 0;
    justify-content: center;
    align-items: center;
  }

  /* styling the embedded area */
  #video {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 400px;
  }
  
  /*  input keys */
  
  #input-keys {
    font-size: 20px;
    margin: 0;
    padding: 20px;
    position: relative;
    text-align: center;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    transform: translateY(20px) translateX(10px);
  }
  
  #a, #b, #y, #x {
    color: #333;
    text-shadow: 0 0 2px #222;
    background-color: rgba(0,0,0,0.9);
    border-radius: 50%;
    height: 35px;
    width: 35px;
  }
  
  #x-and-b {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  
  #y-and-a {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  
  #x {
     transform: translateY(5px);
  }
  
  #b {
    transform: translateY(-5px);
  }
  
  #y {
    transform: translateX(-15px);
  }
  #a {
    transform: translateX(15px);
  }
  
  #capture-area {
    display: flex;
    height: 30px;
    width: 30px;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 1px solid black;
    transform: translateY(120px) translateX(90px);
    font-size: 24px;
    border-radius: 5px;
    background-color: #222;
  }
  
  /* left analog area and stick */
  #right-analog-area {
   transform: translateY(90px) translateX(30px); 
  }
  
  #right-analog {
   font-size: 60px; 
   text-shadow: 0 0 2px #000, 0 0 10px #333;
  }
  
  /* styling the home button */
  #home-area {
    display: flex;
    height: 30px;
    width: 30px;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 1px solid black;
    transform: translateY(120px) translateX(05px);
    font-size: 24px;
    border-radius: 50%;
    background-color: #222;
  }
  
  #home {
    color: #000;
  }