Having a hard time changing background color in Vue js

I'm new to programming in general. I'm trying to make the background color of the landing page orange. The issue is that it makes all the pages orange. I know that I can add 'scoped' to the landing page and it'll style only that page right?

The issue is that when I add 'scoped' to the landing page, the entire page isn't orange any more.

The end goal is to only affect the landing page for now.

landingpage.vue

    <template>      <div class="container">          <div class=landing>              <h1>Hello.</h1>              <router-link to="/work">                  <button id="work" type="button">See my work</button>              </router-link>              <router-link to="/home">                  <button id="home" type="button">Go home</button>              </router-link>          </div>      </div>  </template>    <script>  export default {    name: 'Landing',  };  </script>    <style scoped>  * {      background: orange;  }    h1 {      margin-top: 100px;      text-align: center;      font-size: 80px;      color: green;  }  #work {      color: green;      border: none;      font-size: 25px;      text-decoration: none;      margin: 0;      position: absolute;      top: 50%;      left: 50%;      -ms-transform: translate(-50%, -50%);      transform: translate(-50%, -50%);  }  #work:hover {      color: white;  }  #home{      color: green;      border: none;      font-size: 15px;      text-decoration: none;      margin: 0;      position: absolute;      top: 70%;      left: 50%;      -ms-transform: translate(-50%, -50%);      transform: translate(-50%, -50%);  }  #home:hover {      color: white;  }  </style>  

https://stackoverflow.com/questions/65418203/having-a-hard-time-changing-background-color-in-vue-js December 23, 2020 at 10:13AM