@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800|Raleway|Inter:400,400i,700,700i&display=swap');

:root {
  --main-font-size: 16px;
  
  --header-font-fam: "Raleway";
  --body-font-fam: "Inter";
  
  --margin-size-s: 10px;
  --margin-size-m: 20px;
  --margin-size-l: 30px;
  --margin-size-xl: 50px;
  
  /** Custom COlor **/
  --color1: #000;
  --color2: #FFD700; /** main color **/
  --color3: lightgrey; 
  --color4: orange;
  --color5: #f5f8fa;
  --color6: white;
  
  /** Alpha Color **/
  --TColor1: rgba(0,0,0,0.1);
  --TColor1-2: rgba(0,0,0,0.3);
  --TColor1-3: rgba(0,0,0,0.5);
  --TColor2: rgba(255,215,0,0.8);
  --TColor3: rgba(255,255,255,0.88);
}

html, body{
  font-size: var(--main-font-size);
  font-family: var(--body-font-fam);
}

body{
  background: url('../img/ShinyBackground.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

h1, h2, h3, h4, h5{
  font-family: var(--header-font-fam);
}

h1{
  font-size: 1.5em;
}

d-article h2, h2{
  font-size: 1.3em;
  border: none;
  margin: 1rem 0 0rem 0;
}

d-article h3, h3{
  font-size:1.15em;
}

.title{
  display: none;
}

d-article{
  background-color: var(--TColor3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  -o-backdrop-filter: blur(5px);
  -ms-backdrop-filter: blur(5px);
  -mz-backdrop-filter: blur(5px);
}

.distill-site-nav {
  color: var(--Color1);
  background-color: var(--TColor2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  -o-backdrop-filter: blur(5px);
  -ms-backdrop-filter: blur(5px);
  -mz-backdrop-filter: blur(5px);
}

.distill-site-nav:hover{
  background: linear-gradient(15deg, var(--color2), var(--color6));
  box-shadow: 0px 5px 15px var(--TColor1);
}

.distill-site-nav a:hover{
  color: var(--Color1);
  text-decoration: underline;
}

.distill-site-nav.distill-site-footer{
  border-top: 1px solid var(--color3);
}

.distill-site-nav:hover.distill-site-footer{
  box-shadow: none;
}

.d-contents nav ul {
  font-family: var(--body-font-fam);
}

.toc:hover,
.l-body img:hover,
d-article>p>img:hover{
  box-shadow: 0px 0px 35px var(--TColor1);
  border-radius: 10px;
  padding: 50px;
}

.toc:hover{
  background: linear-gradient(163deg, var(--color2), var(--color6));
}

.l-body img:hover,
d-article>p>img:hover{
  background-color: var(--color6);
}

.toc:hover{
  z-index:100;
}

.l-body img:hover,
d-article>p>img:hover{
  cursor: zoom-in;
}

a:hover i.fa{
  color: var(--color4);
}

d-article .daList li {
  margin-bottom: 0em;
}

pre.sourceCode.r{
  padding-top: var(--margin-size-m);
  padding-bottom: var(--margin-size-m)
}

div.sourceCode{
  box-shadow: 0px 0px 45px var(--TColor1);
}

.pagedtable{
  background-color: var(--color6);
}

summary{
  cursor: pointer;
}
summary:hover{
  background: linear-gradient(163deg, var(--color6), var(--color2));
  box-shadow: 0px 0px 45px var(--TColor1);
  border-radius: 10px;
  padding-left: 10px;
}

.distill-site-header .logo img{
  max-height: 30px;
}

/** Transition **/
.distill-site-nav,
.distill-site-nav:hover,
.distill-site-nav a:hover,
.distill-site-nav a,
.toc,
.toc:hover,
.l-body img,
.l-body img:hover,
a i.fa,
a:hover i.fa,
d-article table tr:hover img,
d-article table tr img,
summary,
summary:hover,
d-article>p>img,
d-article>p>img:hover{
  transition: all 0.25s ease;
}

.toc:hover, 
.l-body img:hover,
d-article>p>img:hover{
  transform: scale(1.2);
}