<style type="text/css">
  {{/*  background  */}}
  {{ if .Site.Params.background }}
    {{ with .Site.Params.background }}
      body {
        background: {{ . | safeCSS }};
        background-position: top;
        background-size: cover;
        background-attachment: fixed;
        background-repeat: no-repeat;
      }
    {{ end }}
  {{ end }}
  {{/*  background ends  */}}

  {{/*  font color  */}}
  {{ if .Site.Params.fontColor }}
    {{ with .Site.Params.fontColor }}
      * {
        color: {{ . | safeCSS }}
      }
    {{ end }}
  {{ end }}
  {{/*  font color ends  */}}

  {{/*  theme color  */}}
  {{ if .Site.Params.themeColor }}
    {{ with .Site.Params.themeColor }}
      .u-theme-f, 
      .search-group>span, 
      .search-group-list label:hover, 
      .search-engines li label::first-letter, 
      .search-engines input:hover+label span, 
      .search-engines input:checked+label span, 
      .searchbox input, 
      #poetry, #poetry-author, 
      .card ul li:hover *, 
      .card ul li::first-letter, .card ul li i {
        color: {{ . | safeCSS }};
      }

      .search-engines input:checked+label span, 
      .searchbox input {
        border-bottom-color: {{ . | safeCSS }};
      }

      #search-button {
        background-color: {{ . | safeCSS }};
      }

      #tooltip {
        box-shadow: 0 0 5px {{ . | safeCSS }};;
      }
    {{ end }}
  {{ end }}
  {{/*  theme color ends  */}}

  {{/*  use blur theme  */}}
  {{ if .Site.Params.useBlur }}
    .blur, .card, 
    .searchbox form:hover, 
    .searchbox form:focus-within, 
    .search-group-list, 
    .search-engines input:hover+label span,
    .search-engines input:checked+label span {
      backdrop-filter: blur(.2rem);
      box-shadow: 0 0 10px rgb(0, 0, 0, 0.3);
    }
  {{ else }}
    .card,
    .searchbox form:hover, 
    .searchbox form:focus-within, 
    .search-engines input:hover+label span,
    .search-engines input:checked+label span {
      background-color: rgba(0, 0, 0, 0.08);
    }

    .blur, 
    .search-group-list {
      background-color: rgba(0, 0, 0, 0.3);
    }
  {{ end }}
  {{/*  use blur theme ends  */}}

</style>
