:root {
    --main-color: linear-gradient(
      0deg,
      rgba(205, 108, 157, 1) 0%,
      rgba(205, 108, 127, 1) 100%
    );
    --dark-gray: #1c1c1c;
    --gray: #a7a7a8;
    --mz-background: rgb(10, 10, 10);
  
    --spring-easing: linear(
      0,
      0.009,
      0.035 2.1%,
      0.141,
      0.281 6.7%,
      0.723 12.9%,
      0.938 16.7%,
      1.017,
      1.077,
      1.121,
      1.149 24.3%,
      1.159,
      1.163,
      1.161,
      1.154 29.9%,
      1.129 32.8%,
      1.051 39.6%,
      1.017 43.1%,
      0.991,
      0.977 51%,
      0.974 53.8%,
      0.975 57.1%,
      0.997 69.8%,
      1.003 76.9%,
      1.004 83.8%,
      1
    );
  
    --bg: #000000;
    --clr-1: #00c2ff;
    --clr-2: #33ff8c;
    --clr-3: #ffc640;
    --clr-4: #e54cff;
  
    --blur: 1rem;
    --fs: 100px;
    --ls: clamp(-1.75px, -0.25vw, -3.5px);
  }
  
  ::-webkit-scrollbar-thumb {
    background: rgba(161, 173, 184, 0.5);
  }
  ::-webkit-scrollbar {
    background: none;
  }
  ::-webkit-scrollbar {
    height: 1em;
  }
  
  * {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  img {
    pointer-events: none;
  }
  
  .postinfobox {
    color: white;
    display: flex;
    background-color: rgba(30, 30, 30, 1);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    z-index: 99;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(141, 141, 141, 0.4);
    border-radius: 5px;
    overflow: hidden;
    animation-duration: 1.3s;
  }
  #PostCreator {
    color: rgb(204, 204, 204)
  }
  .postinfobox > .info {
    width: 350px;
  }
  .postinfobox > .info > hr {
    width: 100%;
  }

  .ace-monokai {
    background-color: rgb(39, 40, 34, 0) !important;
  }
  .ace_active-line {
    background: #2020207b !important;
  }
  
  .bg-image {
    background-image: url("https://static.wixstatic.com/media/a562aa_e42003debbb04f138800c068edebb1aa~mv2.png");
    opacity: 0.1;

    filter: blur(8px);
    -webkit-filter: blur(8px);
    z-index: -1;
    position: fixed;
  
    height: 100%; 
    width: 100%;
    
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  .postinfobox > .codebox { 
    width: calc(100% - 400px);
    height: 100%;
    margin-right: 20px;
    background-color: rgba(30, 30, 30, 0.8);
  }
  
  
  
  /*.codebox {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    z-index: 4;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-color: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(60, 60, 60, 0.5);
    border-radius: 8px;
    overflow: hidden;
    animation-duration: 1.3s;
  }
  .codebox:before {
    filter: blur(13px);
    backdrop-filter: blur(10px);
  }

  /*.codebox *::-webkit-scrollbar {
    display: none;
  }*/
  
  @keyframes grow {
    0% {
      transform: translate(-50%, -50%) scale(0.9);
      opacity: 0;
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
  }
  @keyframes grow_in {
    0% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0.9;
    }
    100% {
      transform: translate(-50%, -50%) scale(0.9);
      opacity: 0;
    }
  }
  
  @keyframes Darken {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes UnDarken {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  
  .fullscreen {
    width: 100%;
    height: 100%;
    background: rgba(13, 13, 13, 0.9);
    position: absolute;
    z-index: 3;
    animation-duration: 1s;
  }
  .codebox {
    border-right: 1px solid rgba(141, 141, 141, 0.4);
  }
  .buttons {
    position: absolute;
    display: flex;
    right: 10px;
    top: calc(100% - 10px - 55px);
    bottom: 0; 
    z-index: 7;
    gap: 5px;
  }
  .codebox > .buttons {
    display: none;
  }
  .iconpad {
    padding-right: 5px;
  }
  .buttons > button {
    background: var(--main-color); /*rgba(31, 32, 31, 0.9);*/
    border: none;
    border-radius: 10px;
    width: 55px; 
    height: 55px;
    cursor: pointer;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    color: white;
  }
  .longbuttons > button > i {
    color: #ffffff; 
    padding-right: 5px;
  }
  .longbuttons {
    width: calc(400px - 23px);
  }
  .longbuttons > button {
    width: 100%;
    height: 45px;
  }
  #codeditor {
    width: 100%;
    height: 100%;
    font-size: 16px;
    background: none;
    backdrop-filter: none;
  }
  
  body {
    margin: 0;
    font-family: "Segoe UI";
    background: var(--mz-background) !important;
    color: #fefefe;
    position: relative;
    margin: 0;
    padding-bottom: 6rem;
  }
  
  p {
    color: var(--gray);
  }
  
  .PurpleNavBar {
    margin: auto;
    height: 40px;
    width: 100%;
    max-width: 843px;
    background: rgba(63, 23, 75, 0.4);
  
    border: rgb(50, 65, 88);
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
  }
  .smalltitle {
    display: none;
  }
  
  .PurpleNavBar > div {
    margin-top: 8px;
  }
  .Socials {
    list-style-type: none;
    display: flex;
    gap: 10px;
    padding: 0;
    margin: 0;
    vertical-align: middle;
  } 
  
  @media (max-width:580px) {
    .logo {
      display: none;
    }
    .title {
      display: none;
    }
    .smalltitle {
      display: block;
    }
  }
  @media (max-width: 992px) {
    .Socials {
      text-align: center;
      display: inline-block;
    }
    .Socials > li {
      display: inline-block;
      margin-right: 10px;
    }
    .center {
      width: 100% !IMPORTANT;
      padding: 5px;
    }
  }
  
  .logo {
    width: 67px;
    height: 67px;
    vertical-align: middle;
  }
  .header {
    padding: 60px 60px 60px 60px;
    height: 400px;
    text-align: center;
  
    background: rgba(50, 50, 50, 0.2);
    background-image: url("https://static.wixstatic.com/media/4139ba_5ce914f05d8842f89dc357daba7eb6c1~mv2.png/v1/fill/w_1367,h_400,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/4139ba_5ce914f05d8842f89dc357daba7eb6c1~mv2.png");
    background-position: center; /* Center the image */
    background-repeat-x: no-repeat; /* Do not repeat the image */
    background-size: 100% auto;
  
    color: white;
  }
  
  .button a {
    color: #e0e0e0;
    text-decoration: none;
  }
  
  .button a:hover:not(.active) {
    background-color: rgba(50, 50, 50, 0.3);
  }
  .active {
    /*background: #272727;
    background: linear-gradient(180deg, rgba(39,39,39,1) 0%, rgba(34,34,34,1) 100%);*/
  }
  
  .center {
    margin: 0 auto;
    width: 70%;
    padding: 20px;
  }
  
  .searchcontainer {
    width: 60%;
    height: 50px;
  }
  
  .search {
    width: 100%;
    display: flex;
    border-radius: 100px;
    border: 1px solid rgba(60, 60, 60, 0.5);
    height: 100%;
    background: rgba(30, 30, 30, 0.5);
  }
  @media (max-width: 992px) {
    .searchcontainer {
      width: 100%;
    }
    .searchButton {
      display: none !important;
    }
    .recentvideos {
       display: none;
    }
  }
  
  .searchTerm {
    width: 100%;
    overflow: hidden;
    padding: 5px;
    height: 100%;
    border: none;
    border-radius: 5px 0 0 5px;
    outline: none;
    background: none;
    margin: auto;
    margin-left: 10px;
    color: #fefefe;
  }
  
  .searchButton {
    width: 60px; /*120px;*/
    height: calc(100% - 6px);
    border: 0;
    color: #fff;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    margin: auto;
    margin-right: 3px;
    text-aline: center;
    background: none;
  
    /*background: rgb(205, 108, 157);
    background: var(--main-color);*/
  }
  .searchButton > * {
    margin: auto;
    text-aline: center;
  }
  
  .Posts {
    display: grid;
    grid-template-columns: repeat(auto-fit, 266px);
    grid-row-gap: 20px;
    grid-column-gap: 20px;
    justify-content: center;
    overflow: clip;
    padding: 50px;
    margin: 0 auto;
    list-style: none;
  }
  
  .Posts > div {
    background: rgba(30, 30, 30, 0.5);
    border: 1px solid rgba(60, 60, 60, 0.5);
    border-radius: 10px;
    overflow: hidden;
    width: 266px;
    height: 183px;
    transition-duration: 200ms;
    cursor: pointer;
  }
  .Posts > div:hover {
    background: rgba(40, 40, 40, 0.6);
    transform: scale(1.05, 1.05);
    border: 1px solid rgba(70, 70, 70, 0.8);
    z-index: 1;
  }
  .Posts > div > img {
    height: 132px !important;
    width: 100%;
  }
  
  .Controls {
    color: white;
    /*display: grid;
    grid-template-columns: auto auto;*/
    margin: auto 0;
    margin-top: 4px;
    width: 80%;
    height: 40px;
    overflow: hidden;
  }
  .Controls > *:not(br) {
    margin: auto;
  
    max-width: 251px;
    width: 251px;
    max-height: 12px;
  
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .Controls > text {
    color: white;
  }
  
  .Controls > span {
    color: var(--gray);
  }
  /*.Controls > p {
    width: 165px;
    white-space: nowrap;
    margin: auto;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
  }
  
  .Controls > span {
    text-align: right !important;
    vertical-align: middle;
    
    width: 70px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    margin: auto;
    margin-left: auto;
    margin-right: 0;
  }*/
  
  .backgrounda {
    width: 100%;
    height: 100vh;
    z-index: -1;
    position: absolute;
    background: var(--mz-background);
    background-image: linear-gradient(
      196deg,
      #252525 0%,
      var(--mz-background) 40%
    );
  }
  .footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    background-color: rgba(50, 50, 50, 0.1);
    text-align: center;
  
    height: 138px;
  }
  
  .title {
    font-size: 35px;
    font-weight: 800;
    letter-spacing: var(--ls);
    position: relative;
    overflow: hidden;
    background: var(--bg);
    margin: 0;
  }
  
  .aurora {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    mix-blend-mode: darken;
    pointer-events: none;
  }
  
  .aurora__item {
    overflow: hidden;
    position: absolute;
    width: 60vw;
    height: 60vw;
    background-color: var(--clr-1);
    border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    filter: blur(var(--blur));
    mix-blend-mode: overlay;
  }
  
  .aurora__item:nth-of-type(1) {
    top: -50%;
    animation: aurora-border 6s ease-in-out infinite,
      aurora-1 12s ease-in-out infinite alternate;
  }
  
  .aurora__item:nth-of-type(2) {
    background-color: var(--clr-3);
    right: 0;
    top: 0;
    animation: aurora-border 6s ease-in-out infinite,
      aurora-2 12s ease-in-out infinite alternate;
  }
  
  .aurora__item:nth-of-type(3) {
    background-color: var(--clr-2);
    left: 0;
    bottom: 0;
    animation: aurora-border 6s ease-in-out infinite,
      aurora-3 8s ease-in-out infinite alternate;
  }
  
  .aurora__item:nth-of-type(4) {
    background-color: var(--clr-4);
    right: 0;
    bottom: -50%;
    animation: aurora-border 6s ease-in-out infinite,
      aurora-4 24s ease-in-out infinite alternate;
  }
  
  @keyframes aurora-1 {
    0% {
      top: 0;
      right: 0;
    }
  
    50% {
      top: 100%;
      right: 75%;
    }
  
    75% {
      top: 100%;
      right: 25%;
    }
  
    100% {
      top: 0;
      right: 0;
    }
  }
  
  @keyframes aurora-2 {
    0% {
      top: -50%;
      left: 0%;
    }
  
    60% {
      top: 100%;
      left: 75%;
    }
  
    85% {
      top: 100%;
      left: 25%;
    }
  
    100% {
      top: -50%;
      left: 0%;
    }
  }
  
  @keyframes aurora-3 {
    0% {
      bottom: 0;
      left: 0;
    }
  
    40% {
      bottom: 100%;
      left: 75%;
    }
  
    65% {
      bottom: 40%;
      left: 50%;
    }
  
    100% {
      bottom: 0;
      left: 0;
    }
  }
  
  @keyframes aurora-4 {
    0% {
      bottom: -30%;
      right: 0;
    }
  
    50% {
      bottom: 0%;
      right: 40%;
    }
  
    90% {
      bottom: 50%;
      right: 25%;
    }
  
    100% {
      bottom: -50%;
      right: 0;
    }
  }
  
  @keyframes aurora-border {
    0% {
      border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    }
  
    25% {
      border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;
    }
  
    50% {
      border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;
    }
  
    75% {
      border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;
    }
  
    100% {
      border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    }
  }
  
  #leftside {
    left: 60px;
  }
  
  #rightside {
    right: 60px;
  }
  .recentvideos {
    width: 90%;
  }
  .recentvideos > * {
    width: 316px;
    height: 176px;
    position: absolute;
    text-decoration: none;
    text-decoration-color: rgba(1,1,1,0)
  }
  a,p {
    text-decoration: none;
    text-decoration-style: none;
  }
  
  .recentvideos > a > img {
    width: 316px;
    height: 176px;
    float: right;
    border-radius: 9px;
  }
  @media (max-width: 992px) {
    .recentvideos {
      display: none;
    }
    .postinfobox {
      width: 80%;
      height: 70%;
    }
    .postinfobox > .info {
      display: none;
    }
    .codebox > .buttons {
      display: flex;
    }
    .postinfobox > .codebox {
      width: 100%;
      margin: 0;
      background-color: rgba(30,30,30,0.5);
    }
  }
  @media (max-width: 1300px) {
    .recentvideos > a {
      width: 200px;
      height: 106px;
    }
    .recentvideos > a > img { 
      width: 200px;
      height: 106px;
    }
  }
  
  body {
      font-family: "Segoe UI";
      color: white;
      background-color: #0a0a0a;
      margin: 0;
      padding: 0;
    }
  
  .listing {
    display: flex;
    gap: 10px;
    background-color: #2196F3;
    height: 160px;
    width: 800px;
    padding: 10px;
    background: rgba(30, 30, 30, 0.5);
    border: 1px solid rgba(60, 60, 60, 0.5);
    border-radius: 10px;
  }
  .Info > h3 {
    color: white;
    padding: 12px 0 12px;
  }
  @media (max-width: 702px) {
    .listing > .Image, .vhr  {
      display: none;
    }
    .listing {
      width: 100%;
    }
    .Info{
      padding: 0 30px
    }
  }
  
  .listing > .Image {
    background-repeat: no-repeat;
    background-size: cover;

    width: 280px;
    border-radius: 6px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
    .listing > .Info > * {
      margin: 0;
    }
    ._badge{
      background: #664dc6;
      border-radius: 5px;
      max-width: 80px;
      text-align: center;
      padding: 5px;
      color: white;
      
      line-height: 20px;
      height: 30px;
      text-decoration: none !important;
      transition: 100ms;
    }
    a._badge:hover{
      color: white;
      opacity: 0.7;
    }
    .badges {
      display: flex;
      gap: 10px;
    }
    .buttons > * {
      cursor: pointer;
    }
    .listings {
      gap: 10px; 
      display: grid;
      align-items: center;
      justify-content: center;
    }
    
    .vhr {
      width: 1px;
      height: 100%;
      background: rgba(60,60,60,0.5);
      margin-right: 5px;
      margin-left: 5px;
    }
   
    .red{
      background-color: #fa6166;
    }
    .blue{
      background-color: #454ebe;
    }
    .orange{
      background-color: #c66b4d;
    }
    .green {
     background-color: #427e42;
    }