{% load static %}

<!DOCTYPE html>
<html>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Bootstrap -->
    <link rel="stylesheet" href="{% static 'styles/styles.css' %}" />
    <link rel="stylesheet" href="{% static 'styles/fonts.css' %}" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;1,100&family=Oswald:wght@300;500;700&family=Rubik+Storm&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@100;400;700;900&family=Montserrat:wght@100;200;400;600;800;900&family=Roboto+Condensed:wght@300;400;700&family=Roboto+Slab:wght@100;400;500;700;900&family=Rubik+Spray+Paint&family=Ubuntu:wght@300;400;700&family=Unbounded:wght@200;400;500;800;900&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"
    ></script>
    {% comment %} name {% endcomment %}
    <title>{{design.cafename}}</title>
    <style>

      @import url("https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;1,100&family=Oswald:wght@300;500;700&family=Rubik+Storm&display=swap");
      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;400;700;900&family=Montserrat:wght@100;200;400;600;800;900&family=Roboto+Condensed:wght@300;400;700&family=Roboto+Slab:wght@100;400;500;700;900&family=Rubik+Spray+Paint&family=Ubuntu:wght@300;400;700&family=Unbounded:wght@200;400;500;800;900&display=swap');

      div,
      a,
      p,
      h1,
      h3,
      h6 {
        color:{{design.fontcolor}};
        font-family: '{{design.font.name}}', {{design.font.fontfamily}};
      }

      {% comment %} .section-products {
        background-image: url("{% static "styles/Unknown.png" %}"); 
      } {% endcomment %}


    </style>
    {% comment %}
    <style type="text/css" media="screen, print">
      @font-face {
        font-family: "base";
        src: url("https://fonts.googleapis.com/css2?family=Rubik+Storm&display=swap");
      }
      body {
        font-family: "base";
      }
    </style>
    <style type="text/css">
      @font-face {
        font-family: "TT Norms Pro";
        src: url(" {% static "user/fonts/TTNormsPro-Bold.eot" %} ");
        src: local("TT Norms Pro Bold"), local("TTNormsPro-Bold"),
          url("{% static "user/fonts/TTNormsPro-Bold.eot?#iefix" %} ")
            format("embedded-opentype"),
          url("{% static "user/fonts/TTNormsPro-Bold.woff2" %}") format("woff2"),
          url("{% static "user/fonts/TTNormsPro-Bold.ttf" %}")
            format("truetype");
        font-weight: bold;
        font-style: normal;
      }
      .section-products {
        background-image: url("{% static "/images/Unknown.png" %}"); 
      }

      @font-face {
        font-family: "TT Norms Pro";
        src: url("{% static "user/fonts/TTNormsPro-Regular.eot" %}");
        src: local("TT Norms Pro Regular"), local("TTNormsPro-Regular"),
          url("{% static "user/fonts/TTNormsPro-Regular.eot?#iefix" %}")
            format("embedded-opentype"),
          url("{% static "user/fonts/TTNormsPro-Regular.woff2" %}")
            format("woff2"),
          url("{% static "user/fonts/TTNormsPro-Regular.woff" %}")
            format("woff"),
          url("{% static "user/fonts/TTNormsPro-Regular.ttf" %}")
            format("truetype");
        font-weight: normal;
        font-style: normal;
      }
    </style>
    {% endcomment %}
  </head>
  <body>
    {% block content %} {% endblock %}
  </body>
</html>
