    <style>

        /*
        html {
          font-size: 10rem;
        }
        @include media-breakpoint-up(sm) {
          html {
            font-size: 12rem;
          }
        }
        @include media-breakpoint-up(md) {
          html {
            font-size: 14rem;
          }
        }
        @include media-breakpoint-up(lg) {
          html {
            font-size: 16rem;
          }
        }
        */

        body {
            background-color: #f1f1f1;
        }

        //#spinner { display:none; }
        //body.busy .spinner { display:block !important; }
        #spinner { visibility:hidden; }
        body.busy .spinner { visibility:visible !important; }

        .hidden {
            display: none;
        }

        .my-a {
            //background-color: #ff000055;
        }
        .my-li {
            //background-color: #00ff5511;
            //display: none;
        }
        .my-name {
            color: white;
            //color: hsl(46,50%,40%);
            margin-top: -80px;
            font-size: 0.8rem;
        }
        .my-info {
            //color: black;
            //color: hsl(46,50%,40%);
            font-size: 0.6rem;
        }
        .my-name-preview {
            font-family: mymondabold;
            //font-family: my-arial-unicode;
            //color: white;
            color: hsl(46,50%,67%);
            //color: hsl(46,50%,40%);
            //margin-top: -80px;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 3.4rem;
            font-size: 2.6rem;
        }
        .my-info-preview {
            //color: black;
            //color: hsl(46,50%,40%);
            font-size: 2.5rem;
        }

        @font-face {
            font-family: my-arial-unicode;
            font-style: bold;
            font-weight: 700;
            font-display: swap;
            src: url('/static/fonts/arial-unicode-ms.ttf');
        }

        @font-face {
            font-family: mymondabold;
            font-style: bold;
            font-weight: 700;
            font-display: swap;
            src: url('/static/fonts/Monda/Monda-Bold.ttf');
        }

        @font-face {
            //font-family: 'Nova Slim';
            font-family: myfontnovaslim;
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            //src: url(https://fonts.gstatic.com/s/novaslim/v24/Z9XUDmZNQAuem8jyZcnOz8mJvLuL9A.woff2) format('woff2');
            //src: url({% static 'fonts/Nova_Slim/NovaSlim-Regular.ttf' %});
            src: url('/static/fonts/Nova_Slim/NovaSlim-Regular.ttf');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }

        @font-face {
            font-family: mydanub;
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url('/static/fonts/danube/DANUB___.TTF');
        }

        @font-face {
            font-family: mydanube;
            font-style: normal;
            font-weight: 200;
            font-display: swap;
            src: url('/static/fonts/danube/DANUBE__.TTF');
        }

        .my-footer-preview {
            color: hsl(46,50%,59%);
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0.5rem;
            //font-family: 'Nova Slim', cursive;
            //font-family: 'myfontnovaslim', cursive;
            font-family: 'mydanube', cursive;
            font-size: 1.5rem;
        }
        .my-danef {
            //background-color: #0000ff66;
        }
        .my-id {
            //background-color: #0000ff66;
        }
        .my-symb-div {
            //background-color: #33881199;
            //width: 495px;
            //height: 495px;
            //width: 3em;
            //height: 2.5em;
            //width:13em;
            //height:13em;
            //color: green;
            //stroke: red;
            //fill: pink;
            //stroke-width:150;
        }
        .my-symb-div-preview {
            background-color: #fdfdfd;
            background-image: radial-gradient(circle, #ddd 1px, rgba(0,0,0,.02) 1px);
            background-size: 1rem 1rem;
        }

        .my-svg-simple {
            width: 2.5em;
            height: 2.3em; // 0.92 * width;
            fill: black;
        }

        .my-bg1 {
            position: relative;
            width: 40em;
            //height: 36.83em; // 0.92 * width;
            height: 38em;
            //background:radial-gradient(#ccccff, #3c39aa);
            //background:radial-gradient(#ccffcc, #3caa39);
            //background:radial-gradient(#70d4a0, #006430);
            //background:radial-gradient(#50b480, #006430);
            background:radial-gradient(hsl(149,70%,28%), hsl(149,100%,5%));
            //background-color: #11111133;
        }
        .my-bg2 {
            position: relative;
            width: 40em;
            //height: 36.83em; // 0.92 * width;
            height: 38em;
            //background:radial-gradient(#504b80, #004630);
            background:radial-gradient(hsl(0,0%,40%), hsl(0,0%,0%));
        }
        .my-bg3 {
            position: relative;
            width: 40em;
            //height: 36.83em; // 0.92 * width;
            height: 38em;
            //background:radial-gradient(#05b480, #006430);
            //background:radial-gradient(hsl(193,82%,56%), hsl(193,82%,26%));
            //background: linear-gradient(hsl(193,82%,56%), hsl(193,82%,26%));
            background:radial-gradient(hsl(0,40%,50%), hsl(0,100%,5%));
        }
        .my-bg4 {
            position: relative;
            width: 40em;
            //height: 36.83em; // 0.92 * width;
            height: 38em;
            background-color: #00000000;
        }
        .my-bg5 {
            position: relative;
            width: 40em;
            //height: 36.83em; // 0.92 * width;
            height: 38em;
            //background:radial-gradient(#5b0480, #006430);
            background:radial-gradient(hsl(293, 40%, 50%), hsl(293, 100%, 5%));
        }
        .my-bg6 {
            position: relative;
            width: 40em;
            //height: 36.83em; // 0.92 * width;
            height: 38em;
            //background:radial-gradient(#50b408, #006403);
            background:radial-gradient(hsl(201, 40%, 50%), hsl(201, 100%, 5%));
        }

        .my-radio {
            border: 0px;
            //width: 100%;
            width: 1.6rem;
            height: 1.6rem;
            //vertical-align: middle;
            //vertical-align: sub;
            //vertical-align: text-bottom;
            //margin-top: 7px;
        }

        .my-btn-size {
            height: 5rem;
            width: 16rem;
            font-size: 2rem;
        }
        .my-btn-download {
            height: 5rem;
            width: 20rem;
            font-size: 2rem;
        }
        .my-btn1 {
            background:radial-gradient(hsl(149,40%,51%), hsl(149,100%,19.6%));
        }
        .my-btn2 {
            background:radial-gradient(hsl(0,0%,50%), hsl(0,0%,0%));
        }
        .my-btn3 {
            background:radial-gradient(hsl(0,100%,50%), hsl(0,100%,20%));
        }
        .my-btn4 {
            background-color: #00000000;
            border-color: black;
        }
        .my-btn5 {
            background:radial-gradient(hsl(293, 100%, 77%), hsl(293, 100%, 32%));
        }
        .my-btn6 {
            background:radial-gradient(hsl(201, 100%, 69%), hsl(201, 100%, 33%));
        }

        .my-svg {
            //filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
            -webkit-filter: drop-shadow( 3px 3px 2px #003200a0);
            filter: drop-shadow( 3px 3px 2px #003200a0);
            //filter: drop-shadow(10px 0 5px red);

            width: 2.5em;
            height: 2.3em; // 0.92 * width;
            //fill: #cbb363;
            fill: hsl(46,50%,59%);
            stroke: white;
            stroke-width:1em;
            //color: green;
        }
        .my-svg-preview {
            //filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
            -webkit-filter: drop-shadow( 3px 3px 2px #003200a0);
            filter: drop-shadow( 3px 3px 2px #003200a0);
            //filter: drop-shadow(10px 0 5px red);

            //width: 2.5em;
            //height: 2.3em; // 0.92 * width;
            //fill: #cbb363;
            fill: hsl(46,50%,59%);
            stroke: white;
            stroke-width:1em;
            //color: green;
        }
        .my-svg-main-preview {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            //bottom: 0;
            width: 40em;
            height: 36.83em; // 0.92 * width;
        }
        //.my-svg-scale {
        //    transform: scale(1.0, 1.0);
        //}
        .my-svg-corner-preview {
            //filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
            -webkit-filter: drop-shadow( 30px 30px 20px #003200a0);
            filter: drop-shadow( 30px 30px 20px #003200a0);
            //filter: drop-shadow(10px 0 5px red);

            //width: 2.5em;
            //height: 2.3em; // 0.92 * width;
            //fill: #cbb363;
            fill: hsla(46,50%,59%, 60%);
            stroke: white;
            stroke-width:1em;
            //color: green;
        }

        .my-svg-wrapper-corner-ur {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 115px;
            height: 115px;
            -webkit-transform: scaleY(-1);
            transform: scaleY(-1);
            z-index: 10;
        }
        .my-svg-corner-ur {
            position: absolute;
            width: 115px;
            height: 115px;
        }
        .my-svg-wrapper-corner-ul {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 115px;
            height: 115px;
            -webkit-transform: scale(-1, -1);
            transform: scale(-1, -1);
            z-index: 10;
        }
        .my-svg-corner-ul {
            position: absolute;
            width: 115px;
            height: 115px;
        }
        .my-svg-wrapper-corner-lr {
            position: absolute;
            bottom: 10px;
            right: 10px;
            width: 115px;
            height: 115px;
            z-index: 10;
        }
        .my-svg-corner-lr {
            position: absolute;
            width: 115px;
            height: 115px;
        }
        .my-svg-wrapper-corner-ll {
            position: absolute;
            bottom: 10px;
            left: 10px;
            width: 115px;
            height: 115px;
            -webkit-transform: scale(-1, 1);
            transform: scale(-1, 1);
            z-index: 10;
        }
        .my-svg-corner-ll {
            position: absolute;
            width: 115px;
            height: 115px;
        }

        .my-use-simple {
            scale:2 2;
        }
        .my-use {
            -webkit-filter: drop-shadow( 2px 2px 1.5px #003200a0);
            filter: drop-shadow( 2px 2px 1.5px #003200a0);
            scale:2 2;
        }
        .my-use-preview {
            -webkit-filter: drop-shadow( 30px -40px 15px #003200a0);
            filter: drop-shadow( 30px -40px 15px #003200a0);
            //scale:16 16;
            scale:1 -1;
        }
        //.my-use-corner {
        //    -webkit-filter: drop-shadow( 20px 20px 15px #003200a0);
        //    filter: drop-shadow( 20px 20px 15px #003200a0);
        //    //scale:16 16;
        //    scale:1 -1;
        //}

        //rect, polygon, use {
            //scale:2 1.5;
            //transform-box: fill-box;
            //transform-origin: center center; /* or `top left`, `center right`, etc. */
            //transform-origin: top left; /* or `top left`, `center right`, etc. */
            //transform-origin: center right; /* or `top left`, `center right`, etc. */
        //}

        //div > svg {
        //    width: 155px;
        //    height: 155px;
        //    //color: green;
        //    //stroke: red;
        //    background-color: #11111133;
        //}

        //.shape-55 {
        //    width: 95px;
        //    height: 95px;
        //}

        //div:nth-of-type(even) {
        //    color: yellow;
        //}
        //div:nth-of-type(odd) {
        //    color: blue;
        //}
        //.abc {
        //    fill: "green";
        //}


// YYYYYYYYYYYYYYYYYYY temporary
/*
@import url(https://fonts.googleapis.com/css?family=Merriweather);
$red: #e74c3c;
*,
*:before,
*:after {
   @include box-sizing(border-box);
}

html,
body {
   background: #f1f1f1;
   font-family: 'Merriweather', sans-serif;
   padding: 1em;
}

h1 {
   text-align: center;
   color: #a8a8a8;
   @include text-shadow(1px 1px 0 rgba(white, 1));
}

form {
   border: 2px solid blue;
   margin: 20px auto;
   max-width: 600px;
   padding: 5px;
   text-align: center;
}

input,
textarea {
   border: 0;
   outline: 0;
   padding: 1em;
   @include border-radius(8px);
   display: block;
   width: 100%;
   margin-top: 1em;
   font-family: 'Merriweather', sans-serif;
   @include box-shadow(0 1px 1px rgba(black, 0.1));
   resize: none;
   &:focus {
      @include box-shadow(0 0px 2px rgba($red, 1)!important);
   }
}

#input-submit {
   color: white;
   background: $red;
   cursor: pointer;
   &:hover {
      @include box-shadow(0 1px 1px 1px rgba(#aaa, 0.6));
   }
}

textarea {
   height: 126px;
}


}
.half {
   float: left;
   width: 48%;
   margin-bottom: 1em;
}
.right {
   width: 50%;
}
.left {
   margin-right: 2%;
}
@media (max-width: 480px) {
   .half {
      width: 100%;
      float: none;
      margin-bottom: 0;
   }
}

/* Clearfix */
.cf:before,
.cf:after {
   content: " ";
   /* 1 */

   display: table;
   /* 2 */
}
.cf:after {
   clear: both;
}
.half.left.cf > input {
   margin: 5px;
}
*/
