html, body, #__next {
    height: 100%;
    
    font-family: "Work Sans" !important;
   
}

/************VARIABLES**************/
/*****https://mycolor.space/?hex=%23FF3E77&sub=1*****/
:root {
    --white: #fff;
    --white-80: rgba(255, 255, 255, 0.15);
    --white-90: rgba(255, 255, 255, 0.20);
    --white-hover: rgba(255, 255, 255, 0.25);
    --black: rgba(0, 0, 0, 0.95);
    --background-55: rgba(0, 0, 0, 0.55);
    --telePrompterBackground: linear-gradient(-180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%) transparent;
    --telePrompterShadow: rgba(0, 0, 0, 0.5) 0px 0px 20px;
  
    --cardShadow: 0 0 5px rgba(0, 0, 0, 0.2);
    --sceneTitleBackground: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
    --darkButtonBackground: rgba(255, 255, 255, 0.025);
    --cardBackground: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0)) no-repeat;
    --cardBackgroundHover: rgba(0, 0, 0, 0.25);

    --cardWidth: max(calc(18vh * 1.777), 120px);
    --cardHeight: 18dvh;

    --primary-color-grad1: #FF3B85;
    --primary-color-grad2: #FF3B85;
    --secondary-color-grad1: #583090;
    --secondary-color-grad2: #583090;
    --line-color: #D7DADD; 
    --primary-gradient: linear-gradient(90deg, var(--primary-color-grad1) var(--primary-color-grad2));
    --secondary-gradient: linear-gradient(90deg, var(--secondary-color-grad1) var(--secondary-color-grad2));
    --background-hover: #583090;
    --sidebar-background: #001529; 
    --sidebar-background-hover: #05182a; 
    --listview-background: #F0F2F5;
    --listview-background-lighter: #f3f3f3;
    --listview-background-darker: rgba(225, 225, 225, 0.4);
    --background-faded: #D7DADD;
  
    --primary-color: #FF3B85;
    --primary-color-80: #FF699C;
    --primary-color-60: #FE8FB7;
    --primary-color-40: #FEB5CE;
    --primary-color-20: #FFD9E7;
  
    --destructive-color: #F3025D;
    --destructive-color-80: #DF025A;
  
  
    --secondary-color: #583090;
    --secondary-color-80: #69459B;
    --secondary-color-60: #7959A5;
    --secondary-color-40: #BCAED4;
    --secondary-color-20: #DDD5E8;

    --pricing-sidebar-color: var(--secondary-color);
  
    --secondary-color-faded: #8571d3;
    --secondary-color-light: rgba(83, 43, 247, 0.85);
    --secondary-gray: #8E8E8E;
    --secondary-gray-light: #F0F2F5;
    --secondary-gray-light2: #e5eaee;
  
    --text-link-color: var(--primary-color);
    --text-color: #4e5266;
    --text-color-dark: rgba(0, 0, 0, 0.85);
    --background-color: #d0dae4;
    --default-icon-color: #7bd3c8;
    --editable-active-color: #F0F2F5;
    --offwhite-color: rgba(225, 225, 225, 0.1);
  
    --blankslate-heading-color: rgba(0, 0, 0, 0.85);
    --blankslate-subheading-color: rgba(0, 0, 0, 0.5);
  
    --accent-color-yellow: #FEC86E;
    --accent-color-yellow-20: #f9e7c2;
    --accent-color-yellow-darker: #fcbe55;
  
    --accent-color-green: #00B6A4 ;
    --accent-color-green-darker: rgb(21, 168, 154) ;
    --accent-color-green-80: #57C3B6;
    --accent-color-green-60: #66D2C8 ; 
    --accent-color-green-40: #AFE1DB;
    --accent-color-green-20: #D7F1ED; 
    
    --leftnav: #001529;
    --scene-background: #060E2B;
    --feed-background: var(--scene-background);
    --chat-background: var(--scene-background);
    --topnav-background: #001529;
    --topnav-background-80: #060E2B;
  
    --fontFamily: "Work Sans";
  
    --buttonBackgroundDarkOpaque: rgba(0,0,0,0.35);
  
  
    /*** PROMPTS ***/
    --promptButtonColor: var(--primary-color);
    --promptButtonColorLight: var(--primary-color-80);
    --promptButtonColorLighter: var(--primary-color-60);
    --promptChoiceButtonColor:  rgba(10, 10, 10, 0.2);
    --promptChoiceButtonColorHover: rgba(255, 255, 255, 0.2);
    
    --promptTextColor: inherit;
    --promptBackgroundColor: var(--primary-color);
    --promptBackgroundColorLight: var( --background-color);
    --promptTextBackgroundColor: unset;
    --promptTextFontFamily: inherit;
    --promptTitleColor: white;
  
    /*** WALL OF LOVE ***/
  
    --wolCarouselHeight: 500px;
    --wolCarouseDotsColor: var(  --text-color);
    --wolFeedWidth: 25vw;
    --wolFontFamily: inherit;
    --wolFontForTextPosts: 'Helvetica Neue', Roboto, 'Segoe UI', Calibri, sans-serif;
    --wolFontSize: 1.25rem;
    --wolFontSizeTitle: 1.6rem;
    --wolTitleColor: inherit;
    --wolBackgroundColor: transparent;
    --wolPrimaryColor: var(--primary-color);
    --wolSecondaryColor: var(--secondary-color);
  
    --wolDarkModeBackground: rgb(21, 32, 43);
    --wolDarkModeColor: rgb(247, 249, 249);
    --wolDarkModeColor-80: rgba(139,152,165);
  
    --wolDarkModeBorderColor: rgb(21, 32, 43);

    --wolPlaceholderBackground: var(--secondary-gray-light2);
  }


  .light-mode {
    --white: rgba(0, 0, 0, 0.85);
    --white-80: rgba(0, 0, 0, 0.7);
    --white-hover: #F0F3F5;
    --black: rgba(0, 0, 0, 0.05);
    --textPromptBackground: none;
    --textPromptShadow: none;
    --cardShadow: 0 0 5px rgba(0, 0, 0, 0.25);
    --sceneTitleBackground: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
    --darkButtonBackground: rgba(255, 255, 255, 0.8);
    --cardBackground: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)) no-repeat;
    --cardBackgroundHover: rgba(0, 0, 0, 0.25);

    --primary-color-grad1: #7421FC;
    --primary-color-grad2: #7421FC ;
    --secondary-color-grad1: #7421FC;
    --secondary-color-grad2: #7421FC;
    --line-color: #e4e7eb; 
    --primary-gradient: linear-gradient(90deg, var(--primary-color-grad1) var(--primary-color-grad2));
    --secondary-gradient: linear-gradient(90deg, var(--secondary-color-grad1) var(--secondary-color-grad2));
    --background-hover: var(--primary-color);
    --sidebar-background: #fff; 
    --sidebar-background-hover: var(--white-hover); 
    --listview-background: #F8F9FA;
    --listview-background-lighter: #f3f3f3;
    --listview-background-darker: rgba(225, 225, 225, 0.4);
    --background-faded: #e4e7eb;
  
    --primary-color: #7421FC;
    --primary-color-80: #8758F9;
    --primary-color-60: #9170F9;
    --primary-color-40: #A18BFC;
    --primary-color-20: #A89AFC;
  
    --destructive-color: #F3025D;
    --destructive-color-80: #DF025A;
  
  
    --secondary-color: #7421FC;
    --secondary-color-80: #8758F9;
    --secondary-color-60: #9170F9;
    --secondary-color-40: #f8f8f8;
    --secondary-color-20: #f8f8f8;

    --pricing-sidebar-color: var(--sidebar-background);
  
    --secondary-color-faded: #058BDD;
    --secondary-color-light: rgba(5, 150, 221, 0.85);
    --secondary-gray: #e4e7eb;
    /*--secondary-gray-light: #000;*/
    --secondary-gray-light2: rgba(0, 0, 0, 0.75);
  
    --text-link-color: var(--primary-color);
    --text-color: #4e5266;
    --text-color-dark: rgba(0, 0, 0, 0.85);
    --background-color: #d0dae4;
    --default-icon-color: #7bd3c8;
    --editable-active-color: #F0F2F5;
    --offwhite-color: rgba(225, 225, 225, 0.1);
  
    --blankslate-heading-color: rgba(0, 0, 0, 0.85);
    --blankslate-subheading-color: rgba(0, 0, 0, 0.5);
  
    --accent-color-yellow: #fff;
    --accent-color-yellow-20: #fff;
    --accent-color-yellow-darker: #fff;
  
    --accent-color-green: #00B6A4 ;
    --accent-color-green-darker: rgb(21, 168, 154) ;
    --accent-color-green-80: #57C3B6;
    --accent-color-green-60: #66D2C8 ; 
    --accent-color-green-40: #AFE1DB;
    --accent-color-green-20: #D7F1ED; 
    
    --leftnav: #fff; 
    --scene-background: #F8F9FA;
    --topnav-background: #fff;
    --topnav-background-80: #F8F9FA;
  
    --fontFamily: "Work Sans";
  
    --buttonBackgroundDarkOpaque: rgba(0,0,0,0.35);
  
  
  

  }