<div class="main-grid">
  <nav class="main-nav">
    <a class="logo js-home" href="javascript: void(0)"><span class="icon">🦉</span></a>
    <ul class="main-nav-list">
      <li class="main-nav-item"><a class="menu-item is-selected js-home" href="javascript: void(0)"><span class="icon">🏠</span><span class="text">Home</span></a></li>
      <li class="main-nav-item is-only-break1"><button class="menu-item"><span class="icon">🔎</span><span class="text">Search</span></button></li>
      <li class="main-nav-item is-hide-break1"><a class="menu-item"><span class="icon icon-explore">#</span><span class="text">Explore</span></a></li>
      <li class="main-nav-item"><a class="menu-item"><span class="icon">🔔</span><span class="text">Notifications</span></a></li>
      <li class="main-nav-item"><a class="menu-item"><span class="icon">✉️</span><span class="text">Messages</span></a></li>
      <li class="main-nav-item is-hide-break1"><a class="menu-item"><span class="icon">🔖</span><span class="text">Bookmarks</span></a></li>
      <li class="main-nav-item is-hide-break1"><a class="menu-item"><span class="icon">📄</span><span class="text">Lists</span></a></li>
      <li class="main-nav-item is-hide-break1">
        <a class="menu-item u-animation-click js-profile" href="javascript: void(0)">
          <span class="icon"><img class="profile-image" src="https://bit.ly/3b6qNEw" alt="Elad Shechter"></span>
          <span class="text">Profile</span>
        </a>
      </li>
      <li class="main-nav-item is-hide-break1"><a class="menu-item"><span class="icon icon-more"></span><span class="text">More</span></a></li>
      <li class="main-nav-item tweet-button"><button class="common-button is-full-width is-height-big js-tweet"><span class="icon icon-tweet">✒️</span><span class="text">Tweet</span></button></li>
    </ul>
  </nav>
  <main class="main-content">
    <header class="main-header">
      <button class="icon-button icon-back js-home u-hide"><span class="icon">←</span></button>
      <div class="main-header-content">
        <h1 class="section-title js-title">Home</h1>
      </div>
      <button class="icon-button u-margin-start-auto" aria-label="Top Tweets on"><span class="icon">✨</span></button>
    </header>
    <section class="profile-box u-hide">
      <img src="https://pbs.twimg.com/profile_banners/221782882/1585581667/1500x500" alt="">
      <div class="profile-box-content u-common-padding">
        <img class="profile-image" src="https://pbs.twimg.com/profile_images/595840995675217920/8uRl8-5A_200x200.jpg" alt="Elad Shechter">
        <h2 class="section-title">Elad Shechter</h2>
        <div class="usercode u-margin-bottom">@eladsc</div>
        <p class="u-margin-bottom">CSS/HTML Expert, Speaker, Writer</p>
        <ul class="profile-box-info u-margin-bottom">
          <li><a class="common-link" href="https://eladsc.com/" target="_blank"><span class="icon">🔗</span><span class="text">eladsc.com</span></a></li>
          <li><span class="icon">📅</span><span class="text">Joined December 2010</span></li>
        </ul>
        <ul class="profile-box-info is-list-counters">
          <li><span class="common-title">218</span> <span class="text">Following</span></li>
          <li><span class="common-title">1,481</span> <span class="text">Followers</span></li>
        </ul>
      </div>
      <nav class="common-nav">
        <ul class="common-nav-list">
          <li class="common-nav-item"><a class="is-selected">Tweets</a></li>
          <li class="common-nav-item"><a>Tweets & replies</a></li>
          <li class="common-nav-item"><a>Media</a></li>
          <li class="common-nav-item"><a>Likes</a></li>
        </ul>
      </nav>
    </section>
    <section class="message-box">
      <div class="profile-image-wrap">
        <img class="profile-image" src="https://bit.ly/3b6qNEw" alt="Elad Shechter">
      </div>
      <div class="message-box-content" contenteditable="true" placeholder="What's happening?"></div>
      <nav class="message-box-nav u-flex">
        <ul class="u-flex">
          <li><button class="icon-button"><span class="icon">🌇</span></button></li>
          <li><button class="icon-button"><span class="icon icon-gif"></span></button></li>
          <li><button class="icon-button"><span class="icon icon-poll">📊</span></button></li>
          <li><button class="icon-button"><span class="icon">🙂</span></button></li>
        </ul>
        <button class="common-button u-margin-start-auto"><span class="text">Tweet</span></button>
      </nav>
    </section>
    <section class="feed">
      <ul class="feed-list">
        <li class="feed-item">
          <article class="tweet-item">
            <img class="profile-image" src="https://s.cdpn.io/profiles/user/65740/80.jpg?1576332014" alt="codetalks.tv">
            <header class="tweet-item-info u-flex">
              <a class="tweet-item-info-user" href="https://twitter.com/eladsc" target="_blank">
                <span class="common-title">Elad Shechter</span>
                <span class="usercode">@eladsc</span>
              </a>
              <time datetime="">Jun 10</time>
              <button class="icon-button u-flex u-margin-start-auto" style="--icon-button-size:27px;"><span class="icon icon-arrow-down u-margin-auto"></span></button>
            </header>
            <div class="common-content">
              <p>
                Do you want to know how I made CSS reverse engineering of the Twitter website?! 😃 I just wrote a full article on it.

              </p>
                            <a class="embed-content" href="https://medium.com/@elad/reverse-engineering-twitters-css-289c91040008" target="_blank">
                <img class="embed-content-image" src="https://miro.medium.com/max/1104/1*bWhVp9YmZbYyGshS2hpNPw.jpeg" alt="">
                <div class="embed-content-text">
                  <h2 class="embed-content-title">Reverse Engineering Twitter’s CSS</h2>
                  <p class="embed-content-paragraph">As someone who loves CSS and appreciates its importance in this day and age, it is very unclear to me how the web industry’s most…</p>
                  <footer class="embed-content-info"><span class="icon">🔗</span><span class="text">medium.com</span></footer>
                </div>
              </a>
            </div>
            <ul class="message-options u-flex u-space-between">
              <li class="message-options-item">
                <label>
                  <button class="icon-button"><span class="icon">💬</span></button>
                  <span class="text"></span>
                </label>
              </li>
              <li class="message-options-item">
                <label>
                  <button class="icon-button"><span class="icon">🔃</span></button>
                  <span class="text">0</span>
                </label>
              </li>
              <li class="message-options-item">
                <label>
                  <button class="icon-button"><span class="icon">❤</span></button>
                  <span class="text">2</span>
                </label>
              </li>
              <li class="message-options-item">
                <label>
                  <button class="icon-button"><span class="icon">📤</span></button>
                  <span class="text"></span>
                </label>
              </li>
            </ul>
          </article>
        </li>
        <li class="feed-item">
          <article class="tweet-item">
            <img class="profile-image" src="https://pbs.twimg.com/profile_images/1105621862556545024/k5HJkj-p_reasonably_small.png" alt="codetalks.tv">
            <header class="tweet-item-info u-flex">
              <a class="tweet-item-info-user" href="https://twitter.com/codetalkstv" target="_blank">
                <span class="common-title">codetalks.tv</span>
                <span class="usercode">@codetalkstv</span>
              </a>
              <time datetime="">Jun 4</time>
              <button class="icon-button u-flex u-margin-start-auto" style="--icon-button-size:27px;"><span class="icon icon-arrow-down u-margin-auto"></span></button>
            </header>
            <div class="common-content">
              <p>The New <a href="https://twitter.com/hashtag/CSS" target="_blank">#CSS</a> Logical Properties (English) - by Elad Shechter</p>
              <a class="embed-content" href="https://codetalks.tv/talk/the-new-css-logical-properties-english-by-elad-shechter-emdg4aj8o6u" target="_blank">
                <img class="embed-content-image" src="https://pbs.twimg.com/card_img/1268078644146118656/pk5ViuZO?format=png&name=small" alt="">
                <div class="embed-content-text">
                  <h2 class="embed-content-title">Understanding the “Initial”, “Inherit” and “Unset” CSS Keywords</h2>
                  <p class="embed-content-paragraph">CSS has default keywords for various values. In this article I’m going to talk about three of them: initial, inherit, and the relatively…</p>
                  <footer class="embed-content-info"><span class="icon">🔗</span><span class="text">medium.com</span></footer>
                </div>
              </a>
            </div>
            <ul class="message-options u-flex u-space-between">
              <li class="message-options-item">
                <label>
                  <button class="icon-button"><span class="icon">💬</span></button>
                  <span class="text"></span>
                </label>
              </li>
              <li class="message-options-item">
                <label>
                  <button class="icon-button"><span class="icon">🔃</span></button>
                  <span class="text">1</span>
                </label>
              </li>
              <li class="message-options-item">
                <label>
                  <button class="icon-button"><span class="icon">❤</span></button>
                  <span class="text">2</span>
                </label>
              </li>
              <li class="message-options-item">
                <label>
                  <button class="icon-button"><span class="icon">📤</span></button>
                  <span class="text"></span>
                </label>
              </li>
            </ul>
          </article>
        </li>
        <li class="feed-item">
          <article class="tweet-item">
            <img class="profile-image" src="https://s.cdpn.io/profiles/user/65740/80.jpg?1576332014" alt="codetalks.tv">
            <header class="tweet-item-info u-flex">
              <a class="tweet-item-info-user" href="https://twitter.com/eladsc" target="_blank">
                <span class="common-title">Elad Shechter</span>
                <span class="usercode">@eladsc</span>
              </a>
              <time datetime="">Apr 5</time>
              <button class="icon-button u-flex u-margin-start-auto" style="--icon-button-size:27px;"><span class="icon icon-arrow-down u-margin-auto"></span></button>
            </header>
            <div class="common-content">
              <p>
                The Coronavirus Invaders!<br>
                I just created Pure CSS Game! (No JS).<br>
                Try, how many Coronavirus are you able to eliminate?😃<br><br>

                Full page game:<br>
                <a href="https://codepen.io/elad2412/full/wvabjXy" target="_blank">https://codepen.io/elad2412/full/wvabjXy</a><br><br>

                Editor view:<br>
                <a href="https://codepen.io/elad2412/pen/wvabjXy" target="_blank">https://codepen.io/elad2412/pen/wvabjXy</a><br>
              </p>
              <img class="content-image" src="https://i0.wp.com/eladsc.com/wp-content/uploads/2020/04/corona1-1.gif?fit=660%2C371&ssl=1" alt="">
            </div>
            <ul class="message-options u-flex u-space-between">
              <li class="message-options-item">
                <label>
                  <button class="icon-button"><span class="icon">💬</span></button>
                  <span class="text"></span>
                </label>
              </li>
              <li class="message-options-item">
                <label>
                  <button class="icon-button"><span class="icon">🔃</span></button>
                  <span class="text">13</span>
                </label>
              </li>
              <li class="message-options-item">
                <label>
                  <button class="icon-button"><span class="icon">❤</span></button>
                  <span class="text">36</span>
                </label>
              </li>
              <li class="message-options-item">
                <label>
                  <button class="icon-button"><span class="icon">📤</span></button>
                  <span class="text"></span>
                </label>
              </li>
            </ul>
          </article>
        </li>
        <li class="feed-item">
          <article class="tweet-item">
            <img class="profile-image" src="https://s.cdpn.io/profiles/user/65740/80.jpg?1576332014" alt="Elad Shechter">
            <header class="tweet-item-info u-flex">
              <a class="tweet-item-info-user" href="https://twitter.com/eladsc" target="_blank">
                <span class="common-title">Elad Shechter</span>
                <span class="usercode">@eladsc</span>
              </a>
              <time datetime="">Mar 1</time>
              <button class="icon-button u-flex u-margin-start-auto" style="--icon-button-size:27px;"><span class="icon icon-arrow-down u-margin-auto"></span></button>
            </header>
            <div class="common-content">
              <p>
                "Why the World Needs CSS Developers"<br><br>

In the last 10 years, the web standards have been grown rapidly. But the FED job titles stayed the same.<br>
In my new article, I will explain, from my perspective, why it's time to change and adapt new job titles!<br>
              </p>
              <a class="embed-content" href="https://medium.com/@elad/why-the-world-needs-css-developers-318025a6f5c1" target="_blank">
                <img class="embed-content-image" src="https://miro.medium.com/max/552/1*65c_DA3NOmVk-NvkKLnSDA.png" alt="">
                <div class="embed-content-text">
                  <h2 class="embed-content-title">Why the World Needs CSS Developers</h2>
                  <p class="embed-content-paragraph">In the last ten years, give or take a few, CSS has grown extensively with the addition of more and more features, thus gradually becoming…</p>
                  <footer class="embed-content-info"><span class="icon">🔗</span><span class="text">medium.com</span></footer>
                </div>
              </a>
            </div>
            <ul class="message-options u-flex u-space-between">
              <li class="message-options-item">
                <label>
                  <button class="icon-button"><span class="icon">💬</span></button>
                  <span class="text"></span>
                </label>
              </li>
              <li class="message-options-item">
                <label>
                  <button class="icon-button"><span class="icon">🔃</span></button>
                  <span class="text">1</span>
                </label>
              </li>
              <li class="message-options-item">
                <label>
                  <button class="icon-button"><span class="icon">❤</span></button>
                  <span class="text">3</span>
                </label>
              </li>
              <li class="message-options-item">
                <label>
                  <button class="icon-button"><span class="icon">📤</span></button>
                  <span class="text"></span>
                </label>
              </li>
            </ul>
          </article>
        </li>
        <li class="feed-item">
          <article class="tweet-item">
            <img class="profile-image" src="http://bit.ly/2SGZ46r" alt="CSS Weekly">
            <header class="tweet-item-info u-flex">
              <a class="tweet-item-info-user" href="https://twitter.com/CSSWeekly" target="_blank">
                <span class="common-title">CSS Weekly</span>
                <span class="usercode">@CSSWeekly</span>
              </a>
              <time datetime="">Jan 31</time>
              <button class="icon-button u-flex u-margin-start-auto" style="--icon-button-size:27px;"><span class="icon icon-arrow-down u-margin-auto"></span></button>
            </header>
            <div class="common-content">
              <p>Elad Shechter (<a href="https://twitter.com/eladsc" target="_blank">@eladsc</a>) explains how initial, inherit and unset keywords work.</p>
              <a class="embed-content" href="https://buff.ly/2uizb2S" target="_blank">
                <img class="embed-content-image" src="https://miro.medium.com/max/880/1*dn3FzkpQs3gaRAApsTcI6A.png" alt="">
                <div class="embed-content-text">
                  <h2 class="embed-content-title">Understanding the “Initial”, “Inherit” and “Unset” CSS Keywords</h2>
                  <p class="embed-content-paragraph">CSS has default keywords for various values. In this article I’m going to talk about three of them: initial, inherit, and the relatively…</p>
                  <footer class="embed-content-info"><span class="icon">🔗</span><span class="text">medium.com</span></footer>
                </div>
              </a>
            </div>
            <ul class="message-options u-flex u-space-between">
              <li class="message-options-item">
                <label>
                  <button class="icon-button"><span class="icon">💬</span></button>
                  <span class="text"></span>
                </label>
              </li>
              <li class="message-options-item">
                <label>
                  <button class="icon-button"><span class="icon">🔃</span></button>
                  <span class="text">1</span>
                </label>
              </li>
              <li class="message-options-item">
                <label>
                  <button class="icon-button"><span class="icon">❤</span></button>
                  <span class="text">3</span>
                </label>
              </li>
              <li class="message-options-item">
                <label>
                  <button class="icon-button"><span class="icon">📤</span></button>
                  <span class="text"></span>
                </label>
              </li>
            </ul>
          </article>
        </li>
        <li class="feed-item">
          <article class="tweet-item">
            <img class="profile-image" src="https://pbs.twimg.com/profile_images/3304895288/5c6b1f60dd5f179f7b2da2cea0ad787a_bigger.png" alt="CSS Weekly">
            <header class="tweet-item-info u-flex">
              <a class="tweet-item-info-user" href="https://twitter.com/SidebarIO" target="_blank">
                <span class="common-title">Sidebar</span>
                <span class="usercode">@SidebarIO</span>
              </a>
              <time datetime="">Jan 31</time>
              <button class="icon-button u-flex u-margin-start-auto" style="--icon-button-size:27px;"><span class="icon icon-arrow-down u-margin-auto"></span></button>
            </header>
            <div class="common-content">
              <p>Why CSS HSL Colors are Better!</p>
              <a class="embed-content" href="https://t.co/j4wJpK6OYo" target="_blank">
                <img class="embed-content-image" src="https://miro.medium.com/max/792/1*mMdxAEl-r0qa44MgzsAX6w.png" alt="">
                <div class="embed-content-text">
                  <h2 class="embed-content-title">Why CSS HSL Colors are Better!</h2>
                  <p class="embed-content-paragraph">With the Power of CSS Variables</p>
                  <footer class="embed-content-info"><span class="icon">🔗</span><span class="text">medium.com</span></footer>
                </div>
              </a>
            </div>
            <ul class="message-options u-flex u-space-between">
              <li class="message-options-item">
                <label>
                  <button class="icon-button"><span class="icon">💬</span></button>
                  <span class="text"></span>
                </label>
              </li>
              <li class="message-options-item">
                <label>
                  <button class="icon-button"><span class="icon">🔃</span></button>
                  <span class="text">1</span>
                </label>
              </li>
              <li class="message-options-item">
                <label>
                  <button class="icon-button"><span class="icon">❤</span></button>
                  <span class="text">16</span>
                </label>
              </li>
              <li class="message-options-item">
                <label>
                  <button class="icon-button"><span class="icon">📤</span></button>
                  <span class="text"></span>
                </label>
              </li>
            </ul>
          </article>
        </li>
      </ul>
    </section>
  </main>
  <aside class="main-side">
    <div class="main-side-searchbox">
       <label class="search-box">
      <span class="icon">🔎</span>
      <input type="search" placeholder="Search tweets">
    </label>
    </div>
    <section class="common-box">
        <header class="common-box-header u-flex">
          <h2 class="section-title">Trends for you</h2>  
          <button class="icon-button u-margin-start-auto"><span class="icon icon-settings">⚙️</span></button>
        </header>
        <ul class="common-list">
          <li class="common-list-item">
            <a class="u-block u-common-padding">
              <div class="trend-category">Web Technology</div>
              <h3 class="common-title">CSS</h3>
              <p>105K Tweets</p>
            </a>
            <button class="icon-button u-flex u-margin-start-auto"><span class="icon icon-arrow-down u-margin-auto"></span></button>
          </li>
          <li class="common-list-item">
             <a class="u-block u-common-padding">
              <div class="trend-category">Web Technology</div>
              <h3 class="common-title">SVG</h3>
              <p>21K Tweets</p>
            </a>
            <button class="icon-button u-flex u-margin-start-auto"><span class="icon icon-arrow-down u-margin-auto"></span></button>
          </li>
          <li class="common-list-item">
            <a class="u-block u-common-padding">
              <div class="trend-category">Web Technology</div>
              <h3 class="common-title">Responsive Design</h3>
              <p>251K Tweets</p>
            </a>
            <button class="icon-button u-flex u-margin-start-auto"><span class="icon icon-arrow-down u-margin-auto"></span></button>
          </li>
        </ul>
        <a class="common-more" href="/">Show more</a>
      </section>
    <section class="common-box">
      <header class="common-box-header u-flex">
        <h2 class="section-title">Who to follow</h2>  
      </header>
      <ul class="common-list">
        <li class="common-list-item u-flex">
          <a class="user-item u-common-padding" href="https://twitter.com/css" target="_blank">
            <img class="profile-image" src="https://pbs.twimg.com/profile_images/1080202898372362240/akqRGyta_200x200.jpg" alt="CSS Tricks">
            <h3 class="common-title">CSS-Tricks</h3>
            <span class="usercode">@css</span>
            <div class="common-button is-invert" tabindex="0" role="button"><span class="text">Follow</span></div>
          </a>
        </li>
        <li class="common-list-item u-flex">
          <a class="user-item u-common-padding" href="https://twitter.com/smashingmag" target="_blank">
            <img class="profile-image" src="https://pbs.twimg.com/profile_images/1242374315703664641/qIJwxb3i_400x400.jpg" alt="Smashing Magazine">
            <h3 class="common-title">Smashing Magazine</h3>
            <span class="usercode">@smashingmag</span>
            <div class="common-button is-invert" tabindex="0" role="button"><span class="text">Follow</span></div>
          </a>
        </li>
        <li class="common-list-item u-flex">
          <a class="user-item u-common-padding" href="https://twitter.com/SidebarIO" target="_blank">
            <img class="profile-image" src="https://pbs.twimg.com/profile_images/3304895288/5c6b1f60dd5f179f7b2da2cea0ad787a_bigger.png" alt="CSSbar">
            <h3 class="common-title">Sidebar</h3>
            <span class="usercode">@SidebarIO</span>
            <div class="common-button is-invert" tabindex="0" role="button"><span class="text">Follow</span></div>
          </a>
        </li>
        <li class="common-list-item u-flex">
          <a class="user-item u-common-padding" href="https://twitter.com/CSSWeekly" target="_blank">
            <img class="profile-image" src="https://bit.ly/2SGZ46r" alt="CSS Weekly">
            <h3 class="common-title">CSS Weekly</h3>
            <span class="usercode">@CSSWeekly</span>
            <div class="common-button is-invert" tabindex="0" role="button"><span class="text">Follow</span></div>
          </a>
        </li>
      </ul>
      <a class="common-more" href="/">Show more</a>
    </section>
  </aside>
</div>

/****** More of My Resets *******/
*,
*::before,
*::after{box-sizing:border-box;}
:focus{outline:none;}
button{background-color:transparent; color:inherit; border-width:0; padding:0; margin:0; cursor:pointer;}
img{display:block; max-width:100%;}
a{text-decoration:none; cursor:pointer;}

/* Responsive Variables */
$break1:    "(max-width:499px)";
$break2:    "(min-width:500px) and (max-width:1004px)";
$break2open:"(min-width:500px)";
$break3:    "(min-width:1005px) and (max-width:1094px)";
$break3open:"(min-width:1005px)";
$break4:    "(min-width:1095px) and (max-width:1281px)";
$break4open:"(min-width:1095px)";
$break5open:"(min-width:1282px)";

.is-hide-break1{
  @media #{$break1}{display:none!important;}
}
.is-only-break1{
  @media #{$break2open}{display:none!important;}
}

/* Multi direcrtion Languages Support Variables*/
$start-direction: left !default;
$end-direction:   right !default;

/* typography */
html{font-size:1px;/*for using REM units*/}
body{
  font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
  font-size:16rem; line-height:1.3;
}

/* utilities classes */
.u-hide{display:none!important;}
.u-block{display:block!important;}
.u-flex{display:flex!important;}
.u-space-between{justify-content:space-between!important;}
.u-common-padding{padding:10px 15px!important;}
.u-margin-auto{margin:auto!important;}
.u-margin-start-auto{margin-#{$start-direction}:auto!important;}
.u-margin-bottom{margin-bottom:10px!important;}

/* colors */
:root{
  --white:#fff;
  --black:#000;
  --grayA:#657786;
  --gray-light:#f8f5fa;
  --border-color:#e6ecf0;
  
  /* common blue */
  --base-color:203; /* base hue of blue*/
  --main-color:hsla(var(--base-color), 89%, 53%, 1);
  --hover-color:hsla(var(--base-color), 89%, 47%, 1);
  --bg-hover-color:hsla(var(--base-color), 89%, 53%, 0.1);
}

/*mixin*/
@mixin trim{text-overflow:ellipsis; white-space:nowrap; overflow:hidden; display:block;}
@mixin scroll{overflow-y:auto; scrollbar-width:thin; /*-webkit-overflow-scrolling:touch;*/}

/*scrolls*/
 ::-webkit-scrollbar {width:6px!important; height:6px!important; background-color:#f5f5f5;}
 ::-webkit-scrollbar-thumb {background-color:rgba(0,0,0,.2);}
 ::-webkit-scrollbar-track {background-color:rgba(255, 255, 255, 0.08);}   

/* animation */
@keyframes clickableAnimation {
  0% {transform:scale(1);}
  95% {transform:scale(1);}
  96% {transform:scale(1.25);}
  97% {transform:scale(1.25);}
  100% {transform:scale(1);}
}
.u-animation-click{animation: clickableAnimation 20s ease-in-out -17s infinite;}

/* icons */
.icon{filter:grayscale(1) opacity(0.8);}
.icon-explore{font-size:28px; color:var(--main-color);}
.icon-more{
  display:flex; width:24px; height:24px; border:solid 1px var(--black); border-radius:50%;
  &::before{content:""; width:4px; height:4px; margin:auto; background-color:var(--black); border-radius:inherit; box-shadow:6px 0px var(--black), -6px 0px var(--black);}
}
.icon-gif{
  display:inline-flex; vertical-align:bottom; width:20px; height:20px; border:solid 1px var(--black); text-transform:uppercase; font-size:8px; font-weight:800;
  &::before{content:"gif"; margin:auto; }
}
.icon-poll{display:inline-flex; transform:rotateZ(90deg);}
.icon-arrow-down{
  position:relative; #{$start-direction}:-2px;
  &::before,
  &::after{content:""; position:absolute; display:block; height:2px; width:8px; background:var(--grayA);}
  &::before{transform:translateX(-4px) rotateZ(45deg);}
  &::after{transform:rotateZ(-45deg);}
}
.icon-tweet{filter:grayscale(1) opacity(0.8) brightness(1.5);}


/* Grid Layout */
.main-grid{
  display:grid; justify-content:center; min-height:100vh; margin:0 auto;
  @media #{$break1}, #{$break2}{ .main-side{display:none;} }
  @media #{$break2}{    grid-template-columns:auto minmax(auto, 600px); max-width:705px;}
  @media #{$break3open}{grid-template-columns:auto 600px minmax(290px, 380px); padding:0 10px; box-sizing:content-box;}
  @media #{$break4open}{max-width:1235px;}
}

/*elemenets*/
.profile-image{border-radius:50%;}
.common-link{
  color:var(--main-color);
  &:hover, &:focus{text-decoration:underline;}
}
.common-button{
  --button-height:40px;
  --button-padding:15px;
  background-color:var(--main-color); height:var(--button-height); padding:0 var(--button-padding); border-radius:calc( var(--button-height) / 2 ) / 50%;
  color:var(--white); font-size:15rem; font-weight:bold;
  &.is-full-width{width:100%;}
  &.is-height-big{--button-height:50px;}
  &.is-invert{
    background-color:transparent; border:solid 1px var(--main-color); color:var(--main-color);
    &:hover, &:focus{background-color:var(--bg-hover-color);}
  }
  &:hover, &:focus{background-color:var(--hover-color);}
}
.icon-button{
  --icon-button-size:40px;
  height:var(--icon-button-size); width:var(--icon-button-size); border-radius:50%;
  &:hover,
  &:focus{background-color:var(--bg-hover-color);}
}
.tweet-button{
  @media #{$break1}{
     position:fixed; #{$start-direction}:auto; #{$end-direction}:15px; bottom:75px;
    .common-button{
      width:auto; box-shadow:rgba(101, 119, 134, 0.2) 0px 0px 8px, rgba(101, 119, 134, 0.25) 0px 1px 3px 1px;
      .text{display:none;}
    }
  }
  @media #{$break2}, #{$break3}, #{$break4}{
    .common-button{
        padding:0;
        .text{display:none;}
      }
  }
  @media #{$break5open}{
    .common-button .icon{display:none;}
  }
}
.section-title{font-size:19rem; font-weight:800;}
.common-title{font-size:15rem; font-weight:700; color:var(--black);}
.trend-category{font-size:13rem; color:var(--grayA); margin-bottom:5px;}
.usercode{color:var(--grayA); font-size:15rem;}
.logo{
  display:block; width:50px; height:50px; border-radius:50%; margin:2px 0;
  font-size:24px; line-height:50px; text-decoration:none; text-align:center;
  .icon{
    display:block;
    filter:hue-rotate(175deg) opacity(0.8); transform:scale(-1, 1); 
  }
  &:hover, &:focus{background-color:var(--bg-hover-color);}
}
.menu-item{
  display:flex; align-items:center; width:fit-content; padding:10px; border-radius:20px / 50%;
  font-weight:bold; font-size:19rem;
  .icon{
    width:26px; height:26px;
    line-height:26px; text-align:center; filter:grayscale(1) opacity(0.8); transition:0.2s;
    &-explore{filter:grayscale(1) opacity(1) brightness(0.5);}
  }
  .text{color:var(--black); padding-#{$end-direction}:15px; margin-#{$start-direction}:20px; }
  &:hover, &:focus{background-color:var(--bg-hover-color);}
  &:hover, 
  &:focus,
  &.is-selected{
    .text{color:var(--main-color);}
    .icon{filter:grayscale(0.3) opacity(1);}
  }
   @media #{$break1}, #{$break2}, #{$break3}, #{$break4}{     
     .text{display:none;}
     .common-button{
       .text{display:none;}
     }
  }
}
.search-box{
  --search-height:42px;
  position:relative; display:flex; transition:0.2s;
  border:solid 1px transparent; border-radius:calc(var(--search-height) / 2) / 50%; background-color:var(--border-color);     
  &:focus-within{
    background-color:transparent; border-color:var(--main-color);
    .icon{filter:grayscale(0) opacity(1);}
  }
  .icon{margin:auto 10px; transform:scale(-1, 1);}
  input{
    -webkit-appearance:none; appearance:none;
    background-color:transparent; border:none; /* reset input */
    padding:5px 10px; width:100%; height:var(--search-height);    
    &::-webkit-input-placeholder {font-size:15rem; overflow:visible; line-height:1;}
    &::-moz-placeholder{font-size:15rem; overflow:visible; line-height:1;}
    &:placeholder {font-size:15rem; overflow:visible; line-height:1;}
  }  
}
.common-more{display:block; padding:10px 15px; color:var(--main-color); border-radius:0 0 10px 10px;}

/*components */
.main-nav{
  @include scroll();
  position:sticky; top:0; max-height:100vh; overflow:auto;
  &-item{padding:7px 0;}
  @media #{$break1}{
    position:fixed; z-index:4; #{$start-direction}:0; #{$end-direction}:0; bottom:0; top:auto;
    background-color:var(--white); border-top:solid 1px var(--border-color);
    .logo{display:none;}
    &-list{display:flex; justify-content:space-between; padding:0 15px;}
  }
  @media #{$break2}, #{$break3}, #{$break4}{
      width:68px; padding:0 10px; 
  }
  @media #{$break5open}{
    min-width:88px; width:255px; padding-#{$end-direction}:44px;  
  }
}
.main-content{border:solid 0 var(--border-color); border-width:0 1px;}
.main-side{
  margin-#{$start-direction}:30px;
  &-searchbox{position:sticky; z-index:2; top:0; padding-top:10px; padding-bottom:10px; background-color:var(--white);}
}

.main-header{
  position:-webkit-sticky;/* Safari */ position:sticky; z-index:2; top:0; background-color:var(--white);
  display:flex; height:50px; padding:0 15px; border-bottom:solid 1px var(--border-color);
  &-content{display:flex; height:100%; flex-direction:column; justify-content:center;}
  .icon-button{margin-top:auto; margin-bottom:auto;}
  .icon-back{margin-#{$end-direction}:10px; font-size:22px;}
}
.common-nav{
  border-bottom:solid 1px var(--border-color);
  &-list{display:flex; overflow:auto; max-width:100vw;}
  &-item{
    flex:1 auto;
    a{display:block; padding:15px; text-align:center; font-size:15rem; font-weight:700; color:var(--grayA); white-space:nowrap;}
    .is-selected{border-bottom:solid 2px CurrentColor; color:var(--main-color);}
  }
}
.profile-box{
  .profile-image{
    --image-size:142px;
    display:inline-block; width:var(--image-size); background-color:var(--white); border:solid 4px var(--white); margin-top:calc( var(--image-size) / 2 * -1);
  }
  &.is-list-counters{
    .common-title{padding-#{$end-direction}:5px;}
    li + li{margin-#{$start-direction}:15px;}
  }
  &-info{
    display:flex;
    li:not(:first-child){margin-#{$start-direction}:10px;}
    .icon + .text{padding-#{$start-direction}:5px;}
  }
}
.message-box{
  display:grid; grid-template-columns:50px auto; grid-gap:10px;
  grid-template-areas:"image content"
                      "image nav";
  padding:10px 15px; border-bottom:solid 10px var(--border-color);
  &-content{
    padding:10px 0; font-size:19rem;
    &::before{content:"What's happening?"; color:#9197a3;}
    &:not(:empty)::before{content:"";}
    &:focus{
      outline:none;
      &::before{color:#bdc1c9;}     
    }
  }
  &-nav{
    grid-area:nav;
    .icon-button{font-size:18px;}
  }
}
.feed{
  &-item{
    border-bottom:solid 1px var(--border-color);
  }
}
.tweet-item{
  display:grid; grid-template-columns:50px auto; grid-column-gap:10px;
  grid-template-areas:"image user"
                      "image content"
                      "image options";
  padding:10px 15px;
  .profile-image{grid-area:image;}
  &-info{grid-area:user;}
  .common-content{grid-area:content;}
  .message-options{grid-area:options;}
  
  &-info-user{
    &:hover, &:focus{
      .common-title{text-decoration:underline;}
    }
  }
  time{
    color:var(--grayA);
    &::before{content:"·"; margin:0 5px;}
  }
  &:hover{background:var(--gray-light);}
}
.message-options{
  .icon{opacity:0.8; font-size:18rem;}
  .text{color:var(--grayA);}
}
.common-content{
  a:not(.embed-content){
    color:var(--main-color);
    &:hover, &:focus{text-decoration:underline;}
  }
}
.embed-content{
  --border-color:#ccd6dd;
  display:block; border:solid 1px var(--border-color); border-radius:10px; margin-top:10px; margin-bottom:5px;
  &:focus{border-color:var(--main-color);}
  &-image{border-radius:10px 10px 0 0; border-bottom:solid 1px; border-color:inherit;}
  &-title{color:var(--black); margin-bottom:5px;}
  &-paragraph{color:var(--grayA);}
  &-info{
    color:var(--grayA); margin-top:5px;
    .icon{margin-#{$end-direction}:5px;}
  }
  &-text{padding:10px; font-size:15px; text-decoration:none;}
}
.common-box{
  background-color:#f5f8fa; border-radius:10px; margin-bottom:15px;
  a{
    &:hover, &:focus{background-color:#edf1f4;}
  }
  &-header{
    padding:10px 15px; border-bottom:solid 1px var(--border-color);
    .icon-button{--icon-button-size:27px;}
  }
}
.content-image{border-radius:10px; margin-top:10px;}
.common-list{
  &-item{
    position:relative;
    border-bottom:solid 1px var(--border-color);
    .common-title{margin-bottom:5px;}
    p{color:var(--grayA); font-size:15rem;}
    .icon-button{--icon-button-size:27px; position:absolute; #{$end-direction}:10px; top:10px;}
  }
}
.user-item{
  display:grid; grid-template-columns:50px 1fr auto; grid-column-gap:10px; flex:1;
  grid-template-areas:"image title button"
                      "image usercode button";
  .profile-image{grid-area:image; font-size:8rem; text-align:center; background-color:var(--grayA); height:50px; overflow:hidden;}
  .common-title{grid-area:title; margin-bottom:0; align-self:end;}
  .usercode{grid-area:usercode; align-self:start;}  
  .common-button{    
    grid-area:button; display:flex; margin:auto; margin-#{$end-direction}:10px; --button-height:30px;
    .text{margin:auto;}
  }
  &:hover, &:focus{background-color:transparent;}
}

/*JS isn't my expertise 😉.
  This is only to demonstrate how will look the profile page*/
$(document).ready(function() {
  $(".js-profile").on("click", function(){
    $(".menu-item").removeClass("is-selected");
    $(this).addClass("is-selected");
    $(".icon-back, .profile-box").removeClass("u-hide");
    $(".message-box").addClass("u-hide");
    $(".js-title").text("Elad Shechter");
  });
  
  $(".js-home").on("click", function(){
      $(".menu-item").removeClass("is-selected");
      $(".menu-item.js-home").addClass("is-selected");
      $(".icon-back, .profile-box").addClass("u-hide");
      $(".message-box").removeClass("u-hide");
      $(".js-title").text("Home");
  });
  
  $(".js-tweet").on("click", function(){
      $(".message-box").removeClass("u-hide");
      $(".message-box-content").focus();
  });
 
});