/******************************************************************
 * Define the basic variables for the style
 * Relocate all variables for dv here
 * Put all :root stuff here
 */ 

:root{
     color-scheme:light dark;
     --dv-width:1180px;
    --dv-content-width:760px;
    --dv-radius:0px;
    --dv-radius-lg:0px;
     --dv-space-xs:.5rem;
    --dv-space-sm:.875rem;
    --dv-space-md:1.5rem;
    --dv-space-lg:2.25rem;
    --dv-space-xl:3.5rem;
     --dv-bg:#f5f7fb;
    --dv-bg-alt:#edf1f7;
    --dv-surface:#fff;
    --dv-surface-soft:#f9fbfe;
     --dv-text:#263247;
    --dv-heading:#111a2b;
    --dv-muted:#64748b;
    --dv-border:rgba(25,45,76,.16);
     --dv-accent:#007b91;
    --dv-accent-strong:#005d70;
    --dv-accent-soft:rgba(0,123,145,.1);
     --dv-pink:#c43d7d;
    --dv-purple:#7546b5;
    --dv-peach:#b85d19;
    --dv-success:#167451;
     --dv-shadow:0 10px 30px rgba(27,43,70,.08);
    --dv-shadow-lg:0 22px 60px rgba(27,43,70,.12);
     --dv-transition:180ms ease;
}




/******************************************************************
 * All general wildcard style rules
 * 
 * html, body stuff
 */


 *,*::before,*::after{
    box-sizing:border-box
}

 html{
    scroll-behavior:smooth;
   /* background:var(--dv-bg) */
	 
	   background: radial-gradient(ellipse 700px 500px at 4% 4%, #28384a 0%, transparent 75%),
              radial-gradient(ellipse 680px 720px at 98% 64%, #221b3c80 0%, transparent 80%),
              linear-gradient(120deg, #1e2430, #11141e 70%);
	 
	 
}


 body{
    margin:0;
    color:var(--dv-text);
    background:var(--dv-bg);
    font:400 16px/1.65 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased
}

 body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.45;
    background:radial-gradient(circle at 12% 4%,var(--dv-accent-soft),transparent 28%),radial-gradient(circle at 92% 12%,rgba(117,70,181,.07),transparent 30%)
}

 blockquote{
    padding:1rem 1.25rem;
    background:var(--dv-accent-soft);
    border-left:3px solid var(--dv-accent)
}


code{
    padding:.12em .35em;
    background:var(--dv-bg-alt);
    border-radius:0px
}


pre{
    padding:1.25rem;
    overflow:auto;
    color:var(--dv-text);
    background:var(--dv-bg-alt);
    border:1px solid var(--dv-border);
    border-radius:var(--dv-radius)
}

	pre code{
	    padding:0;
	    background:transparent
	}




/******************************************************************
 * link stylings
 * 
 * a, a:hover, etc.
 */

 a{
    color:var(--dv-accent);
    text-underline-offset:.2em;
    transition:color var(--dv-transition)
}


a:hover{
    color:var(--dv-accent-strong)
}






/******************************************************************
 * Header stylings
 * 
 * h1 - h6
 */

 h1,h2,h3,h4,h5,h6{
    color:var(--dv-heading);
    font-family:Quantico;
    line-height:1.2
}

h1{
    font-size:clamp(2.25rem,5vw,3.75rem)
}
h2{
    font-size:clamp(1.6rem,3vw,2.35rem)
}
h3{
    font-size:1.4rem
}





/******************************************************************
 * paragraph stylings
 * 
 * p
 */

 p,ul,ol,blockquote,pre,table{
    margin-top:0;
    margin-bottom:1.35em
}






/******************************************************************
 * img selector rules
 * 
 * img
 */

img{
    max-width:100%;
    height:auto
}

figure{
    margin:0 0 1.5rem
}


/******************************************************************
 * Buttons, inputs, forms, etc.
 * 
 * html, body stuff
 */

 button,input,select,textarea{
    font:inherit
}




input[type=text],input[type=email],input[type=url],input[type=search],input[type=password],textarea,select{
    max-width:100%;
    padding:.75rem .9rem;
    color:var(--dv-text);
    background:var(--dv-surface);
    border:0px solid var(--dv-border);
   /* border-radius:var(--dv-radius) */
}


 input:focus,select:focus,textarea:focus{
    outline:1px solid var(--dv-accent-soft);
    border-color:var(--dv-accent)
}




 button,input[type=submit],.button,.wp-element-button{
    padding:.72rem 1rem;
    color:#fff;
    background:var(--dv-accent);
    border:0;
    /* border-radius:var(--dv-radius); */
    font-weight:700;
    cursor:pointer;
    transition:background var(--dv-transition),transform var(--dv-transition)
}
button:hover,input[type=submit]:hover,.button:hover{
    background:var(--dv-accent-strong)
}




/******************************************************************
 * table rules
 * 
 * table, th, td
 */


 table{
    width:100%;
    border-collapse:collapse;
    background:var(--dv-surface)
}

th,td{
    padding:.8rem 1rem;
    text-align:left;
    border:1px solid var(--dv-border)
}

th{
    color:var(--dv-heading);
    background:var(--dv-bg-alt)
}





/******************************************************************
 * all .container stylings
 * 
 */

 .container{
    width:min(var(--dv-width),92%);
    margin-inline:auto
}







/******************************************************************
 * Screenreader styles
 * 
 */

.screen-reader-text{
    position:absolute!important;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
.screen-reader-text:focus{
    clip:auto!important;
    width:auto;
    height:auto;
    margin:0;
    padding:.75rem 1rem;
    top:.5rem;
    left:.5rem;
    z-index:100000;
    color:#111;
    background:#fff
}


/******************************************************************
 * All general wildcard style rules
 * 
 */
 :focus-visible{
    outline:5px solid var(--dv-accent);
    outline-offset:5px
}




/******************************************************************
 * Skip link style
 * 
 */


.dv-skip-link{
    position:fixed;
    left:1rem;
    top:.75rem;
    z-index:100000;
    transform:translateY(-150%);
    padding:.65rem 1rem;
    color:#fff;
    background:var(--dv-heading);
  /*  border-radius:var(--dv-radius) */
}
.dv-skip-link:focus{
    transform:none
}




/******************************************************************
 * dv-progress bar 
 * 
 */

 .dv-progress{
    position:fixed;
    inset:0 0 auto;
    height:2px;
    z-index:9999;
    background:transparent
}
.dv-progress span{
    display:block;
    width:100%;
    height:100%;
    transform:scaleX(0);
    transform-origin:left;
    background:linear-gradient(90deg,var(--dv-accent),var(--dv-purple),var(--dv-pink))
}




/******************************************************************
 * breadcrumbs 
 * 
 */
.dv-breadcrumbs{
    width:min(var(--dv-width),92%);
    margin:0 auto 1.25rem;
    color:var(--dv-muted);
    font-size:.75rem
}
.dv-breadcrumbs a{
    text-decoration:underline
}
.dv-breadcrumbs__separator{
    margin-inline:.45rem
}




/******************************************************************
 * table of contents
 * 
 */


.dv-toc__panel{
    position:sticky;
    top:1.5rem;
    padding:1rem;
    background:var(--dv-surface);
    border:1px solid var(--dv-border);
  /*  border-radius:var(--dv-radius); */
    box-shadow:var(--dv-shadow)
}
.dv-toc__links a{
    display:block;
    padding:.3rem 0;
    color:var(--dv-muted);
    font-size:.75rem;
    text-decoration:none
}
.dv-toc__links a.is-active{
    color:var(--dv-accent)
}
.dv-toc-h3{
    padding-left:.7rem!important
}


















 @media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto
    }
    *,*::before,*::after{
        animation-duration:.0ms!important;
        animation-iteration-count:0!important;
        transition-duration:.0ms!important
    }
}