☰

Instagram dark and responsive

Instagram website is more suitable for wide screens and for our eyes.

  1. /* ==UserStyle==
  2. @name            Instagram dark and responsive
  3. @version         1.0.12
  4. @description     Instagram website is more suitable for wide screens and for our eyes.
  5. @author          BreatFR (https://breat.fr)
  6. @namespace       https://gitlab.com/breatfr
  7. @homepageURL     https://gitlab.com/breatfr/instagram
  8. @supportURL      https://discord.gg/Q8KSHzdBxs
  9. @license         AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
  10. @preprocessor    stylus
  11.  
  12. @var checkbox    darkmode            "Dark mode"            1
  13. @var checkbox    hidescrollbars      "Hide scrollbars"      1
  14. @var checkbox    largeimages         "Large images"         1
  15. @var checkbox    widemode            "Wide mode"            1
  16. ==/UserStyle== */
  17.  
  18. /* === Credits ===
  19. Website          https://breat.fr
  20. facebook         https://www.facebook.com/breatfroff
  21. mastodon         https://mastodon.social/@breat_fr
  22. telegram         https://t.me/breatfr
  23. vk               https://vk.com/breatfroff
  24. X (twitter)      https://x.com/breatfroff
  25. === Credits === */
  26.  
  27. @-moz-document url("https://www.instagram.com/") {
  28.     /* ====================
  29.         Version
  30.     ==================== */
  31.     :root {
  32.         --themeversion: 'Theme v1.0.12 by BreatFR \A';
  33.         --install1: ' usercssjs.breat.fr ';
  34.         --install2: ' gitlab.com/breatfr/instagram ';
  35.         --support1: ' ko-fi.com/breatfr ';
  36.         --support2: ' paypal.me/breat';
  37.     }
  38. 	@media screen and (min-width: 900px) {
  39.         main::before {
  40.             background: -webkit-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  41.             background: -o-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  42.             background: -ms-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  43.             background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  44.             background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  45.             -webkit-background-clip: text;
  46.             -o-background-clip: text;
  47.             -ms-background-clip: text;
  48.             -moz-background-clip: text;
  49.             background-clip: text;
  50.             color: transparent;
  51.             content: var(--themeversion) 'Install: ' url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAAK/INwWK6QAAAAlwSFlzAAAOwgAADsIBFShKgAAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAARxSURBVDhPvZR5TJNnGMAfBIUFzLSctqWUlqPcCBlQjhpdkGvNWCY2rQfKBihImMc4VgUhoIM4mG5z7MicCROZbBBxICAUHEeG6IRF2nKUwteDclhbbkq/7gO+ZRoy+W+/5P3n+Z7n9z7fm+d94X/DALDF0PC7v7alJVlVW1sir668qaiqKFf8cufG+G+1l2eaW+PQm02WePrrUd6uYg+WlTUKs8+phfHv6QdimLqhUM/FIZb74lC496IolqV/lnp0pb+0QDhaXs7ByzZi6OnZ+qiwuPhx8lH9ANNxQUUHZMEZBlZ2gkhvASJ0OwhRJxDqyCCaMYEhCflNbRf3gK4vvygWV7xKY3o6vzuGaVC7whjqDv3YEi8zYHiFZCTWO2BSexAvEWEYJWByG2y5Qr+UbKJ9wIsVoFcHTHHNOoLMy9R7rEBE4wZy1AdEiJ+16s9w5mQHlzvax96NoG4gHN1PHG2L440P+Lso9V4gxroVrZBhpJXpMdKUVULDVet8eTg+spNmrUEdYLg9xHPqAfdQzdOkU5zmD1J5ze5UGeoCIx0hNElXYub7dfG87yTMHeN4p5KW3TTJT8nnnXHVOmU8nle1K1VVz3CYv8s5xEcj09Z+ITc0NLbDbrsatYexGh/HHjAYjK6FR+3rtCdMoX4gXvABeSXTtVOQ8rPFmugfsDExqotmp/0aw87GQ2vkOzsX9TuaaGYtYfw6zbFyNZbFYKR07TLTYkLhE5KZ5ovAwItryZthyBWYXCJZNmqdQPXMHKay7IgXIgFM+XZWLZP0LRMaF0CuUym9d48kUfCS15PkyWR8bWOGoCQY7qMTFDnRUcIcdkx3vRdRPesMkm/td4xVRLHfwdM350MqPbHBynQOJYJwwnvrqJxhp5Z5kTQ62rZhhGwuLwgJkOeG7Q3G0zengE69I7cxfq61haEffN2U9TTKOGIHMpSCDbitkXjQ1/ZFiYeH7IJfqD9e8t9c2sN2qmBQEJQM0j8YhIkq9oFT7UeOcW7v3dfZ7USa1lOwOcQGu9/RYqk00KdGgJ03XvoqD9MKras+LY24cSzxVh9jp3re3hi5HxrcZgCD0ep3NPczQg2X+03/W+RxbDPRCg2ktX60sR8T+fQ1wcs0JSVRqnmcnvbDB/VP3g1aWLKEwTEGSXU/k9/bfKU0obeo1HU1byrjKrljD0u0bAVSFDuOR0EMpC670HtN8jIPCwvffuzrMjdnDlI9dq2wWyOeJ8KgOIym7uZEox2pJya6CvLauj6/0vQ0LEC5QoUB7KEY7ePu/6uv8JYtrvkXyfflDlJunFhnY6yYY1EV8pTjz1+wgyb0WBfLAOLpbSCTEm00w57kGS02Nqg5CKeD3WaHMrKu4YqNIB9nn1acOalEzmc0SE6e4Uj5OV+pTiTL5yNY03oXogwlvCFFbUylugCqQpMQPSPL/6RVkXDWAS/fyOpLLT543GfMPYiAh0CSks6S5+UVT/Kz702d/ah16txpgTKHX4PkXMyWhkXswtMwAP4GEl0BMY+jC7gAAAAASUVORK5CYII=") var(--install1) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAUCAYAAACJfM0wAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAAvRJREFUOE+dU0lrU1EUfqhbK4rixiHvvptW+gu0TZqkrQWHhVJpKyoI4lRx3ghdOCwFrS24cwCbmKYtVelCqIorf0NBrGkSWqJkWmgb7Hvv+J37brSxg9UPDuGcb8h5Jy/Gn5hsEv3TodrNul0VZgJyC/t0uxjptvpNX1r8xUxENOvRqpAK+Vuz8JUCOzbqUTVSYauTDtZTOmL16dGqkAnLfvalIlaHHlUDgcP2vl2UDlufKRRap8crgnXwJT2fHNLj3yi0ig0gSl9b/FRoraXpsGjU1IpIhUSA9ezLRGRxEjma8pAJySPf2uqYpDl8Yuv7mloR0PWynn3KH5btmvIAYrASnMcGMHwiw1ij6SWB514L3WQO+gXBcU0bxkdD1qSDspBt9lM6JJmkXHMtJRvlbi1ZEskGa08eOtazj/2ZoMxPGHXrlaD8QBy2r0maPSlo9pRXzlmLih1iKhmQH3D7RcXzYqeYYl3Fw37OKfdah1Swk/DFKG6Rc8n06opJ7lWTqBvheMwS194FhZ7nzLOO9RWvyhn2RQ33ubnVjpozNIpvu2eSfQ510SvnsknZ/Ralm3Ae3LBS3GcPIAB8Rat88HPO/IA5bSB01I0hJApiEHVHiyDmbUpdglLB6mDuS0eF4n+Fsg9+znGQh2DfW0oIoiFsjIGqG6jz3sblMya/+FXB/GPxXG0MndJrL+dwnrqxHdvZ5SREnl5JcuIQPEWx6YJnVufgtwWh6tdHr0LB27gv69mn/AmRw7KdKpjhPtthYviGxiTRCLZ/CEM3zgHjwnOoM6DnOfOsYz374B+fQ46OrIYdN3sgcGnMIvsuNoG5fFqfg9/Xyhk4FDzrWI8z9OiI5fFjwAw6Q2KCXktybyMEd+THnwroM6DnOfNKFxMBbf07cn2yxhk2n9BLi+imoGK7oGSDVJ90C4W5MyIeu4/0v+xfYb/wnXCjokD4R6URTNexJXp71DyuJf8P9/026faJ8e/H5LyDT/fddktTy8AwfgLHRHNkJDm7EgAAAABJRU5ErkJggg==") var(--install2) '· Support me: ' url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAYAAACaq43EAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAA2FJREFUSEu1lktIVGEYhqfIXW5ctUkDF250q4jLILLUvBSjzjh285pahoxIK3Fop0iRiWbiNRMUzcvIpI1dNkVGYBckIzTRAkVHCbOyt/f7/Y81alOgvvBw5nzf+b/3/Nc5Jq0I4iKPdpg7xEy2VCSZJtglfpBRkkm85CQoKSlBT0/PjtDf34+BgQG0trYiOzsbAQEBxkvcI/uJ0gMCt9uN3dLs7CzMZrNhPkD2ENOgBHp7e/Vj29P4+DhCQ0MRGBiIkJAQZGRkYH5+XuVSUlIM8ywxlkUAp9Opkl76+BlwjwDPXgPLKzpIjfDe+ZAuEzrwWzLEuvgH8kp+ywssLi7C4/EYw/6S/MW43QXEFwFH84BjF4CCq8CT50DZdSDmHGPpwImzwN0u3WBNg4ODhnGhFKdKCex2u8pbrVbJeSSx2XhqhqYXgcRLQPJljhGviTmMZfB6HkjNBixZgPkMYynAu/e6oZexXYprTYSFhal8ZWWl5FYkuNn4xSgQm0nDAsIep+YSGqcyZqG5hT220tR6Gog7AQwN6YZexsVSXOtpUFCQyjc0NEjuuwQfkw09ngZO0SSZvbJsNOMQW9OANCuvqUASjd++0Q29jAukOHWIeKKiolS+rKxMcl8l4Sbo6+tTiXWVcy6Pn6QB51HM0rRZmgWwaeJjAEcpsLqqGwEul8swvkVsZEzuOzo6VD4iIkJyn4jpviRk43tpaQmwF7M4e2QYGaTzBaSn+ZyCuTndYE3Dw8OGscLPzw8Oh0PlxFzHm8jaydXd3a2SXlrg/isqBBLi1swM46R4IJfTMMMp2aDl5WXU1NSgoqICTU1NmJqaUnGZAn9/fzH9QoLFuEuMOzs71QObJJtfzONjdU9pmsN5n95supXGxsaQn59v9PQbiSVKbQTt7e360S3EjY8rJcCRw0Aeh9eH6eTkJKKjoxEZGYng4GDDUBghUWRdt4k60H2KQ4iaag4v97gPyVqRemSByAnVSJLIXuKlawSNjY266fYk8yv1SLoU96UEog7w7WqV2yo8PFxMf5KDUvxfUn+NNpsNzc3NaGtrU9eWlpZ15F5OHaG+vh51dXWora1FdXU1qqqqUF5eDjkkpA65IUX/RweIfPrIUl/1gXxN/IkcfYKsVmGO3CT7iA+ZTL8ANy582NV4RdEAAAAASUVORK5CYII=") var(--support1) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAUCAYAAABroNZJAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAAslJREFUOE+Nk0tIVFEYx6WNEC1attA7znXmnHNvpjH3js7GRQ+dKDKTMgx6UOnMvaNZaRAoGD0WRTQPH6Nii6CgRa1yUUGEjo+0mTSkB7UIF0G0aFlUxNd37jmOjo7QH/6cgXu+3/leU7BSxLSvaVXnvhDTWmNqRhap2TqmVbZf1PXDm2RIrjyetkJiWJ9Z5Vmgpr2+/ZFfeOcd8YUaZeiyvKalUtP6y/yt+YNXGLNFnwfiC++U4UII2a1Vta8KiKxjG/RAB2D5T2S4ENZt8w85EMMCYoTXmKJ5NtQXfiPDhZCayEL8EbwcghLWAC5av8Yl9CCoWiOUVoU+GGnYKBEO5KmOdXII74t3+ylQvPvBReryurhoF3iabgAdmX8mET0bsJxPmpwMh3jKj0vIgbxWlCB4O+4BG54DB6H77S1Y/4+lyfBTLTu6DqQelOIacFdjb/qmgcYnBYT5wgGxH6LzvCduvRFcqyHeOlCKasClHwJy5THQgRmgsZSAYD+O6YELAsCNUylx73NeVJRaPLkxWN0L7h2tQK6OAku+QsAEkFjqj4AY1vXl8eJkfCFQgx2g1neDWtcFakMPlJ6MgrfrIdB+fJ07Og7a0ByQ6PiChNiPsplUNAMNdgMdSgMbygAb5Kf47aQfn3AArO8lbL3zFlgi1eBAqGG/zm7rttNAj9wCOjjr1Ltk1jcDrH8WtGTGCdaSaSC3xy45AN1oUbCcr8zfJiBlCGkZzoGwxBS+nvqGk1ikiekMwgZIbNLvALiYYTdhJj+zkyk/A7TzQbbz/GUSTaVd0RebPfGPhTIsV7hk90VD0TgVx5dHxQ4gRB9Z4Fn0y+v5heP9Lv7aaLMNWHUn0JvPgSYmlyGxVLu8nl/MZxnMiNTgWcsqmmvJid4I6+WbiFPg5fAxxsf3yOv/J3r3fVAfnncAvKG4TL898YlS+TmPCgr+AaBy8VrppmCMAAAAAElFTkSuQmCC") var(--support2);
  52.             display: inline-block;
  53.             font-family: inherit;
  54.             font-size: 1.2rem;
  55.             left: 0;
  56.             pointer-events: none;
  57.             position: absolute;
  58.             text-align: center;
  59.             top: .2em;
  60.             width: 100vw;
  61.             white-space: pre-line;
  62.             z-index: 10;
  63.         }
  64.     }
  65. }
  66.  
  67. @-moz-document domain("instagram.com") {
  68. /* ====================
  69.     Hide scrollbars
  70. ==================== */
  71.     if hidescrollbars {
  72.         :root ::-webkit-scrollbar {
  73.             scrollbar-width: none !important;
  74.             -ms-overflow-style: none !important;
  75.             -moz-overflow-style: none !important;
  76.             -webkit-overflow-style: none !important;
  77.             width: 0px !important;
  78.         }
  79.         ::-webkit-scrollbar {
  80.             display: none !important;
  81.             width: 0px !important;
  82.         }
  83.     }
  84.  
  85.     :root {
  86.         font-size: 1.2rem !important;
  87.         --width: calc(100vw - 519px - 1em) !important;
  88.     }
  89.  
  90. /* ====================
  91.     Dark mode
  92. ==================== */
  93.     if darkmode {
  94.         /* Splash screen */
  95.         #splash-screen {
  96.             background: #1e1e1e !important;
  97.             color: #cbcbcb !important;
  98.         }
  99.  
  100.         .x12nagc.x182iqb8.x1pi30zi.x1swvt13,        .x5ur3kl.x13fuv20.x178xt8z.x1roi4f4.x2lah0s.xvs91rp.xl56j7k.x17ydfre.x1n2onr6.x10b6aqq.x1yrsyyn.x1hrcb2b.x1pi30zi,
  101.         .x6s0dn4.xrvj5dj.x1o61qjw.x12nagc.x1gslohp,
  102.         header section {
  103.             background: transparent !important;
  104.         }
  105.  
  106.         ._aaic,
  107.         ._aam1,
  108.         ._abm4,
  109.         ._ae1j,
  110.         .xvbhtw8,
  111.         .xyzq4qe,
  112.         ._aak3,
  113.         ._aatc ._aasi,
  114.         ._aest,
  115.         ._ae48,
  116.         ._aa61,
  117.         ._aauy,
  118.         ._aa62,
  119.         ._ab8s,
  120.         ._ad8j ,
  121.         ._aatg ._aatk._aatn,
  122.         ._aatk,
  123.         ._ab8q,
  124.         ._ae1i,
  125.         ._ae1k,
  126.         .x7r02ix,
  127.         ._aart,
  128.         ._aart ._aaru,
  129.         ._aac4._aac5._aac6._aj3f._ajdu,
  130.         .x78zum5.xdt5ytf.x1iyjqo2.x5yr21d.xh8yej3,
  131.         .x78zum5.xdt5ytf.x1iyjqo2.xg6iff7,
  132.         .x9f619.x1n2onr6.x1ja2u2z,
  133.         ._ab22,
  134.         ._aasi,
  135.         .xnz67gz,
  136.         body,
  137.         body._a3wf {
  138.             background: #1e1e1e !important;
  139.             background-color: #1e1e1e !important;
  140.         }
  141.  
  142.         * {
  143.             border: none !important;
  144.         }
  145.  
  146.         body,
  147.         button,
  148.         div,
  149.         h1,
  150.         h2,
  151.         h3,
  152.         h4,
  153.         h5,
  154.         h6,
  155.         label,
  156.         p,
  157.         svg,
  158.         textarea,
  159.         ._aad3,
  160.         ._aaai,
  161.         ._ac2a,
  162.         ._alvs,
  163.         ._alvs:visited,
  164.         ._aacx,
  165.         ._aaoe,
  166.         ._aaqn,
  167.         ._acao._acat,
  168.         .x5n08af:not(input),
  169.         .xzsf02u,
  170.         .xqnirrm {
  171.             color: #cbcbcb !important;
  172.             fill: #cbcbcb !important;
  173.         }
  174.  
  175.         a:hover {
  176.             color: white !important;
  177.             fill: white !important;
  178.         }
  179.  
  180.         /* Links */
  181.         a,
  182.         a:visited,
  183.         ._aaai,
  184.         ._aaai:visited,
  185.         ._aaqn,
  186.         ._aaqn:visited,
  187.         ._ap3a._aaco._aacw._aacz._aada._aade,
  188.         ._aacz:visited,
  189.         .x7l2uk3,
  190.         .x7l2uk3:visited,
  191.         .x9f619.x1n2onr6.x1ja2u2z.x78zum5.xdt5ytf.x193iq5w.xeuugli.x1r8uery.x1iyjqo2.xs83m0k > div > div > div > div:nth-child(4) > div,
  192.         .x3nfvp2.x193iq5w > div > a > span > span {
  193.             color: rgb(0, 149, 246) !important;
  194.         }
  195.  
  196.         /* Loved */
  197.         svg.x1lliihq.x1n2onr6.xxk16z8 path {
  198.             fill: #fc5776;
  199.             stroke: #fc5776;
  200.         }
  201.  
  202.         /* Follow */
  203.         ._ap3a._aaco._aacw._aad6._aade {
  204.             color: white !important;
  205.         }
  206.         /* Followed */
  207.         [style="display: inline-block; transform: rotate(180deg);"] > svg,
  208.         ._ap3a._aaco._aacw._aad6._aade[dir="auto"] {
  209.             color: #101010 !important;
  210.             fill: #101010 !important;
  211.         }
  212.  
  213.         /* Reels */
  214.         .xlup9mm.x10ogl3i.x1kky2od > svg,
  215.         [style="line-height: var(--base-line-clamp-line-height); --base-line-clamp-line-height: 16px;"] > .x1lliihq.x193iq5w.x6ikm8r.x10wlt62.xlyipyv.xuxw1ft {
  216.             color: #1e1e1e !important;
  217.             fill: #1e1e1e !important;
  218.         }
  219.  
  220.         .x1y1aw1k.x1sxyh0.xwib8y2.xurb0ha > a > div,
  221.         .x1y1aw1k.x1sxyh0.xwib8y2.xurb0ha > div > div {
  222.             background: #1e1e1e !important;
  223.         }
  224.  
  225.         /* Modal after clicking on image/video */
  226.         article[class="_aatb _aate _aatg _aati"],
  227.         article[class="_aatb _aate _aatg _aati"] > div {
  228.             border-radius: 16px !important;
  229.         }
  230.         ._aaqf._aaqh,
  231.         ._aaqg._aaqh {
  232.             background: #1e1e1e !important;
  233.             border: 1px solid;
  234.         }
  235.         ._aaqf._aaqh svg,
  236.         ._aaqg._aaqh svg  {
  237.             height: 36px;
  238.             width: 36px;
  239.         }
  240.         .x1eu8d0j {
  241.             background: #1e1e1e !important;
  242.         }
  243.  
  244.         /* Previous/next on menu profile */
  245.         ._aao_ {
  246.             padding-right: 3px;
  247.         }
  248.         ._afxx {
  249.             background: url(https://static.cdninstagram.com/rsrc.php/v3/y8/r/ZWR9C7_JdnP.png);
  250.             background-position: -294px -226px;
  251.             background-repeat: no-repeat;
  252.             height: 45px;
  253.             width: 45px;
  254.         }
  255.         ._afxy {
  256.             background: url(https://static.cdninstagram.com/rsrc.php/v3/y8/r/ZWR9C7_JdnP.png);
  257.             background-position: -294px -226px;
  258.             background-repeat: no-repeat;
  259.             height: 45px;
  260.             width: 45px;
  261.         }
  262.  
  263.         /* Verified icons */
  264.         svg.x1lliihq.x1n2onr6:not(.x1lliihq.x1n2onr6.x5n08af,.x1lliihq.x1n2onr6.xyb1xck,[style="display: flex; flex-direction: column; padding-bottom: 0px; padding-top: 0px; position: relative;"] svg) {
  265.             fill: rgb(0, 149, 246) !important;
  266.         }
  267.         /* Icons on profil's posts */
  268.         [style="display: flex; flex-direction: column; padding-bottom: 0px; padding-top: 0px; position: relative;"] svg {
  269.             fill: white !important;
  270.         }
  271.     }
  272.  
  273. /* ====================
  274.     Large images
  275. ==================== */
  276.     if largeimages {
  277.         [class="html-div xdj266r x14z9mp xat24cr x1lziwak xexx8yu xyri2b x18d9i69 x1c1uobl x9f619 x10cxd3o x1bl4301 xjbqb8w x78zum5 x15mokao x1ga7v0g x16uus16 xbiv7yw x1uhb9sk x1plvlek xryxfnj x1c4vz4f x2lah0s xdt5ytf xqjyukv x1qjc9v5 x1oa3qoh x1nhvcw1"],
  278.         [class="x6s0dn4 xyzq4qe x78zum5 xdt5ytf x2lah0s xl56j7k x6ikm8r x10wlt62 x1n2onr6 x5ur3kl x6usi7g x1bs97v6 x18dxpii xjwep3j x1t39747 x1wcsgtt x1pczhz8 x13fuv20 x18b5jzi x1q0q8m5 x1t7ytsu x178xt8z x1lun4ml xso031l xpilrb4"] > div,
  279.         [class="x6s0dn4 xyzq4qe x78zum5 xdt5ytf x2lah0s xl56j7k x6ikm8r x10wlt62 x1n2onr6 x5ur3kl x6usi7g x1bs97v6 x18dxpii xjwep3j x1t39747 x1wcsgtt x1pczhz8 x13fuv20 x18b5jzi x1q0q8m5 x1t7ytsu x178xt8z x1lun4ml xso031l xpilrb4"] > div > div > div,
  280.         article li._acaz[style*="transform:"] > div {
  281.             max-width: calc(100vw - 519px - 1em) !important;
  282.             min-width: calc(100vw - 519px - 1em) !important;
  283.             width: calc(100vw - 519px - 1em) !important;
  284.         }
  285.         
  286.         * {
  287.             --x-width: 100% !important;
  288.         }
  289.         
  290.         video {
  291.             aspect-ratio: auto !important;
  292.             height: auto !important;
  293.             width: 100% !important;
  294.         }
  295.     }
  296.  
  297. /* ====================
  298.     Wide mode
  299. ==================== */
  300.     if widemode {
  301.         .xsdox4t,
  302.         .x78zum5.xdt5ytf.x1iyjqo2.xg6iff7,
  303.         .x6osk4m.x6osk4m {
  304.             overflow-x: hidden;
  305.             width: 100% !important;
  306.         }
  307.         
  308.         /* If searchbar */
  309.         body:has(input) {
  310.             [class="x78zum5 x1q0g3np x1gvbg2u x1qughib x1n2onr6 xleuxlb xxfw5ft x1mh60rb x1f91t4q"],
  311.             [class="x78zum5 x1q0g3np x1gvbg2u x1qughib x1n2onr6 xleuxlb xxfw5ft x1mh60rb x1f91t4q"] > div,
  312.             [class="x78zum5 x1q0g3np x1gvbg2u x1qughib x1n2onr6 xleuxlb xxfw5ft x1mh60rb x1f91t4q"] > div > div {
  313.                 max-width: fit-content !important;
  314.             }
  315.         }
  316.         /* Menu */
  317.         [class="x9f619 xjbqb8w x78zum5 x15mokao x1ga7v0g x16uus16 xbiv7yw xixxii4 x13vifvy x1plvlek xryxfnj x1c4vz4f x2lah0s xdt5ytf xqjyukv x1qjc9v5 x1oa3qoh x1nhvcw1 x1dr59a3 xeq5yr9 x1n327nk"] {
  318.             position: fixed !important;
  319.         }
  320.         [class="x9f619 xjbqb8w x78zum5 x15mokao x1ga7v0g x16uus16 xbiv7yw xixxii4 x13vifvy x1plvlek xryxfnj x1c4vz4f x2lah0s xdt5ytf xqjyukv x1qjc9v5 x1oa3qoh x1nhvcw1 x1dr59a3 xeq5yr9 x1n327nk"],
  321.         [class="x6usi7g x18b5jzi x1lun4ml x1vjfegm"],
  322.         [class="x6usi7g x18b5jzi x1lun4ml x1vjfegm"] > div {
  323.              width: 200px !important;
  324.         }
  325.  
  326.         body:not(:has(header)) {
  327.             main {
  328.                 margin-left: -135px;
  329.             }
  330.             main > div > [style="max-width:630px;width:100%"],
  331.             main > div > [style="max-width: 630px; width: 100%;"] {
  332.                 max-width: calc(100vw - 519px - 1em) !important;
  333.                 min-width: calc(100vw - 519px - 1em) !important;
  334.                 width: auto !important;
  335.             }
  336.             [class="x9f619 xjbqb8w x78zum5 x15mokao x1ga7v0g x16uus16 xbiv7yw x1uhb9sk x1plvlek xryxfnj x1c4vz4f x2lah0s xdt5ytf xqjyukv x1qjc9v5 x1oa3qoh x1nhvcw1"]:not(:has([style="height:44px;width:44px"])) {
  337.                 width: 100% !important;
  338.             }
  339.             [class="x9f619 xjbqb8w x78zum5 x15mokao x1ga7v0g x16uus16 xbiv7yw x1uhb9sk x1plvlek xryxfnj x1c4vz4f x2lah0s xdt5ytf xqjyukv x6s0dn4 x1oa3qoh x1nhvcw1"] > div[style*="max-width:100%;"] {
  340.                 margin-left: 0 !important;
  341.             }
  342.             main > [class="x1iyjqo2 xdj266r xkrivgy xat24cr x1gryazu x1ykew4q x38y82z xc73u3c x18d9i69 x5ib6vp x19sv2k2 x1wfb79h x1oyxtw5 x1k4gc0v x15w28ab x10rn61k"] {
  343.                 max-width: 100% !important;
  344.             }
  345.             main > div > [style="max-width:630px;width:100%"],
  346.             main > div > [style="max-width: 630px; width: 100%;"] {
  347.                 max-width: calc(100vw - 519px - 3em) !important;
  348.                 min-width: calc(100vw - 519px - 3em) !important;
  349.                 width: auto !important;
  350.             }
  351.  
  352.             .x1okitfd {
  353.                 max-width: none !important;
  354.             }
  355.  
  356.             article [class="x6s0dn4 xyzq4qe x78zum5 xdt5ytf x2lah0s xl56j7k x6ikm8r x10wlt62 x1n2onr6 x5ur3kl xopu45v x1bs97v6 xmo9t06 x1lcm9me x1yr5g0i xrt01vj x10y3i5r x13fuv20 xu3j5b3 x1q0q8m5 x26u7qi x178xt8z xm81vs4 xso031l xy80clv"] > div {
  357.                 width: 100%;
  358.             }
  359.             .x6s0dn4.xyzq4qe.x78zum5.xdt5ytf.x2lah0s.xl56j7k.x6ikm8r.x10wlt62.x1n2onr6.x5ur3kl.xopu45v.x1bs97v6.xmo9t06.x1lcm9me.x1yr5g0i.xrt01vj.x10y3i5r.x13fuv20.xu3j5b3.x1q0q8m5.x26u7qi.x178xt8z.xm81vs4.xso031l.xy80clv,
  360.             article > div > div:nth-of-type(2),
  361.             article > div > div:nth-of-type(2) > div > div > div > div > div > div > div > div > div,
  362.             article img,
  363.             article video {
  364.                 border-radius: 1em !important;
  365.             }
  366.  
  367.             /* Sidebar */
  368.             .x1dr59a3.x13vifvy.x7vhb2i.x6bx242 {
  369.                 padding-left: 0 !important;
  370.                 position: fixed;
  371.                 right: 1em !important;
  372.                 width: 319px !important;
  373.             }
  374.         }
  375.  
  376.         /* Profile */
  377.         body:has(header) {
  378.             main {
  379.                 margin-left: 200px;
  380.             }
  381.             main,
  382.             main > div,
  383.             main > div > div,
  384.             main > div > div:nth-of-type(2) > div > div > div > div > div,
  385.             header {
  386.                 max-width: calc(100vw - 200px) !important;
  387.                 padding-left: 0;
  388.                 padding-top: 0;
  389.                 width: calc(100vw - 200px) !important;
  390.             }
  391.  
  392.             /* Profile header */
  393.             [class="x78zum5 xdt5ytf x1iyjqo2 xg6iff7"],
  394.             [class="x1iyjqo2 xdj266r xkrivgy xat24cr x1gryazu x1ykew4q x38y82z xc73u3c x18d9i69 x5ib6vp x19sv2k2 x1wfb79h x1oyxtw5 x1k4gc0v x15w28ab x10rn61k"] {
  395.                 padding-top: 0;
  396.             }
  397.             header > section:nth-of-type(5):empty,
  398.             header > section:nth-of-type(6):empty,
  399.             header > section:nth-of-type(7):empty {
  400.                 display: none !important;
  401.                 height: 0 !important;
  402.                 margin-bottom: 0 !important;
  403.                 margin-top: 0 !important;
  404.                 padding: 0 !important;
  405.             }
  406.             header > section:nth-of-type(2) {
  407.                 margin-bottom: 0;
  408.             }
  409.             header > section:nth-of-type(1),
  410.             header > section:nth-of-type(3),
  411.             header > section:nth-of-type(4) {
  412.                 margin-bottom: 0;
  413.                 margin-top: 0;
  414.             }
  415.             header > section:nth-of-type(6) {
  416.                 margin-bottom: 0;
  417.                 margin-top: 0;
  418.                 padding: 0 20px !important;
  419.             }
  420.  
  421.             /* Profile galery */
  422.             main > div {
  423.                 margin: auto;
  424.                 padding: 0 !important;
  425.             }
  426.             main > div > div:nth-of-type(2) div:not(:hover) {
  427.                 background-color: transparent !important;
  428.                 border-radius: 1em !important;
  429.             }
  430.             main > div > div:nth-of-type(2) div:hover {
  431.                 border-radius: 1em !important;
  432.             }
  433.             main > div > div:nth-of-type(2) > div > div > div,
  434.             main > div > div:nth-of-type(2) > div > div > div > div {
  435.                 gap: 1em !important;
  436.             }
  437.             main > div > div:nth-of-type(2) > div > div > div > div {
  438.                 margin-bottom: 0 !important;
  439.             }
  440.             
  441.             main > div > div:nth-of-type(2) > div > div > div > div > div > div > a > div:nth-of-type(1) > div:nth-of-type(1) {
  442.                 aspect-ratio: 1 / 1 !important;
  443.                 overflow: hidden !important;
  444.                 padding-bottom: 0 !important;
  445.             }
  446.             main > div > div:nth-of-type(2) div div:last-child:hover {
  447.                 cursor: zoom-in !important;
  448.             }
  449.         }
  450.  
  451.         /* Article content */
  452.         .x9f619.xjbqb8w.x78zum5.x168nmei.x13lgxp2.x5pf9jr.xo71vjh.x1uhb9sk.x1plvlek.xryxfnj.x1c4vz4f.x2lah0s.xdt5ytf.xqjyukv.x6s0dn4.x1oa3qoh.x1nhvcw1 > div {
  453.             min-width: 100% !important;
  454.         }
  455.         ._aap0 {
  456.             width: 100% !important;
  457.         }
  458.  
  459.         /* Smiley */
  460.         .xu96u03.xm80bdy.x10l6tqk.x13vifvy > div.x1uvtmcs.x4k7w5x.x1h91t0o.x1beo9mf.xaigb6o.x12ejxvf.x3igimt.xarpa2k.xedcshv.x1lytzrv.x1t2pt76.x7ja8zs.x1n2onr6.x1qrby5j.x1jfb8zj > div > div > div > div > div  {
  461.             background: #101010;
  462.         }
  463.  
  464.         /* Article header home page */
  465.         .x6s0dn4.x78zum5.x1q0g3np.x1nhvcw1.xh8yej3 > div {
  466.             padding: 0 10px;
  467.         }
  468.  
  469.         /* Comments home page */
  470.         .x1lliihq.x1n2onr6 > .xvbhtw8.x78zum5.xdt5ytf.x5yr21d.x1n2onr6 > div {
  471.             padding: 0px;
  472.         }
  473.  
  474.         /* Messages */
  475.         .x9f619.x1n2onr6.x1ja2u2z.x78zum5.xdt5ytf.x193iq5w.xeuugli.x1r8uery.x1iyjqo2.xs83m0k {
  476.             padding-right: 10px;
  477.         }
  478.         span[style="line-height: var(--base-line-clamp-line-height);--base-line-clamp-line-height: 25px;"] {
  479.             line-height: 40px !important;
  480.         }
  481.     }
  482.     
  483.     /* In live */
  484.     [aria-label*="Story"] > div > div > div:nth-of-type(2) {
  485.         width: fit-content !important;
  486.     }
  487.  
  488.     /* For you */
  489.     .xixxii4 {
  490.         position: absolute
  491.     }
  492.  
  493.     /* For instagram ad blocker browser plugin */
  494.     #ad-shield {
  495.         background: #101010 !important;
  496.         color: #cbcbcb !important;
  497.         left: 156px;
  498.     }
  499.     #ad-shield-main {
  500.         background: #101010 !important;
  501.         color: #cbcbcb !important;
  502.         height: auto;
  503.         left: 10px;
  504.         max-height: 50%;
  505.         overflow-y: auto;
  506.         padding: 5px 10px;
  507.         position: fixed;
  508.         top: 70px;
  509.         width: 300px;
  510.         z-index: 9999;
  511.     }
  512.     #ad-hid-count,
  513.     #ad-hide-username {
  514.         background: #1e1e1e !important;
  515.         color: #cbcbcb !important;
  516.     }
  517. }