<!--HTML-->
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Playfair+Display:900" rel="stylesheet">


<div id="lgallery">
       <section id="home">
           <header id="bigTitle">
               
           </header>

           <div class="subTitle">
               <p><img src="https://i.imgur.com/Tw7VyF4.png"></p>
           </div>

           <div class="open" onclick="openPage()">
               <img src="https://i.imgur.com/1FzEfd2.png"> *
           </div>

           
       </section>

       <section id="openThreads" class="overlay">
               <div class="overlay-content"; div style="font-family: arial; font-size: 10px; text-align: justify">
                       <header id="bigTitle">
                          
                       </header>
                       <main id="toc">
<p><img src="https://i.imgur.com/1dLsfLc.png"></p> 
                           надеюсь, ты уселся поудобнее и готов погрузиться в наше увлекательное (на самом деле, наверное, не очень, но я старался сделать его чуточку более необычным!) путешествие по собственному отрезку жизни, который ты поделил со мной? если нет, то выбора у тебя нет! ты уже нажал на йес ор йес, значит пОгНаЛе.
<br>
так вот, о чём это я? ах, да, уровень первый и самый сложный: через трудности и сложности понять, что ты и я – пусть и инь и ян, но при этом – без одного нет и другого. да-да, сначала мы с тобой осторожно шагали по этой каменистой тропинке: а вдруг можно споткнуться? но тем не менее вперёд идти хотелось без конца. затем, ты ведь помнишь, мы рванули, словно эта пробежка – последняя в нашей жизни? о боже, ты ведь должен понимать, что я хотел вывернуться для тебя наизнанку с самого первого дня знакомства? и я знаю, что это было взаимно! двадцать четыре на семь мы с тобой – рука об руку. каждая минута рядом с тобой была, есть и будет волшебной! знаешь, боссов в этой игре, конечно, нет, но дорожка впереди оказалась не без булыжников под ногами, и, несясь, словно сумасшедшие, мы, конечно, не один раз с тобой споткнулись, поцарапав и друг друга, и собственные конечности, и собственные сердца. но ведь мы с тобой – обычные люди, ведь так? нам свойственно принимать поспешные и опрометчивые решения, рваться без оглядки на последствия, срываться, просто потому что чувств много, а девать – некуда. однако вот эти самые камни, что оставили столько синяков на нас обоих, в конечном итоге всего лишь ценный опыт и испытание на прочность того, к т о мы есть друг другу. задумайся – даже спустя столько времени и столько преград, мы всё равно цепляемся друг за друга, потому что мне дышать без тебя – сложно, тебе наверняка тоже? в конечном итоге, отдышавшись после этой сумасшедшей пробежки, мы с тобой продолжаем путь навстречу самому ярком солнцу, что сияет впереди. рука об руку

                       </main>
               </div>
               <a href="javascript:void(0)" class="backbtn" onclick="closePage()"> <img src="https://i.imgur.com/2jkNWuW.png"> *</a>

               <div class="archive" onclick="openArchive()">
                   <img src="https://i.imgur.com/iLNCEBn.png">
               </div>

        </section>


        <section id="archivedThreads" class="overlay">
           <div class="overlay-content"; div style="font-family: arial; font-size: 10px; text-align: justify">
                   <header id="bigTitle">
                    
                   </header>
                   <main id="toc">
<p><img src="https://i.imgur.com/1c0zv7e.png"></p> 
                      поздравляю, мы с тобой лвлапнулись! и на самом деле я просто хочу тебе сказать спасибо за то, что этот апгрейд, когда мы п о л н о с т ь ю доверяем другу другу, когда нет запретных тем и того, нет недопониманий, но есть ежесекундная поддержка даже в простом молчании на разных концах скайпа, самое лучшее, что в принципе может случиться с близкими людьми. просто я понимаю, что ты – мой, а я – твой. лучший друг, лучший соигрок, лучший человек-мем, лучший брат по отбитым шуточкам, лучший в принципе. и я не вру. серьёзно. я просто воспринимаю тебя, как одного из самых дорогих людей мне, как часть моей жизни, и это ведь здорово, правда? здорово, потому что я люблю тебя!
<br>
и в принципе я здесь для того, чтобы в первую очередь сказать тебе об этом, напомнить в миллионный раз и чмокнуть в обе твои щёчки (или не только, да? ))0)0)0 ), и завернуть к себе в объятия, повесив ярлык «мой» (собачьи собственнические инстинкты, не обессудь).
<br>
в принципе ты и сам знаешь, чего ты хочешь в этот день, да? но я напомню, что хочу видеть тебя здоровым (!!!) и счастливым, хотя понимаю, что наша с тобой депрессия – перманентна, но давай мы всё-таки выберемся из неё, хорошо? береги себя, радуй приятными вещами (ну типа знаешь там пАлЕтОчКаМи и интересными поездками!), думай прежде всего о себе и не смей вешать свой прекрасный носик, а то придётся кусать тебя за жопу!
<br>
я искренне хочу, чтобы ты был счастливым и ловил от жизни кайф, посылал все триггеры сам знаешь куда и окружал себя только теплом и заботой! ты самый чудесный мальчик, который заслуживает всего самого тёплого и мягонького на этом свете!
<br>
и пусть лвлапов в твоей жизни будет больше, а эта страница – не станет пределом!
<br>
люблю тебя до луны и обратно!
<center><img src="https://i.imgur.com/47hPjJC.gif"></center>

                   </main>
           </div>
           <a href="javascript:void(0)" class="backbtn" onclick="closeArchive()"><img src="https://i.imgur.com/2jkNWuW.png"> *</a>
    </section>
</div>

<style>

#lgallery {
   max-width: 500px;
   width: 100%;
   height: 500px;
   max-height: 500px;
   overflow: hidden;
   background-image: url(https://i.imgur.com/HC3MKUO.gif) ;
   margin: 1em auto;
   letter-spacing: 0;
   line-height: 1.3em;
   color: #000;
   border: 1px solid;
   max-width: 500px;
   width: 100%;
   height: 500px;
   max-height: 500px;
   overflow: hidden;
   position: relative;
}

header#bigTitle {
   font-family: 'Playfair Display', serif;
   font-size: 5.5em;
   transform: rotate(180deg);
   line-height: .7em;
   color: #000;
   letter-spacing: 0;
   text-transform: lowercase;
   text-shadow: -3px -3px 0 #fff;
   width: auto;
   min-width: 0;
   padding: 0;
   text-align: left;
   height: auto;
}

.subTitle {
   left: 5em;
   top: 17em;
   font-family: 'Josefin Sans', sans-serif;
   font-size: 12px;
   text-transform: uppercase;
   font-weight: 700;
   letter-spacing: 2px;
   line-height: 1em;
   text-align: right;
   position: absolute;
   width: auto;
   display: inline-block;
}


.overlay header#bigTitle {
   font-size: 6.5em;
}

.open, .overlay .closebtn, .overlay .backbtn, .archive {
   position: absolute;
   right: 2em;
   bottom: 1em;
   font-family: 'Josefin Sans', sans-serif;
   font-size: .75em;
   text-transform: uppercase;
   font-weight: 700;
   letter-spacing: 2px;
   line-height: 1em;
   text-align: left;
}

.archive {
   bottom: 3.5em;
}

.overlay .closebtn {
   color: #fff;
   text-decoration: none;
}

.overlay .backbtn {
   color: #000;
   text-decoration: none;
}

.overlay {
   height: 100%;
   width: 100%;
   position: absolute;
   z-index: 1;
   top: 100%;
   left: 0;
   background-image: url(https://i.imgur.com/4Rh34EF.gif);
   overflow-x: hidden;
   transition: 0.5s;
}

.overlay.active {
   top: 0;
}

.overlay-content {
 position: relative;
 width: 100%;
 height: 100%;
}

main#toc {
   width: 80%;
   margin: 2em auto;
}

main#toc .label {
   background: #fff;
   font-family: 'Josefin Sans', sans-serif;
   font-size: .3em;
   display: inline-block;
   padding: 3px;
   line-height: 1em;
   position: relative;
   margin-bottom: 2em;
}

#toc .label span.ltitle {
   font-weight: 700;
   text-transform: uppercase;
}

main#toc .label a {
   color: #000;
   text-decoration: none;
   position: relative;
   z-index: 10;
}

main#toc .label:after {
   content: " ";
   width: 0;
   display: block;
   position: absolute;
   top: 0px;
   left: 0px;
   background-color: #cddc39;
   height: 1em;
   padding: 3px;
   transition: width ease 0.5s;
}

main#toc .label.no-link:after {
   display: none;
}

main#toc .label:hover:after {
   width: 100%;
}

span.credit {
   position: absolute;
   bottom: 1em;
   left: 1em;
}

span.credit a {
   text-decoration: none;
   font-style: normal;
   color: #666;
   -webkit-transition: background .15s cubic-bezier(0.33, 0.66, 0.66, 1);
   -o-transition: background .15s cubic-bezier(0.33, 0.66, 0.66, 1);
   transition: background .15s cubic-bezier(0.33, 0.66, 0.66, 1);
   border-bottom: 3px solid #C6C11F;
   -webkit-box-shadow: inset 0 -4px 0 #C6C11F;
   box-shadow: inset 0 -4px 0 #C6C11F;
   font-family: 'Josefin Sans', sans-serif;
   font-size: .7em;
}

span.credit a:hover {
   background-color: #C6C11F;
   color: #000;
}

#lgallery section::-webkit-scrollbar, ::-webkit-scrollbar-thumb {
   border: 5px solid #ffffff;
}

#lgallery section::-webkit-scrollbar {
   width: 11px;
   height: 11px;
   background-color: #efefef;
}

#lgallery section::-webkit-scrollbar-thumb {
   background-color: #000;
}

</style>

<script>

       function openPage() {
         document.getElementById("openThreads").classList.add('active');
       }
       
       function closePage() {
         document.getElementById("openThreads").classList.remove('active');
       }

      
       function openArchive() {
         document.getElementById("archivedThreads").classList.add('active');
       }
       
       function closeArchive() {
         document.getElementById("archivedThreads").classList.remove('active');
       }
</script>
       }
</script>

<!--HTML-->
<style>@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i'); #bree-msgs1  { width:188px; margin:30px 0px; }
#bree-msgs1  { width:188px; margin:30px 0px; }
#bree-msgs1 table { border-spacing:0px!important; border-collapse:separate!important; }
#bree-msgs1 td { padding:0px!important; margin:0px!important; }
#bree-msgs1 .msgs { width:140px; padding:0px 5px 0px 0px; vertical-align:bottom; border-bottom:1px solid #fff;  }
#bree-msgs1 .msgs .msg { width:120px; padding:2px px; background:#fff; text-align:left; line-height:12px; font-size:9px; letter-spacing:.5px; border-radius:5px; font-family:montserrat; font-weight:300; color:#333; margin-bottom:2px; }
#bree-msgs1 .msgs div:nth-last-child(1) { border-radius:5px 5px 0px 0px; }
#bree-msgs1 .icon { vertical-align:bottom; padding:0px 0px 2px 0px; }
#bree-msgs1 .icon .gif { width:50px; height:50px; border-radius:100%; border:1px solid #fff; padding:3px;  position:relative; top:18px; left:-5px; overflow:hidden; text-align:center;}
#bree-msgs1 .icon .gif img { width:40px; height:40px; border-radius:200%; transition:.5s; -webkit-filter: brightness(100%); transition:.5s;  }
#bree-msgs1 .btriangle { vertical-align:bottom; position:relative; left:0px; top:0px; border-bottom:1px solid #fff; padding:0px!important; margin:0px 0px 2px 0px!important; }
#bree-msgs1 .btriangle .btri { width: 0px; height: 0px; border-style: solid; border-width: 0px 0 8px 8px; border-color: transparent transparent #fff transparent; margin-bottom:2px;}
#bree-msgs1 .icon .gif .bree-credit { width:12px; height:12px; font-size:12px; line-height:12px; padding:9px; color:#fff; opacity:0;  position:relative; z-index:99; top:-30px; text-align:center; transition:.5s; }
#bree-msgs1 .icon .gif:hover .bree-credit { opacity:1 }
#bree-msgs1 .icon .gif a { color:#e2c1ec }
</style>

<center><div id="bree-msgs1"><table><td class="icon"><div class="gif"><img src="https://i.imgur.com/gsWrYBz.png"></div></div></td><td class="btriangle"><div class="btri"></div></td><td class="msgs"><div class="msg">может уже, наконец, встретимся? мне интересно, какой ты.</div></td></table></div></center>

<style>@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i'); #bree-msgs1  { width:188px; margin:30px 0px; }
#bree-msgs1  { width:188px; margin:30px 0px; }
#bree-msgs1 table { border-spacing:0px!important; border-collapse:separate!important; }
#bree-msgs1 td { padding:0px!important; margin:0px!important; }
#bree-msgs1 .msgs { width:140px; padding:0px 5px 0px 0px; vertical-align:bottom; border-bottom:1px solid #fff;  }
#bree-msgs1 .msgs .msg { width:120px; padding:2px px; background:#fff; text-align:right; line-height:12px; font-size:9px; letter-spacing:.5px; border-radius:5px; font-family:montserrat; font-weight:300; color:#333; margin-bottom:2px; }
#bree-msgs1 .msgs div:nth-last-child(1) { border-radius:5px 5px 0px 0px; }
#bree-msgs1 .icon { vertical-align:bottom; padding:0px 0px 2px 0px; }
#bree-msgs1 .icon .gif { width:50px; height:50px; border-radius:100%; border:1px solid #fff; padding:3px;  position:relative; top:18px; left:-5px; overflow:hidden; text-align:center;}
#bree-msgs1 .icon .gif img { width:40px; height:40px; border-radius:200%; transition:.5s; -webkit-filter: brightness(100%); transition:.5s;  }
#bree-msgs1 .btriangle { vertical-align:bottom; position:relative; left:0px; top:0px; border-bottom:1px solid #fff; padding:0px!important; margin:0px 0px 2px 0px!important; }
#bree-msgs1 .btriangle .btri { width: 0px; height: 0px; border-style: solid; border-width: 0px 0 8px 8px; border-color: transparent transparent #fff transparent; margin-bottom:2px;}
#bree-msgs1 .icon .gif .bree-credit { width:12px; height:12px; font-size:12px; line-height:12px; padding:9px; color:#fff; opacity:0;  position:relative; z-index:99; top:-30px; text-align:center; transition:.5s; }
#bree-msgs1 .icon .gif:hover .bree-credit { opacity:1 }
#bree-msgs1 .icon .gif a { color:#e2c1ec }
</style>

<center><div id="bree-msgs1"><table><td class="icon"><div class="gif"><img src="https://i.imgur.com/6qXS1U4.png"></div></div></td><td class="btriangle"><div class="btri"></div></td><td class="msgs"><div class="msg">думаешь, это хорошая идея?</div></td></table></div></center>

<style>@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i'); #bree-msgs1  { width:188px; margin:30px 0px; }
#bree-msgs1  { width:188px; margin:30px 0px; }
#bree-msgs1 table { border-spacing:0px!important; border-collapse:separate!important; }
#bree-msgs1 td { padding:0px!important; margin:0px!important; }
#bree-msgs1 .msgs { width:140px; padding:0px 5px 0px 0px; vertical-align:bottom; border-bottom:1px solid #fff;  }
#bree-msgs1 .msgs .msg { width:120px; padding:2px px; background:#fff; text-align:left; line-height:12px; font-size:9px; letter-spacing:.5px; border-radius:5px; font-family:montserrat; font-weight:300; color:#333; margin-bottom:2px; }
#bree-msgs1 .msgs div:nth-last-child(1) { border-radius:5px 5px 0px 0px; }
#bree-msgs1 .icon { vertical-align:bottom; padding:0px 0px 2px 0px; }
#bree-msgs1 .icon .gif { width:50px; height:50px; border-radius:100%; border:1px solid #fff; padding:3px;  position:relative; top:18px; left:-5px; overflow:hidden; text-align:center;}
#bree-msgs1 .icon .gif img { width:40px; height:40px; border-radius:200%; transition:.5s; -webkit-filter: brightness(100%); transition:.5s;  }
#bree-msgs1 .btriangle { vertical-align:bottom; position:relative; left:0px; top:0px; border-bottom:1px solid #fff; padding:0px!important; margin:0px 0px 2px 0px!important; }
#bree-msgs1 .btriangle .btri { width: 0px; height: 0px; border-style: solid; border-width: 0px 0 8px 8px; border-color: transparent transparent #fff transparent; margin-bottom:2px;}
#bree-msgs1 .icon .gif .bree-credit { width:12px; height:12px; font-size:12px; line-height:12px; padding:9px; color:#fff; opacity:0;  position:relative; z-index:99; top:-30px; text-align:center; transition:.5s; }
#bree-msgs1 .icon .gif:hover .bree-credit { opacity:1 }
#bree-msgs1 .icon .gif a { color:#e2c1ec }
</style>

<center><div id="bree-msgs1"><table><td class="icon"><div class="gif"><img src="https://i.imgur.com/gsWrYBz.png"></div></div></td><td class="btriangle"><div class="btri"></div></td><td class="msgs"><div class="msg">приму это в качестве согласия  <img src="http://i.imgur.com/JvSkOTh.png"></div></td></table></div></center>