Search code examples
htmlcssscrollbar

Why do I have two scroll bars and how to remove one?


Why do I have two vertical scrollbars and how do I remove one? The lorem is just so I can scroll and see how it looks like :) Sorry for some of the content being in another language aswell.

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

html {
  overflow-x: hidden;
}

body {
  background-color: #262626;

  font-family: "Roboto Slab", serif;

  position: relative;
  overflow-x: hidden;
}

main {
  width: 100vw;
  height: 100vh;
}

#backdrop {
  width: 90%;
  height: 100%;

  margin: 0 auto;
  margin-top: 1rem;
  border-radius: 1rem 1rem 0 0;

  background-color: #727365;
}

#home-link {
  color: #f2f2e4;
  text-decoration: none;
  font-size: 1.7rem;
  font-family: "Space Mono", monospace;
  font-weight: 400;

  position: absolute;
  top: 1.95rem;
  left: 2.6rem;
}

/* Hamburger menu */
#menu a {
  text-decoration: none;
  color: #3f403b;
}

#menu a:hover {
  color: #0c0c0c;
}

#menu-toggle {
  display: block;

  position: absolute;
  top: 2.5rem;
  right: 3rem;

  z-index: 1;
}

#menu-checkbox {
  display: block;

  width: 40px;
  height: 32px;

  position: absolute;
  top: -7px;
  left: -5px;

  cursor: pointer;

  opacity: 0;
  z-index: 2;
}

#menu-toggle span {
  display: block;

  width: 33px;
  height: 4px;

  margin-bottom: 5px;
  position: relative;

  background: #f2f2e4;
  border-radius: 3px;

  z-index: 1;

  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
    opacity 0.55s ease;
}

#menu-toggle span:first-child {
  transform-origin: 0% 0%;
}

#menu-toggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

#menu-checkbox:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #3f403b;
}

#menu-checkbox:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menu-checkbox:checked ~ span:nth-last-child(2) {
  opacity: 1;
  transform: rotate(-45deg) translate(0, -1px);
}

#menu {
  width: 60vw;
  height: 70vh;

  position: absolute;
  right: -100px;

  margin: -100px 0 0 0;
  padding: 50px;
  padding-top: 125px;
  border-radius: 1rem;

  background-color: #bfbfae;
  list-style: none;

  transform-origin: 0% 0%;
  transform: translate(100%, 0);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}

#menu li {
  padding: 10px 0;
  font-size: 22px;
}

#menu-checkbox:checked ~ ul {
  transform: none;
  opacity: 1;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 13px;
}

::-webkit-scrollbar-thumb {
  border-radius: 100px;
  border: 3px solid transparent;
  background-clip: content-box;
  background-color: rgb(88, 88, 88);
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgb(109, 109, 109);
}

/* Media queries */
@media only screen and (min-width: 600px) {
}

@media only screen and (min-width: 769px) {
  #backdrop {
    width: 98%;
    height: 96.5%;
    border-radius: 1rem;
  }

  #menu-checkbox {
    display: none;
  }

  #menu-toggle span {
    display: none;
  }

  #menu {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
    transform: none !important;

    background-color: #bfbfaee1;

    padding: 0 1rem 0 1rem;
    border-radius: 2rem;
    font-family: monospace;

    position: fixed;
    top: 102vh;
    right: 50%;
    translate: 50% 0;

    height: fit-content;
    width: 45vw;

    display: flex;
    justify-content: space-between;
  }

  #menu li {
    display: inline;
    font-size: 1.2rem;
  }

  #active {
    background-color: blue;

    border-radius: 3rem;
  }

  .menu-links {
    padding: 8px 35px 8px 35px;
  }

  #home-link {
    display: flex;
    justify-content: center;
    position: static;

    padding-top: 0.5rem;
  }
}
<!DOCTYPE html>
<html lang="sv">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Överdäckningen | Startsida</title>
    <link rel="stylesheet" href="css/style.css" />
    <script src="script/js.js"></script>
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;300;400&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <main>
      <div id="backdrop">
        <header id="wrapper">
          <nav>
            <a href="index.html" id="home-link">ÖVERDÄCKNINGEN</a>
            <div id="menu-toggle">
              <input id="menu-checkbox" type="checkbox" />
              <span class="hamburger-span"></span>
              <span class="hamburger-span"></span>
              <span class="hamburger-span"></span>
              <ul id="menu">
                <li><a class="menu-links" id="active" href="#">Länk 1</a></li>
                <li><a class="menu-links" href="#">Länk 2</a></li>
                <li><a class="menu-links" href="#">Länk 3</a></li>
                <li><a class="menu-links" href="#">Länk 4</a></li>
              </ul>
            </div>
          </nav>
        </header>
      </div>
      <div>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro amet
          dolores nisi delectus ad inventore laboriosam alias, architecto eos
          sunt quod eum maiores provident aspernatur debitis ratione minus
          quaerat cumque veniam. Delectus commodi odit molestiae excepturi.
          Doloremque rem tempora quod est veritatis earum accusamus vel fugiat
          numquam reprehenderit ad labore repudiandae recusandae neque
          voluptatum a nulla dignissimos sapiente ut, officiis fugit porro.
          Aliquid unde incidunt quisquam. Veniam sunt doloremque modi in
          voluptates inventore. In corrupti hic eos, incidunt iusto dignissimos
          praesentium ut adipisci possimus officiis nesciunt, eveniet asperiores
          illum laudantium aliquid dicta temporibus aut maxime dolor fugit totam
          animi velit repudiandae ea? Esse, quod repudiandae amet iusto
          temporibus aperiam dolore aliquid, magni sunt eveniet deleniti at
          suscipit quasi adipisci, quo officia accusantium repellat nostrum
          nemo! Reiciendis repellat omnis facilis qui excepturi assumenda id
          laborum vero voluptas, vitae aspernatur eius magnam voluptates iusto,
          dolores a fugit tenetur quo nostrum ipsa sequi cumque? Velit voluptate
          et at aut iste obcaecati nisi, vitae repellat placeat quasi iusto.
          Rerum vero eos earum nobis in inventore quos aliquid id, assumenda
          tempora? Modi repudiandae dolorem architecto ut animi doloribus,
          tempore possimus nihil ipsum accusamus fugiat laboriosam culpa iure
          eum mollitia ab? Quidem quas minus necessitatibus voluptate, rem vero
          eligendi possimus totam voluptates laudantium atque illo provident
          quasi! Laboriosam quo odio quia in! Commodi voluptatem facilis eos
          neque non, magni fugiat numquam consectetur, ipsa dolores ut rerum,
          sint sequi quos illo obcaecati omnis harum laudantium error inventore
          praesentium. Commodi fugit nostrum asperiores vel ducimus
          reprehenderit quis suscipit laborum et fugiat libero eius assumenda
          esse nobis, iste, impedit ipsa repudiandae aut aspernatur placeat
          inventore! Eligendi sit in obcaecati quia repudiandae explicabo
          officia eveniet omnis earum. Quibusdam alias amet quas nobis ullam
          vitae enim quod facilis quam maiores! Rem consequatur distinctio
          laudantium harum labore, minus qui molestiae suscipit modi libero quia
          pariatur maxime hic, voluptate totam numquam, illo beatae voluptatibus
          atque ipsa assumenda. Ipsum laudantium, modi nam repellat similique
          vitae asperiores corrupti accusamus voluptate maxime harum expedita,
          ipsa fugiat obcaecati deserunt porro impedit blanditiis error
          reprehenderit temporibus ex at, molestias eius magnam? Voluptatem,
          repellat ratione distinctio sit odio assumenda non ad fugit eligendi
          nemo eveniet enim porro asperiores, aliquam aliquid? Officia
          reiciendis libero tempore cupiditate rem laboriosam odit aspernatur!
          Perferendis, id odit. Laudantium, culpa. Iure placeat deserunt
          consectetur! Cumque, asperiores itaque nobis laudantium fuga fugit,
          nemo autem maiores quo et perferendis laborum illum quis suscipit
          eveniet ullam modi. Soluta cum eaque, sequi eveniet deserunt quia odio
          officia tenetur vero corrupti labore eum voluptatum quam cumque fuga
          hic numquam! Ullam, a dolore omnis nemo beatae at possimus eum
          officiis molestiae exercitationem temporibus ab blanditiis voluptatum
          reiciendis mollitia maxime perspiciatis harum nostrum officia deleniti
          delectus. Hic quos molestias rerum ducimus fugiat consectetur facilis
          perspiciatis animi, incidunt error ut tenetur similique unde molestiae
          labore perferendis sapiente totam mollitia! Qui, similique ad eos,
          cumque laudantium sapiente dolores quas omnis nam fuga exercitationem
          blanditiis quaerat aut animi at beatae explicabo nihil adipisci.
          Voluptatum qui repudiandae provident ratione, tenetur illum fuga quas
          sapiente laborum ipsa obcaecati aut quod perspiciatis, ullam, veniam
          explicabo nulla quaerat incidunt quidem! Est odit corrupti quibusdam
          doloribus! Vel excepturi voluptatum, nobis voluptatem error
          consectetur placeat quibusdam architecto! Molestiae ipsum suscipit est
          aperiam veniam nobis laboriosam porro alias, sit eos repellendus
          labore, ratione unde ducimus, accusantium illum voluptatum. Tempore,
          rem repellat, laboriosam velit aut aliquid ipsa quibusdam consectetur
          soluta veniam architecto totam! Reiciendis aliquid vel voluptatem
          tempore ea, unde officiis. Corrupti perspiciatis voluptates, suscipit
          vero voluptatibus corporis commodi excepturi reprehenderit eos et
          nulla voluptatem fuga porro maxime quam eius distinctio, at id aliquid
          itaque consequuntur ut repudiandae. Officiis, qui eveniet animi
          officia voluptate ipsum, fuga, nisi doloribus in obcaecati quia error
          eaque ad cupiditate aliquam alias modi placeat mollitia quibusdam
          illum quas aliquid sint? Eligendi, nostrum maiores quas iste
          recusandae quae natus impedit consequatur id ipsam dignissimos sequi
          excepturi, nobis ducimus dolorum tenetur repellendus praesentium in
          dicta atque velit voluptatum quia. Placeat culpa aliquid ab natus
          quaerat non quasi cupiditate reprehenderit soluta, unde repellendus
          illum, praesentium distinctio blanditiis quod magnam laborum excepturi
          iusto molestiae accusamus dolorem nihil. Voluptatum, molestias
          debitis? Ipsum veritatis iure suscipit, saepe alias aliquam enim,
          officiis deleniti soluta ratione tempora maxime ab beatae autem
          accusamus nemo sit, porro dolore illum esse hic. Repudiandae expedita
          iste, inventore, officia, ut voluptatibus unde ullam sint debitis enim
          ipsa dolorum ducimus quos. Suscipit tenetur ratione sed iure! Tempora
          maxime, et neque natus dolores aliquam hic magni commodi quod a vel
          delectus quisquam aperiam cupiditate eaque aspernatur tempore atque
          tenetur modi? Exercitationem repellat hic officiis atque aperiam
          repellendus et eos quisquam ratione, quidem enim quae sint facere
          laudantium amet iure? Dolorum esse autem corrupti explicabo laborum
          eum at distinctio dicta aut molestias sunt, totam ab eligendi
          possimus. Ipsa, dolorem numquam sint doloribus reprehenderit
          laboriosam aperiam alias, culpa recusandae minima assumenda tempore
          placeat sunt nesciunt, dolores quidem repudiandae dolor. Ipsa illo, ex
          repellat iusto ea fugit sapiente hic, adipisci nam, soluta numquam
          error eum neque quos commodi quae a architecto voluptas perspiciatis?
          Velit impedit libero ut sit minima exercitationem delectus nobis
          quibusdam ab excepturi, soluta maxime ipsum, maiores laudantium iste?
          Atque corrupti cupiditate non deserunt alias deleniti delectus numquam
          repellendus soluta obcaecati fugit veniam, porro asperiores nesciunt
          sed hic esse iusto ipsam provident est praesentium nam eveniet neque
          at. Eaque aliquid ipsam vitae. Impedit quas est asperiores sunt
          recusandae, iure beatae accusantium quidem quos iste sint sed
          architecto eum perferendis dolorum tempora nihil odio error.
        </p>
      </div>
    </main>
  </body>
</html>

The lorem is just so I can scroll and see how it looks like :) Sorry for some of the content being in another language aswell


Solution

  • Change the css for html from overflow: hidden-x to overflow:hidden

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    html {
      overflow: hidden;
    }
    
    body {
      background-color: #262626;
    
      font-family: "Roboto Slab", serif;
    
      position: relative;
      overflow-x: hidden;
    }
    
    main {
      width: 100vw;
      height: 100vh;
    }
    
    #backdrop {
      width: 90%;
      height: 100%;
    
      margin: 0 auto;
      margin-top: 1rem;
      border-radius: 1rem 1rem 0 0;
    
      background-color: #727365;
    }
    
    #home-link {
      color: #f2f2e4;
      text-decoration: none;
      font-size: 1.7rem;
      font-family: "Space Mono", monospace;
      font-weight: 400;
    
      position: absolute;
      top: 1.95rem;
      left: 2.6rem;
    }
    
    /* Hamburger menu */
    #menu a {
      text-decoration: none;
      color: #3f403b;
    }
    
    #menu a:hover {
      color: #0c0c0c;
    }
    
    #menu-toggle {
      display: block;
    
      position: absolute;
      top: 2.5rem;
      right: 3rem;
    
      z-index: 1;
    }
    
    #menu-checkbox {
      display: block;
    
      width: 40px;
      height: 32px;
    
      position: absolute;
      top: -7px;
      left: -5px;
    
      cursor: pointer;
    
      opacity: 0;
      z-index: 2;
    }
    
    #menu-toggle span {
      display: block;
    
      width: 33px;
      height: 4px;
    
      margin-bottom: 5px;
      position: relative;
    
      background: #f2f2e4;
      border-radius: 3px;
    
      z-index: 1;
    
      transform-origin: 4px 0px;
      transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
        opacity 0.55s ease;
    }
    
    #menu-toggle span:first-child {
      transform-origin: 0% 0%;
    }
    
    #menu-toggle span:nth-last-child(2) {
      transform-origin: 0% 100%;
    }
    
    #menu-checkbox:checked ~ span {
      opacity: 1;
      transform: rotate(45deg) translate(-2px, -1px);
      background: #3f403b;
    }
    
    #menu-checkbox:checked ~ span:nth-last-child(3) {
      opacity: 0;
      transform: rotate(0deg) scale(0.2, 0.2);
    }
    
    #menu-checkbox:checked ~ span:nth-last-child(2) {
      opacity: 1;
      transform: rotate(-45deg) translate(0, -1px);
    }
    
    #menu {
      width: 60vw;
      height: 70vh;
    
      position: absolute;
      right: -100px;
    
      margin: -100px 0 0 0;
      padding: 50px;
      padding-top: 125px;
      border-radius: 1rem;
    
      background-color: #bfbfae;
      list-style: none;
    
      transform-origin: 0% 0%;
      transform: translate(100%, 0);
      transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    }
    
    #menu li {
      padding: 10px 0;
      font-size: 22px;
    }
    
    #menu-checkbox:checked ~ ul {
      transform: none;
      opacity: 1;
    }
    
    /* Scrollbar */
    ::-webkit-scrollbar {
      width: 13px;
    }
    
    ::-webkit-scrollbar-thumb {
      border-radius: 100px;
      border: 3px solid transparent;
      background-clip: content-box;
      background-color: rgb(88, 88, 88);
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background-color: rgb(109, 109, 109);
    }
    
    /* Media queries */
    @media only screen and (min-width: 600px) {
    }
    
    @media only screen and (min-width: 769px) {
      #backdrop {
        width: 98%;
        height: 96.5%;
        border-radius: 1rem;
      }
    
      #menu-checkbox {
        display: none;
      }
    
      #menu-toggle span {
        display: none;
      }
    
      #menu {
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
        transform: none !important;
    
        background-color: #bfbfaee1;
    
        padding: 0 1rem 0 1rem;
        border-radius: 2rem;
        font-family: monospace;
    
        position: fixed;
        top: 102vh;
        right: 50%;
        translate: 50% 0;
    
        height: fit-content;
        width: 45vw;
    
        display: flex;
        justify-content: space-between;
      }
    
      #menu li {
        display: inline;
        font-size: 1.2rem;
      }
    
      #active {
        background-color: blue;
    
        border-radius: 3rem;
      }
    
      .menu-links {
        padding: 8px 35px 8px 35px;
      }
    
      #home-link {
        display: flex;
        justify-content: center;
        position: static;
    
        padding-top: 0.5rem;
      }
    }
    <!DOCTYPE html>
    <html lang="sv">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Överdäckningen | Startsida</title>
        <link rel="stylesheet" href="css/style.css" />
        <script src="script/js.js"></script>
        <link
          href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;300;400&display=swap"
          rel="stylesheet"
        />
        <link
          href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap"
          rel="stylesheet"
        />
      </head>
      <body>
        <main>
          <div id="backdrop">
            <header id="wrapper">
              <nav>
                <a href="index.html" id="home-link">ÖVERDÄCKNINGEN</a>
                <div id="menu-toggle">
                  <input id="menu-checkbox" type="checkbox" />
                  <span class="hamburger-span"></span>
                  <span class="hamburger-span"></span>
                  <span class="hamburger-span"></span>
                  <ul id="menu">
                    <li><a class="menu-links" id="active" href="#">Länk 1</a></li>
                    <li><a class="menu-links" href="#">Länk 2</a></li>
                    <li><a class="menu-links" href="#">Länk 3</a></li>
                    <li><a class="menu-links" href="#">Länk 4</a></li>
                  </ul>
                </div>
              </nav>
            </header>
          </div>
          <div>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro amet
              dolores nisi delectus ad inventore laboriosam alias, architecto eos
              sunt quod eum maiores provident aspernatur debitis ratione minus
              quaerat cumque veniam. Delectus commodi odit molestiae excepturi.
              Doloremque rem tempora quod est veritatis earum accusamus vel fugiat
              numquam reprehenderit ad labore repudiandae recusandae neque
              voluptatum a nulla dignissimos sapiente ut, officiis fugit porro.
              Aliquid unde incidunt quisquam. Veniam sunt doloremque modi in
              voluptates inventore. In corrupti hic eos, incidunt iusto dignissimos
              praesentium ut adipisci possimus officiis nesciunt, eveniet asperiores
              illum laudantium aliquid dicta temporibus aut maxime dolor fugit totam
              animi velit repudiandae ea? Esse, quod repudiandae amet iusto
              temporibus aperiam dolore aliquid, magni sunt eveniet deleniti at
              suscipit quasi adipisci, quo officia accusantium repellat nostrum
              nemo! Reiciendis repellat omnis facilis qui excepturi assumenda id
              laborum vero voluptas, vitae aspernatur eius magnam voluptates iusto,
              dolores a fugit tenetur quo nostrum ipsa sequi cumque? Velit voluptate
              et at aut iste obcaecati nisi, vitae repellat placeat quasi iusto.
              Rerum vero eos earum nobis in inventore quos aliquid id, assumenda
              tempora? Modi repudiandae dolorem architecto ut animi doloribus,
              tempore possimus nihil ipsum accusamus fugiat laboriosam culpa iure
              eum mollitia ab? Quidem quas minus necessitatibus voluptate, rem vero
              eligendi possimus totam voluptates laudantium atque illo provident
              quasi! Laboriosam quo odio quia in! Commodi voluptatem facilis eos
              neque non, magni fugiat numquam consectetur, ipsa dolores ut rerum,
              sint sequi quos illo obcaecati omnis harum laudantium error inventore
              praesentium. Commodi fugit nostrum asperiores vel ducimus
              reprehenderit quis suscipit laborum et fugiat libero eius assumenda
              esse nobis, iste, impedit ipsa repudiandae aut aspernatur placeat
              inventore! Eligendi sit in obcaecati quia repudiandae explicabo
              officia eveniet omnis earum. Quibusdam alias amet quas nobis ullam
              vitae enim quod facilis quam maiores! Rem consequatur distinctio
              laudantium harum labore, minus qui molestiae suscipit modi libero quia
              pariatur maxime hic, voluptate totam numquam, illo beatae voluptatibus
              atque ipsa assumenda. Ipsum laudantium, modi nam repellat similique
              vitae asperiores corrupti accusamus voluptate maxime harum expedita,
              ipsa fugiat obcaecati deserunt porro impedit blanditiis error
              reprehenderit temporibus ex at, molestias eius magnam? Voluptatem,
              repellat ratione distinctio sit odio assumenda non ad fugit eligendi
              nemo eveniet enim porro asperiores, aliquam aliquid? Officia
              reiciendis libero tempore cupiditate rem laboriosam odit aspernatur!
              Perferendis, id odit. Laudantium, culpa. Iure placeat deserunt
              consectetur! Cumque, asperiores itaque nobis laudantium fuga fugit,
              nemo autem maiores quo et perferendis laborum illum quis suscipit
              eveniet ullam modi. Soluta cum eaque, sequi eveniet deserunt quia odio
              officia tenetur vero corrupti labore eum voluptatum quam cumque fuga
              hic numquam! Ullam, a dolore omnis nemo beatae at possimus eum
              officiis molestiae exercitationem temporibus ab blanditiis voluptatum
              reiciendis mollitia maxime perspiciatis harum nostrum officia deleniti
              delectus. Hic quos molestias rerum ducimus fugiat consectetur facilis
              perspiciatis animi, incidunt error ut tenetur similique unde molestiae
              labore perferendis sapiente totam mollitia! Qui, similique ad eos,
              cumque laudantium sapiente dolores quas omnis nam fuga exercitationem
              blanditiis quaerat aut animi at beatae explicabo nihil adipisci.
              Voluptatum qui repudiandae provident ratione, tenetur illum fuga quas
              sapiente laborum ipsa obcaecati aut quod perspiciatis, ullam, veniam
              explicabo nulla quaerat incidunt quidem! Est odit corrupti quibusdam
              doloribus! Vel excepturi voluptatum, nobis voluptatem error
              consectetur placeat quibusdam architecto! Molestiae ipsum suscipit est
              aperiam veniam nobis laboriosam porro alias, sit eos repellendus
              labore, ratione unde ducimus, accusantium illum voluptatum. Tempore,
              rem repellat, laboriosam velit aut aliquid ipsa quibusdam consectetur
              soluta veniam architecto totam! Reiciendis aliquid vel voluptatem
              tempore ea, unde officiis. Corrupti perspiciatis voluptates, suscipit
              vero voluptatibus corporis commodi excepturi reprehenderit eos et
              nulla voluptatem fuga porro maxime quam eius distinctio, at id aliquid
              itaque consequuntur ut repudiandae. Officiis, qui eveniet animi
              officia voluptate ipsum, fuga, nisi doloribus in obcaecati quia error
              eaque ad cupiditate aliquam alias modi placeat mollitia quibusdam
              illum quas aliquid sint? Eligendi, nostrum maiores quas iste
              recusandae quae natus impedit consequatur id ipsam dignissimos sequi
              excepturi, nobis ducimus dolorum tenetur repellendus praesentium in
              dicta atque velit voluptatum quia. Placeat culpa aliquid ab natus
              quaerat non quasi cupiditate reprehenderit soluta, unde repellendus
              illum, praesentium distinctio blanditiis quod magnam laborum excepturi
              iusto molestiae accusamus dolorem nihil. Voluptatum, molestias
              debitis? Ipsum veritatis iure suscipit, saepe alias aliquam enim,
              officiis deleniti soluta ratione tempora maxime ab beatae autem
              accusamus nemo sit, porro dolore illum esse hic. Repudiandae expedita
              iste, inventore, officia, ut voluptatibus unde ullam sint debitis enim
              ipsa dolorum ducimus quos. Suscipit tenetur ratione sed iure! Tempora
              maxime, et neque natus dolores aliquam hic magni commodi quod a vel
              delectus quisquam aperiam cupiditate eaque aspernatur tempore atque
              tenetur modi? Exercitationem repellat hic officiis atque aperiam
              repellendus et eos quisquam ratione, quidem enim quae sint facere
              laudantium amet iure? Dolorum esse autem corrupti explicabo laborum
              eum at distinctio dicta aut molestias sunt, totam ab eligendi
              possimus. Ipsa, dolorem numquam sint doloribus reprehenderit
              laboriosam aperiam alias, culpa recusandae minima assumenda tempore
              placeat sunt nesciunt, dolores quidem repudiandae dolor. Ipsa illo, ex
              repellat iusto ea fugit sapiente hic, adipisci nam, soluta numquam
              error eum neque quos commodi quae a architecto voluptas perspiciatis?
              Velit impedit libero ut sit minima exercitationem delectus nobis
              quibusdam ab excepturi, soluta maxime ipsum, maiores laudantium iste?
              Atque corrupti cupiditate non deserunt alias deleniti delectus numquam
              repellendus soluta obcaecati fugit veniam, porro asperiores nesciunt
              sed hic esse iusto ipsam provident est praesentium nam eveniet neque
              at. Eaque aliquid ipsam vitae. Impedit quas est asperiores sunt
              recusandae, iure beatae accusantium quidem quos iste sint sed
              architecto eum perferendis dolorum tempora nihil odio error.
            </p>
          </div>
        </main>
      </body>
    </html>