ilaborie/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        body {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            max-height: 100vh;
            max-width: 100vw;
            overflow: hidden;
            margin: 0;
            background: coral;
        }

        main {
            margin: 1em 10vw;
            padding: .5em;
            border-radius: .25em;
            max-height: calc(100vh - 3em); /* remove margin and padding */
            overflow: auto;
            background: cadetblue;
        }

        label {
            border : thin outset lightgrey;
            background: lightgrey;
            padding: .25em;
        }

        .dialog {
            position: absolute;
            display: none;
            justify-content: center;
            align-items: center;
        }

        .dialog .dialog-content > label {
            float: right;
            margin: .25em;
        }

        .dialog .dialog-content {
            padding: .5em;
            max-width: 66vw;
            max-height: 80vh;
            overflow: auto;
            background: wheat;
            border: medium solid rgba(0, 0, 0, .5);
            box-shadow:
                0 0 10vmin rgba(0, 0, 0, .5),
                0 0 0 100vmax rgba(0, 0, 0, .5);
        }

        #toggle-dialog:checked ~ .dialog {
            display: flex;
        }
        #toggle-dialog {
            /* Hide checkbox, the a11y way */
            position: absolute !important;
            height: 1px;
            width: 1px;
            overflow: hidden;
            clip: rect(1px, 1px, 1px, 1px);
        }

    </style>
</head>

<body>
    <input type="checkbox" id="toggle-dialog">
    <main>
        <label for="toggle-dialog">Open</label>

           <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel sapiente quas voluptas modi ad! Architecto iusto, provident cupiditate quo recusandae, optio distinctio perspiciatis eveniet laborum consequatur ullam tempora delectus enim.</span>
           <span>Magnam expedita architecto odio recusandae vel excepturi, magni, unde fugit mollitia omnis sed consectetur vero. Accusamus, qui aperiam. Quasi rem, ea vitae culpa repellendus vel necessitatibus voluptas et beatae commodi!</span>
           <span>Aperiam, dolorem accusantium. Voluptatum veniam ut, mollitia sapiente enim vitae harum, sunt pariatur eveniet aspernatur perspiciatis porro sed excepturi aliquam nobis expedita magnam distinctio! Ex explicabo expedita nulla magni animi!</span>
           <span>Aliquam, saepe porro molestia
                padding: .5em;
                max-width: 66vw;e ipsa nobis recusandae quam vitae ut iure ipsam? Quaerat, illum in repellendus soluta cumque optio commodi, illo voluptate voluptatibus laboriosam, quasi labore quisquam est. Optio, accusamus.</span>
           <span>Ut excepturi voluptatem labore, ad sint natus velit placeat ducimus nihil provident odit est id, esse hic. Aliquid autem sequi suscipit dolorum, possimus accusantium expedita quasi eaque, dolore ducimus reprehenderit?</span>
           <span>Impedit illum unde in, fugiat fuga, labore earum minus placeat commodi ad enim aperiam nemo, corrupti dolorem? Fuga deleniti recusandae expedita beatae, aperiam distinctio sed. Sapiente culpa minus ipsum in?</span>
           <span>Veniam dolor deserunt, similique provident maxime excepturi sed. Atque quam ad inventore deleniti nesciunt delectus cupiditate quaerat iusto voluptas minus. Commodi molestias, velit quos vel placeat quod pariatur necessitatibus debitis!</span>
           <span>Omnis ipsum nemo, vel, quod nostrum facilis repudiandae quaerat velit nisi consequuntur voluptatum eos illum! Beatae asperiores totam inventore expedita autem, impedit nesciunt aspernatur assumenda voluptatem consequatur magni corporis quas.</span>
           <span>Ab necessitatibus ipsa totam, aut corrupti iste porro impedit a similique assumenda harum cupiditate magnam nihil sapiente, accusantium sed consequuntur adipisci. Qui, rerum officia iure pariatur alias beatae vitae amet.</span>
           <span>Enim sit dolorum eligendi eveniet quisquam dolore ab in ducimus. Qui, doloribus omnis tempora deserunt deleniti ipsa eos. Eaque ab suscipit officia quidem necessitatibus sed aperiam ullam modi delectus in.</span>
           <span>Cupiditate accusantium atque magnam magni et assumenda ad aperiam quos eaque saepe nihil quia consequatur necessitatibus sapiente est debitis minima, ut deserunt sint. Fuga dolorem exercitationem, quia saepe praesentium ullam!</span>
           <span>Pariatur officiis sunt harum eum ea aliquid dolores ut corrupti dolor itaque, enim animi totam deleniti beatae et, maiores inventore eligendi magni. Vitae doloribus reiciendis tenetur consequuntur rerum sed possimus?</span>
           <span>Obcaecati culpa consequuntur quo autem itaque placeat corrupti numquam cumque in voluptates, a vel tempore accusantium esse. Et doloribus error perferendis unde accusantium dolore, animi molestias cumque suscipit cupiditate voluptatem?</span>
           <span>Numquam fugiat necessitatibus quibusdam laCloseudantium a, minima aut, veniam beatae reprehenderit incidunt, error consequuntur? Voluptatibus eaque molestiae veritatis esse accusantium! Quis, ipsum nam. Distinctio asperiores voluptatibus magni quo, minima magnam.</span>
           <span>Officia ut necessitatibus repellat ipsum eligendi illo neque, totam fugiat sit explicabo adipisci esse nulla obcaecati sed quae alias praesentium magnam cum soluta itaque similique odio provident et asperiores! Aperiam.</span>
           <span>Recusandae ipsum at, nemo eligendi culpa perspiciatis animi quo quidem provident repudiandae cupiditate illum error voluptatum rerum iure laborum! Odit itaque sit reiciendis totam eveniet at repellat ullam aperiam similique.</span>
           <span>Cum animi veritatis enim ducimus sunt consequuntur quo perferendis? Nostrum optio quos a modi, ea pariatur facere aliquid dignissimos laudantium ratione libero ducimus dicta error voluptas iure perspiciatis quas consequuntur.</span>
           <span>Est et iste consequuntur nulla dicta aperiam aut facilis? Molestias cupiditate id repellendus beatae illo dicta voluptates, ducimus est reiciendis, doloremque aut aspernatur quas rerum. Ex, quod provident. Architecto, maxime.</span>
           <span>Nostrum necessitatibus animi perspiciatis facere deleniti, quibusdam praesentium asperiores saepe odit soluta dolores, quas corrupti quam consequatur deserunt? Eius distinctio ipsam voluptatem quaerat! Delectus ut magni consequuntur illo autem iste.</span>
           <span>Aspernatur magnam voluptate in delectus, quaerat magni explicabo amet soluta eaque laboriosam deserunt ratione voluptatibus quasi enim! Obcaecati laudantium magnam, eum dolorem vel quos ducimus reiciendis omnis consequuntur veniam quaerat?</span>
           <span>Placeat ut eius impedit molestias. Hic, vel neque? Ullam voluptas mollitia excepturi fuga dolores deleniti veniam harum quasi, porro, suscipit consequatur, libero possimus officiis. Saepe eaque eligendi atque exercitationem veniam.</span>
           <span>Sequi laborum natus debitis. Aliquam cupiditate corrupti, sit at saepe sunt suscipit iusto nulla fugiat doloremque aut porro quod vitae nisi voluptas a, accusamus molestias eum nesciunt cumque tempore reiciendis!</span>
           <span>Quos consequatur quisquam ipsam ea dolore nobis voluptates nostrum obcaecati asperiores aperiam nesciunt earum facilis molestiae, incidunt in optio necessitatibus fuga saepe fugiat id cumque. Error nobis quibusdam totam quod.</span>
           <span>Quia maiores nihil, accusantium perspiciatis nemo labore corrupti temporibus dicta itaque molestiae veritatis totam minima rem impedit reiciendis sint expedita nulla! In praesentium consectetur, facere blanditiis explicabo quis rerum odio!</span>
           <span>Laborum et illo asperiores voluptatum corporis expedita blanditiis culpa id, repellendus dolore, sequi fuga est, earum voluptates odit quos. Nam, nisi. Nam qui excepturi dicta! Vero, minima. Sit, reiciendis ducimus.</span>
           <span>Ut, nihil. At repellendus eligendi, cum nobis vero ipsa corporis adipisci sapiente perspiciatis ullam corrupti saepe eius reprehenderit repudiandae necessitatibus optio vitae nulla voluptatum ratione accusamus, aliquam alias, omnis veniam!</span>
           <span>Accusamus, consequatur rem. Deserunt harum ducimus eos magni sint recusandae ullam nam officia pariatur molestias repellat aperiam autem doloremque ex accusamus laborum ratione odit, vitae eligendi voluptates cumque. Aliquid, blanditiis.</span>
           <span>Voluptatem accusamus eius voluptate, harum dolorum saepe sapiente excepturi vel delectus, maiores rerum ipsa esse fugiat quasi mollitia voluptatum natus soluta inventore cupiditate maxime aperiam? Quae cumque adipisci architecto corporis.</span>
           <span>Accusamus, praesentium. Ipsa molestias sed maxime odit beatae ullam fugit, quis maiores quas magni deleniti amet ipsum adipisci a in corrupti possimus neque iste excepturi enim atque! Reprehenderit, praesentium dolore?</span>
           <span>Molestias temporibus vel tempore placeat quam ea totam numquam facilis necessitatibus? Mollitia, perferendis deserunt facere fuga officia nemo magnam vitae perspiciatis quis laborum in atque, molestias dignissimos adipisci dolor praesentium.</span>
           <span>Minus, culpa. Modi amet neque sed veritatis placeat laudantium fuga dolorum, voluptate reprehenderit, eius velit cumque excepturi mollitia doloribus inventore alias nam fugit maiores aut cum! Sunt, perferendis velit? Optio?</span>
           <span>Ducimus est voluptas ipsum optio harum omnis quis voluptatum minima corporis quod tempora commodi, enim consequatur, modi repellendus quibusdam, hic sapiente quisquam architecto inventore debitis officia ea animi sed. Suscipit!</span>
           <span>Sunt voluptatum facilis ducimus doloremque, quo obcaecati blanditiis velit a ipsum sequi optio, expedita, commodi officiis. Eaque magnam consectetur, a neque dolore quibusdam aperiam laudantium vel! Repellendus facere quisquam maiores?</span>
           <span>Omnis, optio incidunt! Culpa velit libero adipisci autem labore dolores nihil numquam est quae. Obcaecati nulla id amet. Ad repellendus inventore rem veniam iure. Nulla iste ex odio repudiandae! Odit?</span>
           <span>Id laboriosam veritatis ea sequi officia nemo obcaecati, iusto ullam ut, impedit tempore. Excepturi odio est vero, similique veritatis fugiat sit? Rerum ab consectetur, ea non qui voluptatem reiciendis perspiciatis?</span>
           <span>Enim molestiae porro aliquam, asperiores nemo magni tempora harum voluptatem hic quam atque sequi consectetur fuga officia rerum sint ex at accusamus sapiente illum nisi culpa odio id quae. Facere?</span>
           <span>Deleniti accusantium corporis unde velit, in perspiciatis mollitia repellendus expedita. Ipsum earum, eaque obcaecati omnis distinctio cumque dicta eum iure ratione est incidunt animi necessitatibus cupiditate iste, temporibus dolores ex.</span>
           <span>Facere accusamus labore cum expedita soluta earum fuga sed, vitae voluptatem saepe tempore repellat molestias nemo doloribus natus consectetur magnam tempora quis unde adipisci perferendis vel enim. Praesentium, repellat exercitationem?</span>
           <span>Iure cupiditate deleniti, nemo neque dolorem velit cumque laborum, voluptatibus nisi ipsa maiores ab asperiores, incidunt vitae sunt? Est nostrum vitae recusandae facilis, eligendi itaque nisi odit provident veritatis officiis.</span>
           <span>Omnis, voluptatum tenetur maiores fuga similique sint a laborum veritatis id vero neque ipsum qui dolores eaque voluptatibus odit illo cum veniam expedita nisi! Non consequatur distinctio perferendis delectus laboriosam.</span>
           <span>Rem dicta a placeat nobis libero? Dicta cum libero vero natus? Ullam beatae minima dolores quaerat quibusdam libero eos! Fugiat, expedita veniam iusto at similique ratione fugit voluptate vel ab?</span>
           <span>Dicta, modi? Ut reprehenderit autem provident non ipsum laudantium dolore, placeat quos commodi quibusdam quaerat repudiandae accusantium, accusamus voluptatem eligendi vero totam aliquam! Quia vel aspernatur corporis, deserunt voluptas excepturi!</span>
           <span>Repellat velit numquam rem aliquid temporibus hic excepturi repellendus eos. Iure esse accusantium, vitae facere accusamus magnam reprehenderit odit incidunt provident commodi cumque repellat quam laboriosam! Maxime animi dicta ipsum!</span>
           <span>Suscipit fugiat, fugit provident mollitia rem fuga accusantium delectus doloribus excepturi quidem soluta labore, consequatur quod! Nobis fuga fugiat a perspiciatis quis laboriosam animi sapiente iure porro, ab quod! Laboriosam?</span>
           <span>Dolores molestias illum modi labore repellendus, repudiandae distinctio quae necessitatibus numquam amet veritatis! Magni maiores hic, consequatur illum adipisci doloremque itaque cumque illo reprehenderit! Excepturi, maiores. Eius facilis praesentium provident.</span>
           <span>Consectetur at maiores voluptates necessitatibus consequatur accusamus nemo recusandae iure ducimus dolorum nesciunt aut ipsum aspernatur impedit quos eius veniam, animi optio iusto obcaecati consequuntur. Tempora adipisci debitis necessitatibus officiis!</span>
           <span>Reiciendis animi dolorem ea rerum sit possimus minima modi, veniam enim iste! Numquam, consequatur quisquam? Corporis obcaecati at unde provident, porro quod eos neque distinctio ipsum doloribus dolor, facere sequi.</span>
           <span>Quisquam, cum! Quis, nisi modi! Magnam eius consectetur necessitatibus deleniti debitis suscipit ab architecto voluptatibus delectus autem officia ipsa nemo cupiditate consequuntur, inventore molestias placeat doloribus quibusdam eum. Dolores, explicabo!</span>
           <span>Vitae illum odio velit a minima temporibus! Dicta, itaque mollitia. Omnis consequuntur sint ratione ut amet inventore iste, ex tempora eos quia molestiae rerum nesciunt, commodi vitae dolorum quam modi.</span>
           <span>Atque laborum excepturi asperiores suscipit velit vero aspernatur amet, unde consectetur, ea voluptates dolorum quia accusantium doloribus aut consequatur perspiciatis vitae! Commodi architecto adipisci perspiciatis voluptatum quidem quia nemo unde?</span>
           <span>Accusamus ad eligendi accusantium repellendus laudantium, quam, odit iure unde modi hic consectetur eveniet itaque consequuntur numquam recusandae odio corrupti ratione dolore a tempore nulla rerum ex nisi. Tempora, vel.</span>
           <span>Harum quibusdam iusto quasi? Adipisci consequuntur excepturi quia aperiam ipsa. Cupiditate illo adipisci distinctio magni repellat fugit veritatis asperiores maxime reprehenderit corporis? Quas, asperiores eum? Fugiat optio minima laudantium nisi?</span>
           <span>Soluta tempore accusantium, maxime obcaecati provident a iure saepe esse aliquid cumque dolores, enim distinctio non consectetur omnis ipsam perspiciatis veritatis minus quod, dolorum fuga. Unde quaerat aliquam veritatis impedit.</span>
           <span>Porro beatae aliquam quasi cum, quos in dicta placeat, vitae harum repellat optio quaerat delectus rem eum ea provident consequuntur expedita exercitationem fugiat officiis accusamus laborum. Voluptatum, debitis. Enim, unde.</span>
           <span>Eveniet eum error quod itaque! Quae numquam voluptate tempora fuga dolore eos quaerat illo aliquid soluta nihil, quo in architecto nemo iste cupiditate corporis, fugit officia autem vero exercitationem eligendi?</span>
           <span>Perspiciatis quisquam libero laborum. Vero aliquid sint numquam inventore quaerat molestias provident maiores praesentium ut dolore voluptates saepe laudantium hic, architecto nisi molestiae magni magnam quas. Esse repudiandae dolore voluptatem.</span>
           <span>Optio recusandae iusto id illo dolorum quia? Iusto delectus quisquam vero, consectetur at officia ratione, eligendi quia molestiae expedita amet? Incidunt voluptatibus enim dolore ipsam iste architecto corrupti suscipit pariatur!</span>
           <span>Perferendis, molestiae porro, aspernatur debitis excepturi rerum quaerat ab nesciunt quisquam suscipit ducimus tempora neque, quod eaque dolore velit quasi distinctio! Quasi, magni expedita? Magnam cum itaque incidunt sapiente architecto?</span>
           <span>Minima, expedita animi deleniti, cum quae voluptas quas corrupti minus ratione laudantium nemo, autem doloribus enim quisquam? Molestiae commodi voluptates aut pariatur repellendus aperiam, vel quaerat eveniet autem repellat exercitationem?</span>
           <span>Autem libero quasi minima debitis hic molestias vitae, obcaecati dicta commodi sit, consectetur suscipit numquam! Delectus impedit in facere porro nisi ducimus adipisci reprehenderit dolores distinctio explicabo, blanditiis, vel ab.</span>
           <span>Totam quia hic magni aut ex iusto vitae maiores voluptatibus nemo ipsum, velit est mollitia! Beatae odio, officiis fugiat accusamus suscipit ea. Obcaecati quod repellendus inventore voluptas distinctio eaque recusandae!</span>
           <span>Fugiat officiis harum sint id beatae provident animi laboriosam aperiam dolore, mollitia nemo alias. Eos, ex nam est recusandae perferendis sapiente porro dolore voluptatem unde? Tenetur eum fugit earum veritatis.</span>
           <span>Sit esse reiciendis, inventore quasi in itaque ipsa veniam doloremque commodi quia alias, officia explicabo vitae rem illo maiores neque. Numquam perspiciatis quae quasi, inventore labore repellat eum suscipit atque.</span>
           <span>Asperiores delectus veniam quidem iusto neque fuga, sed ducimus adipisci quasi odit voluptatem sapiente illum cum nobis aliquid aliquam eius. A illo facilis labore sit incidunt vitae deserunt quae nisi.</span>
           <span>Perspiciatis laborum aliquid nihil earum adipisci laudantium, quia ipsa, quo excepturi harum voluptatem quaerat! Voluptatem illo tempore assumenda asperiores aspernatur eos similique voluptatum sit, reprehenderit provident? Perferendis recusandae non quasi?</span>
           <span>Exercitationem vel quibusdam repellendus numquam inventore velit cupiditate qui cumque accusantium suscipit quasi enim voluptates odit reiciendis fugit aliquid molestiae esse eligendi, aperiam quam animi incidunt repellat delectus officiis. Ullam.</span>
           <span>Totam ipsam nisi, veritatis numquam voluptas, sunt obcaecati laborum enim eius, ipsum recusandae itaque. Error voluptatibus numquam soluta esse sit! Quam ad impedit debitis cum excepturi repudiandae facilis incidunt soluta?</span>
           <span>Odio, architecto facilis reiciendis ipsam eos voluptates alias tempora quia incidunt hic, qui dolor perferendis omnis quaerat voluptate labore nemo laboriosam ad praesentium enim tempore ipsum dolores! Tempore, repellendus consequuntur.</span>
           <span>Possimus adipisci veniam iusto distinctio vero aliquid quam amet explicabo deleniti inventore vitae a illum doloribus officiis error, magni omnis. Voluptatem, molestiae quos. Sint provident magnam quibusdam aliquam id ullam.</span>
           <span>Ratione tempore nesciunt quaerat? Veritatis explicabo itaque error unde cum laboriosam odit, nisi at reiciendis, quibusdam earum, iste iure a fuga culpa dolorem atque excepturi illo distinctio aperiam labore. Quibusdam.</span>
           <span>Quia, incidunt officiis temporibus ut praesentium quae ipsum provident cumque molestias totam? Aliquam totam corrupti veritatis dolorem alias dolores facere quae nihil deleniti consectetur aperiam vero, accusamus, quisquam, sapiente illo!</span>
           <span>Ipsa animi aut dolor quam exercitationem, sunt hic libero, praesentium sequi eaque voluptatum, repellat nobis doloribus facilis vel omnis! Illo ducimus officia voluptatem necessitatibus vitae blanditiis quam dolores modi deserunt!</span>
           <span>Quo architecto obcaecati unde praesentium, assumenda ipsum voluptatibus rerum accusamus veritatis expedita quas, at aut nulla incidunt libero maxime fugiat dolor! Reprehenderit error earum incidunt esse repudiandae quibusdam, officia commodi?</span>
           <span>Optio tempora sunt voluptatum tenetur nisi officia vitae quisquam velit corporis quibusdam, nulla commodi provident. Rem reprehenderit pariatur ex soluta, sequi eaque sapiente quidem tempore itaque non consequatur quo nobis!</span>
           <span>Voluptatem perferendis accusantium non dolor deleniti quidem illo. Dolore recusandae assumenda excepturi nostrum asperiores dicta natus, cum quaerat. Nulla ratione hic omnis? Quis rem sint obcaecati velit dolorum, maiores quia.</span>
           <span>Velit quam ab dignissimos atque quae sequi dolorum voluptatibus neque. Vitae cupiditate aspernatur ex, similique molestiae amet harum aliquid eaque enim voluptatibus maxime temporibus excepturi saepe repudiandae est, perferendis tempore.</span>
           <span>Doloremque tempore blanditiis, tempora ex beatae vel. Amet sunt quidem cum unde? Veritatis unde molestiae esse cupiditate itaque minima sint voluptatum asperiores, ipsam quisquam accusantium quod labore suscipit cum ea.</span>
           <span>Numquam tenetur temporibus deleniti omnis non qui harum, explicabo consequuntur saepe nisi labore ullam modi optio corporis reprehenderit quas ducimus beatae sapiente odit veritatis cupiditate iure! Nulla nam vero alias.</span>
           <span>Eius odit aliquam, officiis dolorum, ad accusamus odio, autem minima quod illum itaque nobis repellendus esse. Similique, dicta nobis perferendis, possimus temporibus dolorum vero repudiandae corrupti deserunt rem iste atque.</span>
           <span>Quidem numquam nemo unde, atque omnis qui modi consequatur officiis, consectetur repellendus pariatur, veritatis odio libero temporibus molestias ab! Magni dolorem exercitationem quas repudiandae eius et saepe a sint officiis.</span>
           <span>Eveniet distinctio eos fugiat, voluptatum quam possimus, cumque recusandae magni reiciendis iure necessitatibus esse molestiae aperiam nesciunt dignissimos enim natus suscipit quod exercitationem. Placeat incidunt natus asperiores sed nulla laborum?</span>
           <span>Sunt, delectus ducimus. Placeat, itaque nisi, voluptate eaque illum vel et cum impedit architecto quae ut laborum rem neque harum totam voluptatibus ex? Explicabo natus minima sequi! Neque, expedita reiciendis.</span>
           <span>Sit nobis repellendus rerum id omnis aliquam deserunt iste. Sed facilis laudantium aliquid distinctio ipsam praesentium omnis placeat earum animi, libero illum, id commodi, vel deserunt facere ab eveniet eligendi.</span>
           <span>Illo tempora vero dolor, numquam praesentium in. Veniam enim delectus tenetur natus provident, esse eligendi, iste non numquam sequi ducimus molestias porro perspiciatis exercitationem necessitatibus! Placeat, in. Esse, placeat maxime!</span>
           <span>Dicta ducimus consequatur omnis iusto, asperiores facere expedita suscipit sequi, nobis sed, alias hic ratione blanditiis natus magnam fugit sunt nostrum culpa? Esse nulla cum aspernatur possimus eos ea dolore.</span>
           <span>Sequi, corporis pariatur. Iure voluptatem dolores placeat officiis, quis aperiam voluptates tempore corporis quia aliquam incidunt beatae sequi itaque nostrum modi rem similique repellendus earum eum. Numquam laudantium nostrum temporibus.</span>
           <span>Nisi ipsa, soluta totam delectus facere in sit corporis beatae quae voluptatibus aspernatur sunt nemo quia quidem possimus blanditiis modi nesciunt consectetur dolorem doloremque iure explicabo perspiciatis amet. Soluta, eum.</span>
           <span>Ab at temporibus earum repudiandae doloremque consequuntur et laborum id expedita soluta aperiam quidem odio adipisci mollitia autem labore laudantium ut, quae aliquid maxime beatae possimus quam natus? Numquam, minus?</span>
           <span>Sunt itaque illum odio corporis voluptatem saepe minus recusandae dolores sed, mollitia deleniti animi ex sapiente nobis accusantium similique reprehenderit rerum repellat beatae exercitationem libero! Consectetur natus unde laboriosam temporibus?</span>
           <span>Beatae, vel facilis, architecto cum tempora eius nam quae, rem tenetur iusto autem iure nisi? Nihil, ad voluptates ipsam, cum, suscipit doloribus nostrum atque inventore architecto blanditiis laudantium odit dolorum.</span>
           <span>Hic recusandae quidem incidunt voluptatem esse! Saepe temporibus, sapiente unde autem deleniti ullam eum debitis in molestiae aliquam atque odio sed perspiciatis eius maiores tempora voluptas nobis nihil, neque assumenda.</span>
           <span>Consectetur animi reiciendis praesentium. Deleniti amet sequi doloremque vitae eaque, perferendis nemo tempora. Vitae excepturi optio incidunt tempore asperiores illum expedita sit, commodi placeat, reprehenderit odit quo, pariatur vel dolores?</span>
           <span>Provident minus facere suscipit. Atque mollitia, quam culpa itaque dolores molestiae eaque nulla, sed aperiam libero explicabo vitae, necessitatibus autem impedit ut distinctio molestias laboriosam suscipit magnam quod dolorem totam.</span>
           <span>Sed sapiente consequatur dicta, dolor possimus cupiditate officia, dolores assumenda eos et vitae incidunt architecto provident, ipsa rerum eaque autem dignissimos magni nesciunt repudiandae ex fuga veniam quod? Incidunt, impedit.</span>
           <span>Nobis atque nulla quae iusto eos quia quibusdam, iste labore exercitationem amet ipsam et adipisci sapiente numquam repellat laboriosam cum modi! Neque vel nulla ratione itaque tenetur? Porro, ea dolorem?</span>
           <span>Qui unde et natus, nihil nemo nisi. Culpa doloremque rem veniam perspiciatis molestiae! Provident molestias culpa voluptate numquam quas rem? Inventore accusamus quibusdam cum nemo consequuntur repudiandae culpa dignissimos ipsum?</span>
           <span>Non placeat eius id quos quis debitis sed eos repellat dolorum, ipsa, voluptatum repudiandae magni. Esse, rerum fuga voluptates ipsam, tempora nulla id consequuntur voluptas eaque quos beatae nostrum dignissimos.</span>
           <span>Officia repellendus quibusdam veniam assumenda, dolorum magnam at? Omnis, tenetur aspernatur eligendi consectetur libero illum illo, hic corporis ratione, repellendus nemo rerum. Suscipit delectus illo exercitationem perspiciatis assumenda voluptatem temporibus!</span>
           <span>Tenetur repellendus amet cupiditate rerum aperiam voluptate illo possimus consequuntur, magni distinctio ad ipsum iusto culpa aspernatur nostrum eius eaque. Perspiciatis dolores odit facere libero! Iste perferendis nam animi? Perspiciatis.</span>
           <span>Harum, illum rem? Mollitia veritatis reprehenderit dolores labore inventore nesciunt? Adipisci dicta doloremque aliquam ducimus rem, deleniti quasi accusamus earum voluptatibus, autem eligendi! Facere aspernatur accusantium officiis voluptatibus maiores illo.</span>
    </main>

    <div class="dialog">
        <div class="dialog-content">
            <label for="toggle-dialog">X</label>

                <span>
                    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum veniam dignissimos consequuntur blanditiis fugit atque dolorum placeat voluptatum harum maxime doloribus voluptas soluta, deserunt numquam, quibusdam quidem fugiat ipsa quam!</span>
                    <span>Quo, corrupti culpa! Veritatis, aperiam quisquam minima molestiae praesentium iusto quod officiis voluptates minus sit hic nisi amet quia facere accusamus velit distinctio nesciunt ut eum natus fugit perferendis eveniet!</span>
                    <span>Assumenda omnis praesentium aliquid, harum voluptatem eos totam aperiam similique. Magni illum explicabo ducimus itaque? Facilis optio nesciunt beatae fugiat. A quis iusto, nesciunt quod nobis qui! Officia, illo magnam.</span>
                    <span>Praesentium laboriosam delectus, dolorum, quibusdam quo consequuntur enim quam magni doloremque earum distinctio facere facilis dolores, ipsam corporis nobis deserunt. Omnis itaque et ea voluptatibus magni provident nobis alias esse.</span>
                    <span>Aut in dolorum rem at voluptatem, culpa, facilis mollitia nam voluptatibus sequi perferendis neque, nemo libero? Maiores animi sapiente harum deserunt omnis ullam natus, consequuntur nihil nam voluptate eum sit.</span>
                    <span>Blanditiis beatae nemo rem aliquam iure quasi culpa doloremque eum excepturi provident officiis exercitationem corporis, labore fuga? Quidem officia placeat nostrum fugiat maxime necessitatibus fuga, temporibus aperiam provident aspernatur id?</span>
                    <span>Dolorum quos, minus pariatur delectus optio, ad minima ducimus adipisci vitae sint quam nulla quisquam, magni expedita? Iste ea modi ducimus esse minus nisi, laudantium error, maiores culpa numquam sequi.</span>
                    <span>Vel quasi praesentium ad qui omnis alias dolor odit voluptates voluptate placeat, impedit dignissimos cupiditate! Rem repellat sit quasi asperiores illum nulla error odit fugiat! Repellendus, consequatur. Cupiditate, eos quas.</span>
                    <span>A quidem similique dolor corporis aspernatur vitae exercitationem obcaecati qui velit accusantium. Maiores, ipsa aliquid voluptatum hic aut laudantium incidunt architecto reprehenderit labore porro sequi repellendus animi vitae illo beatae.</span>
                    <span>Ratione vel consequatur, illum facere laborum, ducimus nihil fugiat tempora hic est amet esse pariatur cupiditate rem eum quas similique totam! Est omnis, quidem odit quos cupiditate deleniti tenetur rem.</span>
                    <span>Incidunt, exercitationem soluta ratione culpa dolores, consectetur facere error saepe recusandae dicta rem itaque quasi commodi natus? Repudiandae ad in dolorem suscipit animi natus aspernatur excepturi, aut placeat obcaecati quas.</span>
                    <span>Voluptatem voluptates doloremque, ipsum esse harum porro delectus veritatis maiores hic! Explicabo aliquid neque laboriosam illo suscipit consectetur sint cumque dolorem nemo, dicta quo corrupti. Aliquam nisi illo inventore distinctio.</span>
                    <span>Aliquid voluptates quisquam temporibus fuga maxime hic. Error exercitationem quo perspiciatis, sint et blanditiis, impedit suscipit commodi nesciunt delectus harum alias quaerat hic cupiditate similique corporis, vitae molestiae aut! Itaque.</span>
                    <span>Voluptatum inventore, explicabo quibusdam possimus vero deserunt quia dolorem natus similique doloribus recusandae praesentium excepturi perferendis eaque mollitia, magni eligendi. Iste autem quos, recusandae illo eaque tempora et earum quae!</span>
                    <span>Saepe alias quaerat dicta ea tenetur aliquam fugiat odit culpa distinctio animi ullam, nemo ut pariatur fugit est cum accusamus perspiciatis qui omnis, delectus temporibus explicabo? Nesciunt tenetur magnam vel.</span>
                    <span>Nihil optio dolor temporibus consectetur deleniti rem soluta sint, neque illo fuga nesciunt repudiandae reiciendis ut saepe quis labore fugit dolore? Est deserunt quis temporibus ullam numquam sunt aut quasi.</span>
                    <span>Quidem, numquam! Asperiores consectetur enim eius eum, sed magni temporibus. Nulla alias accusantium vel quam eum deserunt voluptas, quas reiciendis, eligendi voluptatibus, magni illum dicta rem natus facere porro! Sunt.</span>
                    <span>Esse quisquam ipsa possimus incidunt rem, molestiae nulla voluptas corrupti cum accusamus necessitatibus cupiditate amet nobis ex consectetur aut. Autem unde aliquam dolorem tenetur blanditiis? Voluptate odit saepe beatae. Quam!</span>
                    <span>Distinctio natus impedit atque! Reiciendis, dolor, consequatur architecto tempora odit beatae maxime dolore quam tempore laudantium dolorum ab quibusdam quaerat? Praesentium numquam sapiente dicta atque, assumenda commodi ducimus nesciunt dolore.</span>
                    <span>Rem nemo deserunt eos perspiciatis eligendi, dolores esse quas asperiores aut velit optio enim eum, totam voluptas id mollitia assumenda quod voluptatum dolorem vel adipisci? Vero praesentium assumenda consequuntur unde.</span>
                    <span>Deserunt repellat labore eos enim, aspernatur explicabo autem quod omnis tempore consequatur? Dolor asperiores sequi, assumenda error voluptatibus temporibus impedit natus corporis, illo non facilis tempora nesciunt! Voluptatum, aliquid error!</span>
                    <span>Cumque, laborum rerum? Culpa saepe, sed ut illum ipsum itaque dicta quae doloribus, exercitationem reiciendis vero sint porro ipsa pariatur aspernatur, hic eligendi unde minus a fugiat voluptatibus necessitatibus temporibus?</span>
                    <span>Nam quidem, nisi vel harum aliquid nulla ullam voluptas asperiores atque accusamus quasi ad excepturi. Blanditiis fugiat reprehenderit id dolorum amet, ea illo inventore sunt ut, tempore saepe, recusandae magnam.</span>
                    <span>Veniam, facilis possimus voluptatem corporis adipisci quis nostrum repudiandae iure ipsum! Labore rem ducimus, nisi distinctio dolorem dolore eveniet laborum at, deserunt dolorum dolor dicta neque ut impedit omnis aliquam!</span>
                    <span>Natus nam ipsum excepturi aperiam distinctio sequi quas, id quidem rerum? Distinctio beatae corporis ducimus quibusdam, dolores unde minus in nam et tenetur molestias officia maxime, ut ullam doloribus voluptatum!</span>
                </span>
        </div>
    </div>
</body>
</html>