@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  --font-body:   inter,-apple-system,BlinkMacSystemFont,roboto,segoe ui,Helvetica,Arial,sans-serif;
  --font-header: "Fira Sans Condensed",Tahoma,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:   SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  --font-fancy:  'Lobster Two',cursive;
}


:root {
  --color-white:      #FFFFFF;
  --color-red:        #E74A2F;
  --color-orange:     #fa7b3c;
  --color-yellow:     #EFB73E;
  --color-gold:       #e5bf00;
  --color-green:      #38B44A;
  --color-darkgreen:  #2c8475;
  --color-blue:       #007bff;
  --color-lightblue:  #cce5ff;
  --color-dodgerblue: #1E90FF;
  --color-darkblue:   #003087;
  --color-purple:     #772953;
  --color-black:      #121212;
  --color-graylight:  #EAE9EA;
  --color-gray:       #696969;
  --color-tan:        #d9d9d9;
}

.fira {
  font-family: var(--font-header);
}

.fancy{
  font-family: var(--font-fancy);
  font-weight: 400;
  font-style: italic;
}

.slimtitle {
  font-family: var(--font-header);
  font-weight: 500;
  font-size: 55px;
  margin-block-start: 0em;
  margin-block-end: 0.1em;
}

.remark-code, .remark-inline-code {
  font-family: var(--font-mono);
}

.remark-code {
  font-size: 20px;
}

.white {
  color: var(--color-white);
}
.red {
  color: var(--color-red);
}
.orange {
  color: var(--color-orange);
}
.yellow {
  color: var(--color-yellow);
}
.green {
  color: var(--color-green);
}
.darkgreen {
  color: var(--color-darkgreen);
}
.blue {
  color: var(--color-blue);
}
.darkblue {
  color: var(--color-darkblue);
}
.purple {
  color: var(--color-purple);
}
.black {
  color: var(--color-black);
}
.gray {
  color: var(--color-gray);
}

/* Additional font sizes */
.small {
  font-size: 70%;
}
.large {
  font-size: 160%;
}
.code10 .remark-code {
  font-size: 10%;
}
.code20 .remark-code {
  font-size: 20%;
}
.code30 .remark-code {
  font-size: 30%;
}
.code40 .remark-code {
  font-size: 40%;
}
.code50 .remark-code {
  font-size: 50%;
}
.code60 .remark-code {
  font-size: 60%;
}
.code70 .remark-code {
  font-size: 70%;
}
.code80 .remark-code {
  font-size: 80%;
}
.code90 .remark-code {
  font-size: 90%;
}
.code100 .remark-code {
  font-size: 100%;
}

.font10 {
  font-size: 10%;
}
.font20 {
  font-size: 20%;
}
.font30 {
  font-size: 30%;
}
.font40 {
  font-size: 40%;
}
.font50 {
  font-size: 50%;
}
.font60 {
  font-size: 60%;
}
.font70 {
  font-size: 70%;
}
.font80 {
  font-size: 80%;
}
.font90 {
  font-size: 90%;
}
.font100 {
  font-size: 100%;
}
.font110 {
  font-size: 110%;
}
.font120 {
  font-size: 120%;
}
.font130 {
  font-size: 130%;
}
.font140 {
  font-size: 140%;
}
.font150 {
  font-size: 150%;
}
.font160 {
  font-size: 160%;
}
.font170 {
  font-size: 170%;
}
.font180 {
  font-size: 180%;
}
.font190 {
  font-size: 190%;
}
.font200 {
  font-size: 200%;
}


/**************/
/**** text ****/
/**************/
body { font-family: Verdana, Helvetica, sans-serif;}

h1, h2, h3 {
  font-family: Verdana, Serif;
  font-weight: normal;
  text-shadow: none;
}

h1 {
  color: #fff;
  font-size: 2em;
}

h2, h3 {
  color: #e22;
}

p,  a,  code {
  font-size: 0.95em;
  color: #000;
}

ul, li {
  font-size: 0.95em;
  color: #000;
}

a, a > code {
  color: #FF0000;
}

ul li::marker {
  color: #ff0000; !important
}


/**********/
/* remark */
/**********/
.remark-code-line-highlighted {
  background-color: #FF000060;
}

.remark-slide-content {
  border-top:    20px solid white;
  border-left:  20px solid white;
  border-bottom: 20px solid white;
  background-color: #eff;
}

.remark-slide-content > h1 {
  color: #e22;
}

.remark-slide-number {
  display: none;
}
                    

.middle {
  border: none;
}

.no-border {
  border: none; !important
}


/***************/
/* title slide */
/***************/

.title-slide {
  background-color: #eff ;
  padding: 30px ;
  background-origin: padding-box;
  background-size: 100%, 100%;
  background-position: 100% 0%, left;
  background-image:  url("ascor_header.png");
  border: 20px solid white ;
}

.title-slide h1,
.title-slide h2,
.title-slide h3{
  border: none;
  color: #e22;
  text-shadow: none;
}

.title-slide h3{
  font-size: 90%;
}

.title-slide .remark-slide-number {
  display: none;
}

/***************/
/***** red *****/
/***************/
.red {
  border-color: #e22;
  text-shadow: none;
}

.red h1 {
  color: #fff;
}

.middle.red,
.red.middle {
  background-color: #e22;
}

.middle.red h1,
.red.middle h1,
.middle.red h2,
.red.middle h2,
.middle.red h3,
.red.middle h3,
.red.middle p {
  color: #fff;
}

.red  h1,
.red  h2,
.red  h3{
  border: none;
  color: #000;
  text-shadow: none;
}

.red.middle ul > li::marker ,
.middle.red ul > li::marker {
  color: #fff;
}

/***************/
/**** black ****/
/***************/
.black {
  background-color: #000;
  border-color: #fff;
  text-shadow: none;
  color: #fff;
}


.black  h1,
.black  h2,
.black  h3{
  border: none;
  color: #fff;
  text-shadow: none;
}

.black p,
.black a,
.black code {
  font-size: 0.95em;
  color: #fff;
}


.black ul,
.black li {
  font-size: 0.95em;
  color: #fff;
}



ul li::marker {
  color: #ff0000; !important
}

/***************/
/**** white ****/
/***************/

.white {
  background-color: #fff;
  border-color: #fff;
  text-shadow: none;
  color: #000;
}




/************************/
/* Logo on the side div */
/************************/
div.logo {
    position: fixed;
    left: 69%;
    bottom: 45%;
    height: 2.5em;
    width: calc(100% * .55); /* fix sidebar height */
    padding: 0.5em;
    opacity: 0.7;
    background-color: #fff;
    background-position: right;
    background-origin: content-box;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("ascor_side.png"),
    linear-gradient(70deg, #fff, #ffffff00 30%);
    transform: rotate(-90deg);
}




/*--- COLUMN LAYOUTS ---*/

.cols3 {
  width: 32%;
  float: left;
  text-align: left;
  margin-left: 5px;
  margin-right: 5px;
}
.leftcol {
  float: left;
  width: 49%;
}
.rightcol {
  float: right;
  width: 49%;
}
.leftcol55 {
  float: left;
  width: 54%;
}
.rightcol45 {
  float: right;
  width: 44%;
}
.leftcol45 {
  float: left;
  width: 44%;
}
.rightcol55 {
  float: right;
  width: 54%;
}
.leftcol60 {
  float: left;
  width: 59%;
}
.rightcol40 {
  float: right;
  width: 39%;
}
.leftcol40 {
  float: left;
  width: 39%;
}
.rightcol60 {
  float: right;
  width: 59%;
}
.leftcol65 {
  float: left;
  width: 64%;
}
.rightcol35 {
  float: right;
  width: 34%;
}
.leftcol35 {
  float: left;
  width: 34%;
}
.rightcol65 {
  float: right;
  width: 64%;
}
.leftcol70 {
  float: left;
  width: 69%;
}
.rightcol30 {
  float: right;
  width: 29%;
}
.leftcol30 {
  float: left;
  width: 29%;
}
.rightcol70 {
  float: right;
  width: 69%;
}
.leftcol75 {
  float: left;
  width: 74%;
}
.rightcol25 {
  float: right;
  width: 25%;
}
.leftcol25 {
  float: left;
  width: 25%;
}
.rightcol75 {
  float: right;
  width: 74%;
}
.leftcol80 {
  float: left;
  width: 79%;
}
.rightcol20 {
  float: right;
  width: 19%;
}
.leftcol20 {
  float: left;
  width: 19%;
}
.rightcol80 {
  float: right;
  width: 79%;
}


blockquote {
  border-left: solid 5px lightgray;
  padding-left: 1em;
  border: 3px solid var(--color-blue);
  border-radius: 10px; /* Rounded edges */
  background-color: var(--color-lightblue);
  font-family: var(--font-header);
  box-shadow: 4px 4px 8px 0 rgba(0,0,0,.2);
}