@use "palette" as p;

h1, h2, h3, h4 {
    font-family: p.$font-title;
    font-weight: bold;
}
  
h1 {
    font-size: 26px;
    text-shadow: none;
    padding-left: 0px;
    margin-left: 10px;
}

h2 {
    font-size: 20px;
    border-bottom-width: 5px;
    border-bottom-style: solid;
    margin-right: 20px;
    padding-bottom: 5px;
    padding-left: 10px;
}

h3 {
    font-size: 16px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    margin-left: 0px;
    margin-right: 20px;
    padding-bottom: 5px;
    padding-left: 10px;
}

h4 {
    font-size: 16px;
    text-decoration: underline;
    text-underline-offset: 7px;
    padding-left: 0px;
    margin-left: 0px;
}

b, strong {
    font-family: p.$font-strong;
    font-weight: 900;
    text-shadow: 0px 0px 0.1em #777777;
    letter-spacing: 1px;
}

i, em{
    font-family: p.$font-italic;
}

#main-title {
    font-family: p.$font-title;
}

.vp-feature-header {
    font-family: p.$font-title;
}

.vp-description {
    font-family: p.$font-title;
}

figure{
    margin-left: 0px;
    margin-right: 0px;
    
}

figcaption {
    font-size:12px;
    padding-top:5px;
    padding-bottom:5px;
    color:#606060;
    text-align: center;
}

figcaption code {
    background: inherit !important;
    color: #909090;
    padding: 2px;
}

[data-theme=light] figcaption code {
    color: #202020;
}

.centre-image {
    max-width: 100%;
    max-height: 600px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

th {
    background-color: rgba(red(p.$theme-color), green(p.$theme-color), blue(p.$theme-color), 20%);
}

// custom styles

blockquote {
    border-color:p.$quote-color!important;
    color:p.$quote-color;
}

/*code:not(a) {
    background-color: rgba(red(p.$code-color), green(p.$code-color), blue(p.$code-color), 5%) !important;
    color: p.$code-color;
}*/
  
@media (min-width: 420px) {
    body {
      letter-spacing:.5px;
      font-size:16px!important
    }
    blockquote {
      border-width:0px;
      border-style:solid;
      border-radius:0px;
      border-left-width:5px;
      padding-left:10px;
      padding-right: 10px;
      background-color: rgba(red(p.$quote-color), green(p.$quote-color), blue(p.$quote-color), 5%) !important;
    }
    div[class*=language-].line-numbers-mode .line-number {
      line-height:unset!important
    }
    .line-numbers-mode {
      border-width:0px;
      border-left-width:5px;
      border-style: solid;
      border-radius: 0px!important;
      border-color: p.$code-color;
      color: p.$code-color;
      background-color: rgba(red(p.$code-color), green(p.$code-color), blue(p.$code-color), 5%) !important;
    }
    /*.vp-code-tab-nav {
      padding-bottom:20px
    }
    .vp-code-tab .line-numbers-mode {
      border-width:0px;
      padding-top:1px;
      padding-bottom:1px
    }
    // The following is needed for some code block styles to fix vertical alignment
    /*pre,
    code {
      padding-top:3px!important;
      padding-bottom:3px!important;
    }*/
}


html[data-theme="dark"] ::marker {
    color: #666666;
}

::marker {
    color: #666666;
}
