/* =====================================================
   UNITYMIX FULL MASTER CSS
   SAFE SNGINE RESPONSIVE FOUNDATION
   CLEAN FLAT UI SYSTEM
===================================================== */


/* =====================================================
   UNITYMIX VARIABLES
===================================================== */

:root {


    /* =====================================
       COLORS
    ===================================== */

    --um-bg:#F3F3F3;

    --um-surface:#FFFFFF;

    --um-surface-soft:#F7F8F9;

    --um-hover:#F5F6F7;



    /* =====================================
       TEXT
    ===================================== */

    --um-text:#111111;

    --um-text-soft:#65676B;

    --um-text-muted:#8A8D91;



    /* =====================================
       BRAND
    ===================================== */

    --um-primary:#00C853;

    --um-primary-hover:#00B34A;

    --um-primary-light:#E7FAEE;


a {
	text-decoration: none;
	color: inherit;
}
  @media(min-width:768px) {
	.container {
		max-width: 600px;
		border: none;
	}
      /* =====================================
       STATUS
    ===================================== */

    --um-success:#00C853;

    --um-danger:#FF4D6D;

    --um-warning:#FFB020;



    /* =====================================
       BORDER
    ===================================== */

    --um-border:transparent;



    /* =====================================
       RADIUS
    ===================================== */

    --um-radius:12px;

    --um-radius-lg:16px;

    --um-radius-xl:20px;



    /* =====================================
       LAYOUT
    ===================================== */

    --um-width:980px;

    --um-padding:20px;



    /* =====================================
       TYPOGRAPHY
    ===================================== */

    --um-font:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;



    /* =====================================
       EFFECTS
    ===================================== */

    --um-transition:
    all .18s ease;



}



/* =====================================================
   DARK MODE VARIABLES
===================================================== */

body.dark-mode{


    --um-bg:#18191A;

    --um-surface:#242526;

    --um-surface-soft:#303031;

    --um-hover:#3A3B3C;


    --um-text:#FFFFFF;

    --um-text-soft:#B0B3B8;

    --um-text-muted:#8A8D91;


}



/* =====================================================
   FONT
===================================================== */

@font-face{


    font-family:"Inter";


    src:url("/content/assets/fonts/InterVariable.woff2")
    format("woff2");


    font-weight:100 900;


    font-style:normal;


    font-display:swap;


}



/* =====================================================
   SAFE RESET
   DOES NOT TOUCH SNGINE COMPONENTS
===================================================== */


*,
*::before,
*::after{


    box-sizing:border-box;


}



html{


    font-size:16px;

    scroll-behavior:smooth;


}



body{


    margin:0;


    min-height:100vh;


    font-family:var(--um-font);


    background:var(--um-bg);


    color:var(--um-text);


    -webkit-font-smoothing:antialiased;


    -moz-osx-font-smoothing:grayscale;


}



/* =====================================================
   UNITYMIX ONLY CONTAINER
   DO NOT USE .container
===================================================== */


.um-container{


    width:100%;


    max-width:var(--um-width);


    margin-left:auto;


    margin-right:auto;


    padding-left:var(--um-padding);


    padding-right:var(--um-padding);


}



/* =====================================================
   SAFE MEDIA
===================================================== */


.um-media img,
.um-media video{


    max-width:100%;

    height:auto;

    display:block;


}



/* =====================================================
   UNITYMIX FLEX HELPERS
===================================================== */


.um-flex{


    display:flex;

    align-items:center;


}



.um-flex-between{


    display:flex;

    align-items:center;

    justify-content:space-between;


}



.um-flex-center{


    display:flex;

    align-items:center;

    justify-content:center;


}



/* =====================================================
   UNITYMIX GRID
===================================================== */


.um-grid{


    display:grid;

    gap:16px;


}



.um-grid-2{


    grid-template-columns:repeat(2,1fr);


}



.um-grid-3{


    grid-template-columns:repeat(3,1fr);


}



/* =====================================================
   SAFE FORMS
   DOES NOT OVERRIDE SNGINE INPUTS
===================================================== */


.um-input,
.um-textarea,
.um-select{


    font-family:var(--um-font);

    width:100%;


}



/* =====================================================
   UNITYMIX BUTTONS ONLY
===================================================== */


.um-btn{


    display:inline-flex;

    align-items:center;

    justify-content:center;


    border:0;

    cursor:pointer;


    font-family:var(--um-font);


    transition:var(--um-transition);


}



/* =====================================================
   UNITYMIX CARDS
===================================================== */


.um-card{


    background:var(--um-surface);


    border-radius:var(--um-radius);


}



/* =====================================================
   SAFE OVERFLOW
===================================================== */


.um-scroll{


    overflow-x:auto;

    -webkit-overflow-scrolling:touch;


}



/* =====================================================
   TABLET
===================================================== */


@media(max-width:992px){


    :root{


        --um-width:100%;

        --um-padding:16px;


    }



    .um-grid-3{


        grid-template-columns:repeat(2,1fr);


    }



}



/* =====================================================
   MOBILE
===================================================== */


@media(max-width:768px){


    :root{


        --um-radius:10px;

        --um-radius-lg:14px;


    }



    .um-container{


        padding-left:14px;

        padding-right:14px;


    }



    .um-grid-2,
    .um-grid-3{


        grid-template-columns:1fr;


    }



}



/* =====================================================
   SMALL MOBILE
===================================================== */


@media(max-width:480px){


    :root{


        --um-padding:12px;


    }



}
/* =====================================================
   DARK MODE
===================================================== */


body.dark-mode,
body.night-mode,
html[data-theme="dark"]{


--um-bg:#050505;

--um-surface:#18191A;

--um-surface-soft:#242526;

--um-card-hover:#303031;



--um-text:#E4E6EB;

--um-text-soft:#B0B3B8;

--um-text-muted:#8A8D91;



--um-divider:transparent;



--um-primary:#14A800;

--um-primary-hover:#20C914;

--um-primary-light:

rgba(20,168,0,.15);


}





/* =====================================================
   GLOBAL BASE
===================================================== */


*,
*::before,
*::after{


box-sizing:border-box;


}



html,
body{


margin:0;

padding:0;


width:100%;


min-height:100%;



background:

var(--um-bg);



color:

var(--um-text);



font-family:

var(--um-font);



font-size:

15px;



overflow-x:hidden;


}



/* =====================================================
   SAFE SNGINE WIDTH
===================================================== */


.container,
.container-fluid,
.wrapper,
.page-wrapper{


width:100%!important;


max-width:980px!important;


margin:

20px auto!important;



padding-left:

15px!important;



padding-right:

15px!important;


}




/* =====================================================
   HEADER
===================================================== */


.header,
.navbar,
.main-header,
.topbar,
.sg-header{


position:sticky;


top:0;


z-index:9999;



width:100%;



background:

var(--um-bg);



border:none;



backdrop-filter:

blur(10px);


}




/* =====================================================
   POSTS
===================================================== */


.post,
.feed-item,
.post-box{


background:

var(--um-surface);



border:none;



border-radius:

16px;



padding:

15px;



margin-bottom:

12px;



transition:

var(--um-transition);


}



.post:hover,
.feed-item:hover{


background:

var(--um-card-hover);


}





/* =====================================================
   PUBLISHER
===================================================== */


.publisher,
.publisher-box,
.create-post{


background:

var(--um-surface);



border:none;



border-radius:

16px;



padding:

15px;



margin-bottom:

12px;


}





/* =====================================================
   WIDGETS
===================================================== */


.widget,
.trending,
.widget-trending,
.js_trending{


background:

var(--um-surface);



border:none;



border-radius:

16px;



padding:

14px;



margin-bottom:

12px;


}





/* =====================================================
   TRENDING
===================================================== */


.trending{


color:

var(--um-text);


}



.trending a{


color:

var(--um-primary);


}



.trending li:hover{


background:

var(--um-surface-soft);



border-radius:

10px;


}





/* =====================================================
   LINKS
===================================================== */


a{


color:

var(--um-primary);



text-decoration:none;


}



a:hover{


color:

var(--um-primary-hover);


}





/* =====================================================
   INPUTS
===================================================== */


input,
textarea,
select,
.form-control{


border:none;



border-radius:

12px;



padding:

11px 13px;



background:

var(--um-surface-soft);



color:

var(--um-text);



transition:

var(--um-transition);


}



input:focus,
textarea:focus,
select:focus,
.form-control:focus{


outline:none;



background:

var(--um-surface);



box-shadow:none;


}



body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .form-control{


background:

#242526;



color:#fff;


}





/* =====================================================
   DROPDOWN
===================================================== */


.dropdown-menu{


background:

var(--um-surface);



border:none;



border-radius:

14px;



}
/* =====================================================
   BUTTONS
   UNITYMIX STYLE
===================================================== */


.btn-primary,
.btn-success{


background:

var(--um-primary)!important;



border:none!important;



color:#fff!important;



border-radius:

999px;



font-weight:

600;



padding:

9px 18px;



transition:

var(--um-transition);


}



.btn-primary:hover,
.btn-success:hover{


background:

var(--um-primary-hover)!important;


}





.btn-outline-primary{


background:

transparent;



border:

1px solid var(--um-primary)!important;



color:

var(--um-primary)!important;



border-radius:

999px;



padding:

9px 18px;


}



.btn-outline-primary:hover{


background:

var(--um-primary);



color:#fff!important;


}





/* =====================================================
   BADGES
===================================================== */


.um-badge-verified{


background:

var(--um-primary);



color:#fff;



padding:

3px 8px;



border-radius:

999px;



font-size:

11px;



font-weight:

600;


}



.um-badge-creator{


background:

#13544e;



color:#fff;



padding:

3px 8px;



border-radius:

999px;



font-size:

11px;


}





/* =====================================================
   FLOAT CREATE BUTTON
===================================================== */


.um-float-create{


background:

var(--um-primary);



color:#fff;



width:

54px;



height:

54px;



border-radius:

50%;



display:flex;



align-items:center;



justify-content:center;



position:fixed;



right:

16px;



bottom:

80px;



z-index:

999;


}



.um-float-create:hover{


background:

var(--um-primary-hover);


}





/* =====================================================
   SUBSCRIBE BUTTON
===================================================== */


.um-btn-subscribe{


background:

var(--um-primary);



color:#fff;



border:none;



border-radius:

999px;



padding:

8px 16px;



font-weight:

600;


}



.um-btn-subscribe:hover{


background:

var(--um-primary-hover);


}





/* =====================================================
   IMAGE FIX
===================================================== */


img{


max-width:

100%;



height:

auto;


}





/* =====================================================
   SAFE SNGINE COMPATIBILITY
   DO NOT BREAK MENU
===================================================== */


.sg_wrapper,
.sg_page_content,
.page-container{


width:

100%!important;


max-width:

980px!important;


margin-left:

auto!important;


margin-right:

auto!important;


}



/* Keep bootstrap rows working */


.row{


margin-left:

-15px!important;


margin-right:

-15px!important;


}



/* Keep columns */

[class*="col-"]{


position:relative;


min-height:1px;


padding-left:

15px;


padding-right:

15px;


}





/* =====================================================
   REMOVE OLD VISUAL BOXES
===================================================== */


.card,
.modal-content,
.alert{


border:none!important;


box-shadow:none!important;


}





/* =====================================================
   TABLET
===================================================== */


@media(max-width:1100px){



.sidebar{


display:none!important;


}



.container,
.container-fluid,
.wrapper,
.page-wrapper{


max-width:

100%!important;


}



}





/* =====================================================
   MOBILE
===================================================== */


@media(max-width:768px){



.container,
.container-fluid,
.wrapper,
.page-wrapper{


margin:

10px auto!important;


padding-left:

10px!important;


padding-right:

10px!important;


}



.post,
.feed-item,
.post-box,
.publisher,
.publisher-box,
.widget,
.trending{


border-radius:

14px;


padding:

13px;


}



.header,
.navbar,
.main-header,
.topbar,
.sg-header{


position:relative;


}



}




/* =====================================================
   SMALL PHONES
===================================================== */


@media(max-width:480px){



body{


font-size:

14px;


}



.post,
.feed-item{


padding:

12px;


}



.um-float-create{


width:

48px;



height:

48px;



right:

12px;



bottom:

70px;


}



}





/* =====================================================
   FINAL UNITYMIX CLEANUP
===================================================== */


#root{


width:

100%;



min-height:

100vh;


}




/* Make everything flat */


.post,
.feed-item,
.post-box,
.publisher,
.publisher-box,
.create-post,
.widget,
.trending,
.widget-trending,
.js_trending,
.dropdown-menu{


border:none!important;


box-shadow:none!important;


}
/* =================================
   UNITYMIX MODERN POST STATS
================================= */

.post .post-stats{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding:8px 18px!important;
    margin:0!important;
    min-height:38px;
    color:#777!important;
    font-size:13px!important;
}


/* Remove Sngine floats */
.post .post-stats>.float-start,
.post .post-stats>.float-end{
    float:none!important;
    margin:0!important;
}


/* Right actions */
.post .post-stats>.float-end{
    display:flex!important;
    align-items:center!important;
    gap:16px!important;
}


/* Stats items */
.post .post-stats span.pointer{
    display:inline-flex!important;
    align-items:center!important;
    gap:5px!important;
    color:#777!important;
    font-weight:500!important;
    white-space:nowrap;
    transition:color .2s ease;
}


/* Hover */
.post .post-stats span.pointer:hover{
    color:#00C853!important;
}


/* Icons */
.post .post-stats i,
.post .post-stats .fa,
.post .post-stats .fas,
.post .post-stats .far{
    font-size:15px!important;
    color:#999!important;
}


/* Icon hover */
.post .post-stats span.pointer:hover i,
.post .post-stats span.pointer:hover .fa,
.post .post-stats span.pointer:hover .fas{
    color:#00C853!important;
}


/* Reaction area */
.post .post-stats .reactions-stats{
    display:inline-flex!important;
    align-items:center!important;
}


/* Hide empty stats */
.post .post-stats .x-hidden{
    display:none!important;
}


/* =================================
   MOBILE
================================= */

@media(max-width:576px){

.post .post-stats{
    padding:8px 12px!important;
    font-size:12px!important;
}

.post .post-stats>.float-end{
    gap:12px!important;
}

.post .post-stats i,
.post .post-stats .fa,
.post .post-stats .fas,
.post .post-stats .far{
    font-size:14px!important;
}

}
 .middle-feed {
          flex: 1;
          margin: 0;
          max-width: 680px;
      }
      

/* =========================
   UNITYMIX POST ACTIONS
========================= */

.post-actions .pas-item:last-child{
    border-right:0!important;
}


/* Icon sizing */
.post-actions svg.action-icon,
.post-actions .action-icon svg{
    width:18px!important;
    height:18px!important;
}

.post-actions i.action-icon,
.post-actions .pas-item i{
    font-size:18px!important;
    line-height:1!important;
    color:#65676b!important;
}


/* Action layout */
.post-actions .pas-item{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    color:#65676b!important;
    transition:.2s ease;
}

.post-actions .pas-item:hover,
.post-actions .pas-item:hover i{
    color:#00C853!important;
}


/* Dark mode */
body.night-mode .post-actions .pas-item,
body.night-mode .post-actions .pas-item i{
    color:#9aa8b6!important;
}


/* =========================
   MOBILE CLEAN MODE
========================= */

@media(max-width:575.98px){

.post-actions{
    display:flex!important;
    justify-content:space-around!important;
}

.post-actions .pas-item{
    padding:9px 4px!important;
    font-size:12px!important;
}


/* smaller icons */
.post-actions svg.action-icon,
.post-actions .action-icon svg{
    width:17px!important;
    height:17px!important;
}

.post-actions i.action-icon,
.post-actions .pas-item i{
    font-size:17px!important;
}


/* hide only action text on mobile */
.post-actions .reaction-btn-name,
.post-actions .action-btn span.d-none{
    display:none!important;
}


.post-actions .action-btn{
    gap:0!important;
    padding:9px 4px!important;
}

}

/* Post text */
ul .js_scroller .post-text{
	font-size: 32px !important;
	font-weight: 800;
}
 <style>
      :root {
                  --body-font-family: "Manrope", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
          --heading-font-family: "Sora", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
              }

      body,
      button,
      input,
      optgroup,
      select,
      textarea {
        font-family: var(--body-font-family) !important;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      .h1,
      .h2,
      .h3,
      .h4,
      .h5,
      .h6 {
        font-family: var(--heading-font-family) !important;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      .h1,
      .h2,
      .h3,
      .h4,
      .h5 {
        font-weight: 700 !important;
      }

      h6,
      .h6 {
        font-weight: 600 !important;
      }

      .main-header .logo {
        font-family: var(--heading-font-family) !important;
        font-weight: 700;
        letter-spacing: -0.02em;
        text-transform: none;
      }

      .main-header .search-wrapper .form-control,
      .main-header .search-wrapper .form-control::placeholder,
      .navbar-wrapper > ul > li > a,
      .main-header .user-menu .title,
      .dropdown-widget-header .title,
      .dropdown-menu .dropdown-item {
        font-family: var(--heading-font-family) !important;
      }

      .main-header .search-wrapper .form-control {
        font-weight: 600;
        letter-spacing: -0.01em;
      }

      .main-header .search-wrapper .form-control::placeholder {
        font-weight: 500;
      }

      .dropdown-widget-header .title,
      .dropdown-menu .dropdown-item {
        font-weight: 600;
        letter-spacing: -0.01em;
      }
    </style>