1.     :root {
  2.         --headingbg: rgb(244, 244, 255);
  3.         --bodybg: #fffaf5;
  4.     }
  5.     body {
  6.         text-shadow: 2px 2px 6px rgb(0 0 0 / 10%);
  7.         font-family: opendyslexic;
  8.     }
  9.  
  10.     body.system-font {
  11.         font-family: opendyslexic;
  12.     }
  13.    
  14.     body.app-body.layout-single-column {
  15.         background-color: var(--bodybg);
  16.     }
  17.  
  18.     .status__content__text,
  19.     .detailed-status {
  20.         line-height: 1.5em;
  21.     }
  22.  
  23.     @media screen and (min-width: 890px) {
  24.  
  25.  
  26.         article,
  27.         .detailed-status__wrapper,
  28.         .status-reply.status--in-thread, .compose-panel,
  29.         .modal-root__modal {
  30.             margin: 3em 1em;
  31.             border: 1px solid rgb(135, 135, 249);
  32.             border-radius: 15px;
  33.             box-shadow: 0px 4px 5px rgba(0, 0, 0, .14), 0px 1px 10px rgba(0, 0, 0, .12), 0px 2px 4px rgba(0, 0, 0, .2);
  34.             overflow: hidden;
  35.             transition: all .15s;
  36.             background: white;;
  37.         }
  38.  
  39.         article * {
  40.             transition: all .15s;
  41.         }
  42.        
  43.         article .status, .detailed-status {
  44.             padding: 0;
  45.         }
  46.  
  47.         article .status__action-bar,
  48.         .status__content {
  49.             padding: 10px 1rem;
  50.         }
  51.        
  52.         article .status__wrapper.collapsed header {
  53.             box-shadow: 0px 8px 3px 0px rgba(0, 0, 0, 0.5);
  54.         }
  55.  
  56.         article header,
  57.         .detailed-status__display-name {
  58.             background: rgb(244, 244, 255);
  59.             margin: 0;
  60.             padding: 10px 14px;
  61.         }
  62.  
  63.         article aside {
  64.             width: 100%;
  65.             background: rgb(244, 244, 255);
  66.         }
  67.        
  68.         .compose-panel {
  69.             background: transparent;
  70.             padding: 1rem;
  71.             margin-top: 100px;
  72.         }
  73.        
  74.         .compose-panel textarea {
  75.             max-height: 25vh;
  76.         }
  77.        
  78.         .search {
  79.             margin-bottom: 32px;
  80.             position: absolute;
  81.             top: .25rem;
  82.             left: 0;
  83.         }
  84.        
  85.         .columns-area__panels__pane__inner {
  86.             width: unset;
  87.             height: unset;
  88.         }
  89.  
  90.         .tabs-bar__wrapper {
  91.             background-color: var(--bodybg);
  92.         }
  93.        
  94.         .column-header {
  95.             border: 0;
  96.         }
  97.        
  98.         .detailed-status__wrapper {
  99.             border-bottom-left-radius: 0;
  100.             border-bottom-right-radius: 0;
  101.             margin-bottom: 0;
  102.         }
  103.        
  104.         .detailed-status__meta__line {
  105.             padding: 8px 1rem;
  106.         }
  107.  
  108.         .status-reply.status--in-thread {
  109.             border-top-right-radius: 0;
  110.             border-top-left-radius: 0;
  111.             margin-top:0;
  112.         }
  113.        
  114.         .status-reply.status--in-thread.status--first-in-thread {
  115.             border-radius: 15px;
  116.           border-bottom-left-radius: 0;
  117.             border-bottom-right-radius: 0;
  118.             margin-bottom: 0;
  119.             margin-top: 1rem;
  120.         }
  121.        
  122.         #tabs-bar__portal {
  123.             border-top-left-radius: 15px;
  124.             border-top-right-radius: 15px;
  125.             background-color: var(--headingbg);
  126.  
  127.             animation-name: scroll-shadow;
  128.             animation-duration: 1ms;
  129.             animation-direction: alternate;
  130.             animation-timeline: scroll(block root);
  131.         }
  132.        
  133.         .column>.scrollable {
  134.                 border: none;
  135.         }
  136.        
  137.         .status__content.status__content--with-action {
  138.             width: unset;
  139.         }
  140.        
  141.         .boost-modal__container {
  142.             overflow: auto;
  143.         }
  144.        
  145.         .modal-root__modal {
  146.            box-shadow: 0px 4px 50px rgba(0, 0, 0, .5), 0px 1px 50px rgba(0, 0, 0, .4), 0px 2px 54px rgba(0, 0, 0, .5);
  147.              animation: slide-in-fwd-top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  148.         }
  149.        
  150.     }
  151.  
  152.     @keyframes scroll-shadow {
  153.         0% {
  154.             border-radius: 15px;
  155.             border: 1px solid rgba(135, 135, 249,1);
  156.             box-shadow: 0px 8px 3px 0px rgba(0, 0, 0, 0);
  157.         }
  158.         1% {
  159.             border-bottom-left-radius: 0;
  160.             border-bottom-right-radius: 0;
  161.             border: 1px solid rgba(135, 135, 249,0);
  162.             box-shadow: 0px 8px 3px 0px rgba(0, 0, 0, 0.5);
  163.         }
  164.         99% {
  165.             box-shadow: 0px 8px 3px 0px rgba(0, 0, 0, 0.5);
  166.         }
  167.         100% {
  168.             box-shadow: 0px 8px 3px 0px rgba(0, 0, 0, 0.5);
  169.         }
  170.     }
  171.    
  172.     @keyframes fade {
  173.         0% {
  174.             opacity: 1;
  175.         }
  176.        
  177.         100% {
  178.             opacity: 1;
  179.         }
  180.     }
  181.    
  182.    
  183.    
  184.     .graze-toot-container.site h2,
  185.     .graze-toot-container.site h1,
  186.     .graze-toot-container.site  {
  187.         color: black;
  188.     }