High Readability Workflowy Theme

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&family=Open+Sans:wght@700&display=swap');


/* Background Gradient  */
body{
  background-image: url("https://i.imgur.com/1saSiMA.png"), linear-gradient(170deg, #2a2a2a 0%, #101111 100%);
}


/* Background Image */
#app {

    background-image: url("https://i.imgur.com/bR6tVr0.png");
background-position: center;
background-attachment: fixed;
background-repeat:no-repeat;
background-size: 20px 20px
}

div.page.active._s72lqz {
  background-color: transparent;
}

/* Transparent header */
div.header {
  background: transparent;
}

/*------ Remove inner background ------*/
/* Remove full page width bg */
div.page.active.showCompleted._8h6phk {
  background: transparent;
}

/* Remove background when hiding completed and full width*/
div.page.active {
    background: transparent;
}

/* Remove background when full pagewidth off */
div.page.active.showCompleted._1u7ahwt {
  background: transparent;
}

/* Sidebar backgroud */
._mlv2s1 {
  background: linear-gradient(342deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100%);
}

._1943h9q {
  background: linear-gradient(342deg, #030303 0%, rgba(10,10,20,1) 100%);
}


/* Bullet Opacity/Color */
._1k6bd1e{
  opacity: 30%;
  color:mintcream;
}

/* Bullet Circle */
svg circle{
  opacity:50%;

/* uncomment this to change size/shape
  cx: 9;
  cy: 9;
  r: 2;
  */
}

a.bullet {
  background-clip:content-box;
  backgroud-color:yellow;
}

/*Fix Highlight */
::selection{
  opacity:0%;

}
/* Search Results Highlights Color */
.contentMatch {background-color: rgba(100, 200, 200, .4);}

/* Tags */
.contentTag {

  color: #2a2a2a;

  font-weight:400;
  border-style:solid;
  border-width:1px;
  text-decoration:none;
  text-decoration-line:none;
  text-decoration-thickness:0px;
  padding: 2px 7px 2px 6px;
  background-color:#00c9fe;
  border-radius:20px;}

/*----- Text -----*/


/* Default Text - Uncomment to enable highlighting where you're typing*/
/* div.content {
  font-family: Helvetica;

  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.01em;
  opacity: 90%;
}

div.content:focus-within{
opacity:100;
} */

._1ywey9q {
  color:gray !important;
}

/* Increase line spacing */
div.name {
  display:block;
  margin-top: 1.5px;
}

/* Time & Date */
time {
  color:#aaf9f9;
  font-size:14px;
  font-weight:400;
  border-style:solid;
  border-width:1px;
  text-decoration:unset;
  border-color:mediumturquoise;
  padding: 0.5px 5px 0.5px 5px;
  background-color:#115111;
  border-radius:5px;

  }


/******* Color Styles *******/
/* Colored */

span.colored.c-red {
    background: -webkit-linear-gradient(0deg, #FF6512, #FF5966);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


span.colored.c-orange {
      background: -webkit-linear-gradient(60deg,#F98012, #F9B901 70%, #fff1a2 99% );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}

/* Yellow Heading */
span.colored.c-yellow {
  font-size: 24px;
font-family: 'Helvetica', sans-serif;
  font-weight: 700;
  margin: 5px 0px 10px 0px;
  letter-spacing: 0px;
background: -webkit-linear-gradient(0deg,
      #FF9C19,
      #FFD119 50%,
      #fff1a2 98%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}

span.colored.c-green {
  background: -webkit-linear-gradient(0deg, #1fe10f, #78ff6c 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

span.colored.c-teal {
  background: -webkit-linear-gradient(0deg, #2cd185, #00e8ab 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

span.colored.c-sky {
  background: -webkit-linear-gradient(0deg, #5afaeb,#bcf0fe 50%);
  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;
}

span.colored.c-blue {
  background: -webkit-linear-gradient(180deg, #00A9C2,#00c9fe 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

span.colored.c-purple {
  background: -webkit-linear-gradient(0deg, #9565E2, #B594EB);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

span.colored.c-pink {
  background: -webkit-linear-gradient(0deg, #f78ae0, #fdb3ed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

span.colored.c-gray {
  background: -webkit-linear-gradient(0deg, #767777, #767777);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}




/* Highlight Colors */

span.colored.bc-red {
background-color: #FF0000;
  border-radius: 4px;
  padding: 2px 6px 2px 6px;
}

span.colored.bc-orange {
background-color: #FFAA11;
color:#333447;
  border-radius: 4px;
  padding: 2px 6px 2px 6px;
}

span.colored.bc-yellow {
background-color: #FFFF11;
color:#333447;
  border-radius: 4px;
  padding: 2px 6px 2px 6px;
}

span.colored.bc-green {
background-color: #AAFF11;
color:black;
  border-radius: 4px;
  padding: 2px 6px 2px 6px;
}

span.colored.bc-teal {
background-color: #00FFD0;
color:#333447;
  border-radius: 4px;
  padding: 2px 6px 2px 6px;
}

span.colored.bc-sky {
  border-radius: 4px;
  padding: 2px 6px 2px 6px;
}
span.colored.bc-blue {
  border-radius: 4px;
  padding: 2px 6px 2px 6px;
}
span.colored.bc-purple {
  border-radius: 4px;
  padding: 2px 6px 2px 6px;
}
span.colored.bc-pink {
  border-radius: 4px;
  padding: 2px 6px 2px 6px;
}

span.colored.bc-gray {
  font-size: 22px;
  display: inline-flex;
  background: linear-gradient(170deg, #495567, #2a3135);
  font-weight: 400;
  letter-spacing: .5px;
  border-radius: 5px;
  margin: 3px 0px 0px 0px;
  padding: 8px 15px 10px 15px;
  line-height: 1.5;
  text-shadow: 1px 3px 3px #1e1e1e;

}


/******* Animations *******/
/* ------- Fade In ------------ */
/* div.content {
  transition: .0s ease-in-out;
  animation: fadeIn .3s;
}


@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
 */



/* ---Scale Up Vertically From Bottom-----
div.content {

  --- animation-delay: 0.2s; ---
  animation-name: scale-up-ver-bottom;
  animation-duration: 350ms;
  animation-delay: calc(var(--animation-order) * 100ms);
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}

@keyframes scale-up-ver-bottom {
  0% {
    transform: scaleY(0.0);
    transform-origin: 0% 100%;
  }
  100% {
    transform: scaleY(1);
    transform-origin: 0% 100%;
  }
} */


/* ------ Slide from right -----
div.content {
  display: block;
  animation-name: animateIn;
  animation-duration: 350ms;
  animation-delay: calc(var(--animation-order) * 100ms);
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}


@keyframes animateIn {
  0% {
    opacity: 0;
    transform: scale(0.6) translateY(-8px);
  }

  100% {
    opacity: 1;
  }
}
 */