title: How would I scale my buttons and my header with the window size?
body: <p>I'm new to HTML/CSS and I started creating a website with the help of YouTube and Stack Overflow. I pretty much finished but the only issue is that my header and buttons do not scale with the window size. Here are different window sizes: <a href="https://imgur.com/C1PXYDE" rel="nofollow noreferrer">regular</a>, <a href="https://imgur.com/banFK4d" rel="nofollow noreferrer">iPhone 12 Pro</a>, <a href="https://imgur.com/6rrXoMj" rel="nofollow noreferrer">iPhone XR</a>. I would like all of my windows to resemble the regular window but I could not find a solution that I could understand. Does anyone know how to make it so that the buttons and header would size accordingly to the window size that it is in?</p>
  <p>This is my CSS and HTML code (sorry in advance if this looks like a mess):</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body{
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      }
  body{
      height: 100vh;
      background: black;
  }
  button{
      margin: 7px;
  }
  ul{
      list-style: none;
  }
  h1{
      color: #FAF9F6;
      font-size: 50px;
      font-weight: lighter;
      left: 50%;
      font-family: "Trebuchet MS", Helvetica, sans-serif;
      position: absolute;
      top: 9%;
      left: 50%;
      transform: translate(-50%,-80%);
  }
  .btn{
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-54%,-45%);
  }
  button{
      background-color: black;
      color: #FAF9F6;
      width: 400px;
      height: 70px;
      border: .5px solid #f53b57;
      font-size: 20px;
      border-radius: 100px;
      transition: .6s;
      overflow: hidden;
      transform: scale(1);
  }
  button:focus{
      outline: none;
  }
  button:before{
      content: '';
      display: block;
      position: absolute;
      height: 100%;
      left: 0;
      top: 0;
      opacity: .5s;
      filter: blur(30px);
      transform: translate(-130px) skewX(-15deg);
  }
  button:after{
      content: '';
      display: block;
      position: absolute;
      width: 30px;
      height: 100%;
      left: 30px;
      top: 0;
      opacity: 0;
      filter: blur(30px);
      transform: translate(-100px) scaleX(-15deg);
  }
  button:hover{
      color:#f53b57;
      cursor: pointer;
      transform: scale(1.03);
  }
  button:hover:before{
      transform: translate(300px) skewX(-15deg);
      opacity: .6;
      transition: .7s;
  }
  button:hover:after{
      transform: translate(300px) skewX(-15deg);
      opacity: 1;
      transition: .7s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Julian Sanchez&lt;/title&gt;
      &lt;link rel="stylesheet" href="/css/all.min.css"&gt;
      &lt;link rel="stylesheet" href="styles.css"&gt;
      &lt;script src="https://kit.fontawesome.com/4ce3863cee.js" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;style&gt;
      .button__text{
          height: 100%;
          font-family: "Trebuchet MS", Helvetica, sans-serif;
      }
      .button__icon{
          display: inline-flex;
          align-items: center;
          padding: 0 5px;
          font-size: smaller;
          text-align: center;
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Julian Sanchez&lt;/h1&gt;
      &lt;div class="wrapper"&gt;
          &lt;div class="btn"&gt;
              &lt;ul&gt;  
                  &lt;li&gt;
                      &lt;button type="button" class="button"&gt;
                          &lt;i class="fa-brands fa-instagram"&gt;&lt;/i&gt;
                          &lt;span class="button__text"&gt;Instagram&lt;/span&gt;
                      &lt;/button&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;button type="button" class="button"&gt;
                          &lt;i class="fa-brands fa-twitter"&gt;&lt;/i&gt;
                          &lt;span class="button__text"&gt;Twitter&lt;/span&gt;
                      &lt;/button&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;button type="button" class="button"&gt;
                          &lt;i class="fa-brands fa-facebook"&gt;&lt;/i&gt;
                          &lt;span class="button__text"&gt;Facebook&lt;/span&gt;
                      &lt;/button&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;button type="button" class="button"&gt;
                          &lt;i class="fa-brands fa-youtube"&gt;&lt;/i&gt;
                          &lt;span class="button__text"&gt;Youtube&lt;/span&gt;
                      &lt;/button&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;button type="button" class="button"&gt;
                          &lt;i class="fa-brands fa-linkedin"&gt;&lt;/i&gt;
                          &lt;span class="button__text"&gt;LinkedIn&lt;/span&gt;
                      &lt;/button&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;button type="button" class="button"&gt;
                          &lt;i class="fa-brands fa-github"&gt;&lt;/i&gt;
                          &lt;span class="button__text"&gt;GitHub&lt;/span&gt;
                      &lt;/button&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;button type="button" class="button"&gt;
                          &lt;i class="fa-solid fa-envelope"&gt;&lt;/i&gt;
                          &lt;span class="button__text"&gt;Email&lt;/span&gt;
                      &lt;/button&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                          &lt;button type="button" class="button"&gt;
                              &lt;i class="fa-brands fa-discord"&gt;&lt;/i&gt;
                              &lt;span class="button__text"&gt;Discord&lt;/span&gt;
                          &lt;/button&gt;    
                   &lt;/li&gt;
                   &lt;li&gt;
                           &lt;button type="button" class="button"&gt;
                               &lt;i class="fa-brands fa-xbox"&gt;&lt;/i&gt;
                               &lt;span class="button__text"&gt;Xbox&lt;/span&gt;
                           &lt;/button&gt;    
                   &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"&gt;&lt;/script&gt;
      &lt;script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>