body
{
    font-family: 'Poppins', sans-serif;
}
#onWriting
{
    font-family: 'Itim', cursive;
}

.wave {
  animation-name: wave-animation;  /* Refers to the name of your @keyframes element below */
  animation-duration: 2.5s;        /* Change to speed up or slow down */
  animation-iteration-count: infinite;  /* Never stop waving :) */
  transform-origin: 70% 70%;       /* Pivot around the bottom-left palm */
  display: inline-block;
}

@keyframes wave-animation {
    0% { transform: rotate( 0.0deg) }
   10% { transform: rotate(14.0deg) }  /* The following five values can be played with to make the waving more or less extreme */
   20% { transform: rotate(-8.0deg) }
   30% { transform: rotate(14.0deg) }
   40% { transform: rotate(-4.0deg) }
   50% { transform: rotate(10.0deg) }
   60% { transform: rotate( 0.0deg) }  /* Reset for the last half to pause */
  100% { transform: rotate( 0.0deg) }
}

body
{
    /*
    background-color: rgba(229, 229, 247, 0.1);

background-size: 40px 40px;
background-image:  repeating-linear-gradient(0deg, rgba(229, 229, 247, 0.04), #444cf7 2px, rgba(229, 229, 247, 0.05) 2px, rgba(229, 229, 247, 0.05)); */
    
}

.wavy:hover
{
                 text-decoration-line: underline !important;
             text-decoration-style: wavy !important;
                text-decoration-color:darkseagreen !important; 
            text-decoration-skip-ink: none;
}

.doty:after
{
                content: "  ·  ";
                color: darkseagreen;
       display:inline-block;
       margin-left:10px!important;
}


.liney:after
{
                content: "  |  ";
                color: darkseagreen;
       display:inline-block;
       margin-left:10px!important;
}

.no-scroll {
    overflow-y: hidden;
}

.head-space
{
    margin-left:10px!important;
 
}

#insights
{
    padding-bottom:20px;
}

#insights:hover
{
    transition: all .2s ease-in-out; 
    transform: scale(1.4); 
}

#message-box
{
      height:auto;
}
.paper{
background-color: #ffffff;
opacity: 0.8;
background-size: 20px 35px;
background-image:  repeating-linear-gradient(0deg, #A78BFA, #A78BFA 1px, #ffffff 1px, #ffffff);
    line-height: 3rem;
    }

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
    
}

.tab-content2 {
  display: none;
}

.tab-content2.active {
  display: block;
    
}

button.active
{
    --tw-text-opacity: 1;
color: rgba(124, 58, 237, var(--tw-text-opacity));
    font-weight: 600;
    	border-bottom-width: 2px;
  --tw-border-opacity: 1;
border-color: rgba(196, 181, 253, var(--tw-border-opacity));
}

.modal
{

}
.modal.show, .modal2.show,.modal3.show,.modal4.show
{
     transition:all 350ms ease-in-out;
}

#offWriting:before
{
    content: "My Writing Philosophy"
}

.clock:hover
{
  animation-name: spin;
  animation-duration: 400ms;
  animation-iteration-count: 2;
  animation-timing-function: linear; 
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(90deg);
    }
}

 .cc ol {
   list-style: none;
   counter-reset: item;
 }
 .cc li {
   counter-increment: item;
   margin-bottom: 5px;
 }
.cc li:before {
   margin-right: 10px;
   content: counter(item);
   background: darkseagreen;
   border-radius: 100%;
   color: white;
   width: 1.5em;
   text-align: center;
   display: inline-block;
 }

  .ccs ol {
   list-style: none;
   counter-reset: item;
 }
 .ccs li {
   counter-increment: item;
   margin-bottom: 15px;
    
 }
.ccs li:before {
   margin-right: 10px;
   content: counter(item);
   background: #AF57B0;
   border-radius: 100%;
   color: white;
   width: 1.5em;
   text-align: center;
   display: inline-block;
 }

.img-border
{
    border:0px solid ;
    box-shadow: 4px 4px rgba(136, 136, 136, 0.52);
    border-radius: 25px
}

.step{
    border-right:3px #8b5cf6 solid;
    height:2.3em;
     padding-right: 8px;
}

.step-3{
    border-right:3px #8b5cf6 solid;
    height:2.3em;
    padding-right: 8px;
}

.story
{
  
    cursor: pointer;
 
}
.story:hover
{
  
    cursor: pointer;
   border-bottom: 3px dashed #c0b2ff;
}

.gdoc
{
    border:0px solid ;
    box-shadow: 1px 5px 10px 10px rgba(136, 136, 136, 0.52);
    border-radius: 25px;
  overflow:hidden;
        
}

iframe body::-webkit-scrollbar 
{
 width: 132px;
}

.link-close
{
    border-bottom: 2px dashed #c5b7ff;
    cursor: pointer;
}

.link-close:hover
{
    border-bottom: 2px solid #603aff;
}

.modal-content5
{
    width: 100%;
    height: 100%;
    padding: 0px;
}

.clock-sw
{
      fill: #EBD71C;
}