https://developer.mozilla.org/en-US/docs/Web/CSS/list-style
CSSCompressor: https://csscompressor.com/
*css-basics




Run animated linear gradient over page
--------------------------------------------------------

<style>
body {
    background: linear-gradient(45deg,#F17C58, #E94584, #24AADB , #27DBB1,#FFDC18, #FF3706);
    background-size: 600% 100%;
    animation: gradient 16s linear infinite;
    animation-direction: alternate;}
@keyframes gradient {
    0% {background-position: 0%}
    100% {background-position: 100%}}
</style>


https://codepen.io/redstapler/pen/LMyLxP


_____________________________________


Change image based on CSS *clicked state*
---------------------------
<style>
div { color: white; background-image: url("https://i.ibb.co/3C8pd4h/Standart-Comp-EXE3.gif");}
input:checked + div{background-image: url("https://i.ibb.co/FgtmyMV/Random-Comp-EXE6.gif");}
</style>
<input type=checkbox>Click me!
<div>&nbsp;</div>

(Source: https://stackoverflow.com/questions/1129699/can-you-use-if-else-conditions-in-css )

_______________________________________________

Compact dropdown button (with images)
------------------------------------------------------------'
<style>
.dropdown {position: absolute;display: inline-block;}
.dropdown-content {
  display: none;position: absolute;background-color: #ffffff;min-width: 0px;box-shadow:5px 5px 0px 0px rgba(0,0,0,0.2);z-index: 1;}
.dropdown-content a {
  color: black;padding: 2px 2px;text-decoration: none;display: block;}
.dropdown-content a:hover {background-color: #fff;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: transparent;}
</style>
<div class="dropdown" hidden>
 <button class="dropbtn"><img src="https://cdn-icons-png.flaticon.com/512/2327/2327670.png" height="45" width="45"></button>
  <div class="dropdown-content">
        <a target="_blank" href="https://pb.todon.de/@alcea.rss"><img src="https://upload.wikimedia.org/wikipedia/commons/4/48/Mastodon_Logotype_%28Simple%29.svg" height="45" width="45"></a>
        <a target="_blank" href="https://nitter.absturztau.be/ryedai1/rss"><img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/Twitter-logo.svg" height="45" width="45"></a>
<a target="_blank" href="mailto:hax0rxy@googlemail.com"><img src="https://upload.wikimedia.org/wikipedia/commons/4/4e/Mail_%28iOS%29.svg" height="45" width="45"></a>
  </div>
</div>

_______________________________

Text Hover Tooltip:
----------------------------

<style>.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;}
.tooltip:hover .tooltiptext {visibility: visible;}</style>
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div> 

(Source: https://www.w3schools.com/css/css_tooltip.asp )

_____________________________________
Waitbutwhy / Bigfoot Popup note:
-----------------------

  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css'>
<link rel='stylesheet' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/bigfoot-default.css'>
<style>
body {
  max-width: 500px;
  margin: 2rem auto;
  padding: 2rem;
}
</style>

</head>
<body>
<!-- partial:index.partial.html -->
<!----------------------------Textbeginning------------------->

<p>…they’d managed to place 27.9MB of images onto the Critical Path. 
Almost 30MB of previously non-render blocking assets had just been 
turned into blocking ones on purpose with no escape hatch. Start 
render time was as high as 27.1s over a cable connection<sup id="fnref:1">
  <a href="#fn:1" class="footnote">1</a></sup>.</p>

<div class="footnotes">
  <ol>
    <li id="fn:1">
     <p>5Mb up, 1Mb down, 28ms RTT.&nbsp;<a href="#fnref:1" class="reversefootnote">↩</a></p>
    </li>
  </ol>
</div>

<!--------- Textend ----------->

<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script>
(function(){var t;(t=jQuery).bigfoot=function(o){var e,n,i,a,r,s,l,f,c,d,u,p,g,h,v,b,m,O,_,C,T,y,w,F,x,N,k;return i=void 0,c={actionOriginalFN:"hide",activateCallback:function(){},activateOnHover:!1,allowMultipleFN:!1,anchorPattern:/(fn|footnote|note)[:\-_\d]/gi,anchorParentTagname:"sup",breakpoints:{},deleteOnUnhover:!1,footnoteParentClass:"footnote",footnoteTagname:"li",hoverDelay:250,numberResetSelector:void 0,popoverDeleteDelay:300,popoverCreateDelay:100,positionContent:!0,preventPageScroll:!0,scope:!1,useFootnoteOnlyOnce:!0,contentMarkup:'<aside class="bigfoot-footnote is-positioned-bottom" data-footnote-number="{{FOOTNOTENUM}}" data-footnote-identifier="{{FOOTNOTEID}}" alt="Footnote {{FOOTNOTENUM}}"> <div class="bigfoot-footnote__wrapper"> <div class="bigfoot-footnote__content"> {{FOOTNOTECONTENT}} </div></div> <div class="bigfoot-footnote__tooltip"></div> </aside>',buttonMarkup:'<div class=\'bigfoot-footnote__container\'> <button class="bigfoot-footnote__button" id="{{SUP:data-footnote-backlink-ref}}" data-footnote-number="{{FOOTNOTENUM}}" data-footnote-identifier="{{FOOTNOTEID}}" alt="See Footnote {{FOOTNOTENUM}}" rel="footnote" data-bigfoot-footnote="{{FOOTNOTECONTENT}}"> <svg class="bigfoot-footnote__button__circle" viewbox="0 0 6 6" preserveAspectRatio="xMinYMin"><circle r="3" cx="3" cy="3" fill="white"></circle></svg> <svg class="bigfoot-footnote__button__circle" viewbox="0 0 6 6" preserveAspectRatio="xMinYMin"><circle r="3" cx="3" cy="3" fill="white"></circle></svg> <svg class="bigfoot-footnote__button__circle" viewbox="0 0 6 6" preserveAspectRatio="xMinYMin"><circle r="3" cx="3" cy="3" fill="white"></circle></svg> </button></div>'},w=t.extend(c,o),v={},p=function(){var o,e,n,i,a,r,l,f,c,u,p,g,h,v,b,O,_,T,y;for(u=w.scope?w.scope+' a[href*="#"]':'a[href*="#"]',n=t(u).filter(function(){var o,e;return"null"!==(e=(o=t(this)).attr("rel"))&&null!=e||(e=""),(""+o.attr("href")+e).match(w.anchorPattern)&&o.closest("[class*="+w.footnoteParentClass+"]:not(a):not("+w.anchorParentTagname+")").length<1}),b=[],f=[],s(n,h=[]),t(h).each(function(){var o,e;if(e=t(this).data("footnote-ref").replace(/[:.+~*\]\[]/g,"\\$&"),w.useFootnoteOnlyOnce&&(e+=":not(.footnote-processed)"),(o=t(e).closest(w.footnoteTagname)).length>0)return b.push(o.first().addClass("footnote-processed")),f.push(this)}),g=(e=t("[data-footnote-identifier]:last")).length<1?0:+e.data("footnote-identifier"),y=[],O=_=0,T=b.length;0<=T?_<T:_>T;O=0<=T?++_:--_)switch(p=(p=m(t(b[O]).html().trim(),t(f[O]).data("footnote-backlink-ref"))).replace(/"/g,"&quot;").replace(/&lt;/g,"&ltsym;").replace(/&gt;/g,"&gtsym;"),g+=1,c="",r=t(f[O]),l=t(b[O]),null!=w.numberResetSelector?((o=r.closest(w.numberResetSelector)).is(i)?v+=1:v=1,i=o):v=g,0!==p.indexOf("<")&&(p="<p>"+p+"</p>"),c=w.buttonMarkup.replace(/\{\{FOOTNOTENUM\}\}/g,v).replace(/\{\{FOOTNOTEID\}\}/g,g).replace(/\{\{FOOTNOTECONTENT\}\}/g,p),c=C(c,"SUP",r),c=C(c,"FN",l),t(c).insertBefore(r),a=l.parent(),w.actionOriginalFN.toLowerCase()){case"hide":r.addClass("footnote-print-only"),l.addClass("footnote-print-only"),y.push(d(a));break;case"delete":r.remove(),l.remove(),y.push(d(a));break;default:y.push(r.addClass("footnote-print-only"))}return y},s=function(o,e){var n,i,a;null==e&&(e=[]),n=void 0,i=void 0,a=void 0,o.each(function(){var o,r;return r=t(this),i="#"+r.attr("href").split("#")[1],n=r.closest(w.anchorParentTagname),o=r.find(w.anchorParentTagname),n.length>0?(a=(n.attr("id")||"")+(r.attr("id")||""),e.push(n.attr({"data-footnote-backlink-ref":a,"data-footnote-ref":i}))):o.length>0?(a=(o.attr("id")||"")+(r.attr("id")||""),e.push(r.attr({"data-footnote-backlink-ref":a,"data-footnote-ref":i}))):(a=r.attr("id")||"",e.push(r.attr({"data-footnote-backlink-ref":a,"data-footnote-ref":i})))})},d=function(t){var o;return o=void 0,t.is(":empty")||0===t.children(":not(.footnote-print-only)").length?(o=t.parent(),"delete"===w.actionOriginalFN.toLowerCase()?t.remove():t.addClass("footnote-print-only"),d(o)):t.children(":not(.footnote-print-only)").length===t.children("hr:not(.footnote-print-only)").length?(o=t.parent(),"delete"===w.actionOriginalFN.toLowerCase()?t.remove():(t.children("hr").addClass("footnote-print-only"),t.addClass("footnote-print-only")),d(o)):void 0},m=function(t,o){var e;return o.indexOf(" ")>=0&&(o=o.trim().replace(/\s+/g,"|").replace(/(.*)/g,"($1)")),e=new RegExp("(\\s|&nbsp;)*<\\s*a[^#<]*#"+o+"[^>]*>(.*?)<\\s*/\\s*a>","g"),t.replace(e,"").replace("[]","")},C=function(t,o,e){var n,i,a;for(n=void 0,a=void 0,n=(i=new RegExp("\\{\\{"+o+":([^\\}]*)\\}\\}","g")).exec(t);n;)n[1]&&(a=e.attr(n[1])||"",t=t.replace("{{"+o+":"+n[1]+"}}",a)),n=i.exec(t);return t},a=function(o){var e,n;if(w.activateOnHover){if(n='[data-footnote-identifier="'+(e=t(o.target).closest(".bigfoot-footnote__button")).attr("data-footnote-identifier")+'"]',e.hasClass("is-active"))return;e.addClass("is-hover-instantiated"),w.allowMultipleFN||_(".bigfoot-footnote:not("+n+")"),f(".bigfoot-footnote__button"+n).addClass("is-hover-instantiated")}},F=function(o){var e,n,i;e=(i=t(o.target)).closest(".bigfoot-footnote__button"),n=i.closest(".bigfoot-footnote"),e.length>0?(o.preventDefault(),l(e)):n.length<1&&t(".bigfoot-footnote").length>0&&_()},l=function(t){var o;t.blur(),o='data-footnote-identifier="'+t.attr("data-footnote-identifier")+'"',t.hasClass("changing")||(t.hasClass("is-active")?w.allowMultipleFN?_(".bigfoot-footnote["+o+"]"):_():(t.addClass("changing"),setTimeout(function(){return t.removeClass("changing")},w.popoverCreateDelay),f(".bigfoot-footnote__button["+o+"]"),t.addClass("is-click-instantiated"),w.allowMultipleFN||_(".bigfoot-footnote:not(["+o+"])")))},f=function(o){var e,n;return e=void 0,e="string"!=typeof o&&w.allowMultipleFN?o:"string"!=typeof o?o.first():w.allowMultipleFN?t(o).closest(".bigfoot-footnote__button"):t(o+":first").closest(".bigfoot-footnote__button"),n=t(),e.each(function(){var o,i,a,s;a=t(this),s=void 0;try{return s=w.contentMarkup.replace(/\{\{FOOTNOTENUM\}\}/g,a.attr("data-footnote-number")).replace(/\{\{FOOTNOTEID\}\}/g,a.attr("data-footnote-identifier")).replace(/\{\{FOOTNOTECONTENT\}\}/g,a.attr("data-bigfoot-footnote")).replace(/\&gtsym\;/g,"&gt;").replace(/\&ltsym\;/g,"&lt;"),s=C(s,"BUTTON",a)}finally{o=t(s);try{w.activateCallback(o,a)}catch(t){}o.insertAfter(e),v[a.attr("data-footnote-identifier")]="init",o.attr("bigfoot-max-width",r(o.css("max-width"),o)),o.css("max-width",1e4),i=o.find(".bigfoot-footnote__content"),o.attr("data-bigfoot-max-height",r(i.css("max-height"),i)),T(),a.addClass("is-active"),o.find(".bigfoot-footnote__content").bindScrollHandler(),n=n.add(o)}}),setTimeout(function(){return n.addClass("is-active")},w.popoverCreateDelay),n},n=function(){var t,o;return(t=document.createElement("div")).style.cssText="display:inline-block;padding:0;line-height:1;position:absolute;visibility:hidden;font-size:1em;",t.appendChild(document.createElement("M")),document.body.appendChild(t),o=t.offsetHeight,document.body.removeChild(t),o},r=function(t,o){return"none"===t?t=1e4:t.indexOf("rem")>=0?t=parseFloat(t)*n():t.indexOf("em")>=0?t=parseFloat(t)*parseFloat(o.css("font-size")):t.indexOf("px")>=0?(t=parseFloat(t))<=60&&(t/=parseFloat(o.parent().css("width"))):t.indexOf("%")>=0&&(t=parseFloat(t)/100),t},t.fn.bindScrollHandler=function(){return w.preventPageScroll?(t(this).on("DOMMouseScroll mousewheel",function(o){var e,n,i,a,r,s,l,f;if(l=(n=t(this)).scrollTop(),s=n[0].scrollHeight,a=parseInt(n.css("height")),e=n.closest(".bigfoot-footnote"),n.scrollTop()>0&&n.scrollTop()<10&&e.addClass("is-scrollable"),e.hasClass("is-scrollable"))return r=function(){return o.stopPropagation(),o.preventDefault(),o.returnValue=!1,!1},!(f=(i="DOMMouseScroll"===o.type?-40*o.originalEvent.detail:o.originalEvent.wheelDelta)>0)&&-i>s-a-l?(n.scrollTop(s),e.addClass("is-fully-scrolled"),r()):f&&i>l?(n.scrollTop(0),e.removeClass("is-fully-scrolled"),r()):e.removeClass("is-fully-scrolled")}),t(this)):t(this)},x=function(o){if(w.deleteOnUnhover&&w.activateOnHover)return setTimeout(function(){if(t(o.target).closest(".bigfoot-footnote, .bigfoot-footnote__button"),t(".bigfoot-footnote__button:hover, .bigfoot-footnote:hover").length<1)return _()},w.hoverDelay)},u=function(t){if(27===t.keyCode)return _()},_=function(o,e){var n,i,a,r;return null==o&&(o=".bigfoot-footnote"),null==e&&(e=w.popoverDeleteDelay),n=t(),r=void 0,i=void 0,a=void 0,t(o).each(function(){if(a=t(this),r=a.attr("data-footnote-identifier"),!(i=t('.bigfoot-footnote__button[data-footnote-identifier="'+r+'"]')).hasClass("changing"))return n=n.add(i),i.removeClass("is-active is-hover-instantiated is-click-instantiated").addClass("changing"),a.removeClass("is-active").addClass("disapearing"),setTimeout(function(){return a.remove(),delete v[r],i.removeClass("changing")},e)}),n},T=function(o){var e;w.positionContent&&(e=o?o.type:"resize",t(".bigfoot-footnote").each(function(){var o,n,i,a,r,s,l,f,c,d,u,p,g,h,m;if(a=(i=t(this)).attr("data-footnote-identifier"),i.find(".bigfoot-footnote__content"),o=i.siblings(".bigfoot-footnote__button"),p=y(o),s=parseFloat(i.css("margin-top")),l=+i.attr("data-bigfoot-max-height"),g=2*s+i.outerHeight(),f=1e4,u=p.bottomRoom<g&&p.topRoom>p.bottomRoom,r=v[a],u?("top"!==r&&(v[a]="top",i.addClass("is-positioned-top").removeClass("is-positioned-bottom"),i.css("transform-origin",100*p.leftRelative+"% 100%")),f=p.topRoom-s-15):("bottom"===r&&"init"!==r||(v[a]="bottom",i.removeClass("is-positioned-top").addClass("is-positioned-bottom"),i.css("transform-origin",100*p.leftRelative+"% 0%")),f=p.bottomRoom-s-15),i.find(".bigfoot-footnote__content").css({"max-height":Math.min(f,l)+"px"}),"resize"===e&&(d=parseFloat(i.attr("bigfoot-max-width")),n=i.find(".bigfoot-footnote__wrapper"),c=d,d<=1&&(m=1e4,w.maxWidthRelativeTo&&(h=t(w.maxWidthRelativeTo)).length>0&&(m=h.outerWidth()),c=Math.min(window.innerWidth,m)*d),c=Math.min(c,i.find(".bigfoot-footnote__content").outerWidth()+1),n.css("max-width",c+"px"),i.css({left:-p.leftRelative*c+parseFloat(o.css("margin-left"))+o.outerWidth()/2+"px"}),b(i,p.leftRelative)),parseInt(i.outerHeight())<i.find(".bigfoot-footnote__content")[0].scrollHeight)return i.addClass("is-scrollable")}))},b=function(t,o){var e;null==o&&(o=.5),(e=t.find(".bigfoot-footnote__tooltip")).length>0&&e.css("left",100*o+"%")},y=function(t){var o,e,n,i,a,r;return e=parseFloat(t.css("margin-left")),n=parseFloat(t.outerWidth())-e,o=parseFloat(t.outerHeight()),r=k(),a=t.offset().top-r.scrollY+o/2,i=t.offset().left-r.scrollX+n/2,{topRoom:a,bottomRoom:r.height-a,leftRoom:i,rightRoom:r.width-i,leftRelative:i/r.width,topRelative:a/r.height}},k=function(){var o;return o=t(window),{width:window.innerWidth,height:window.innerHeight,scrollX:o.scrollLeft(),scrollY:o.scrollTop()}},e=function(t,o,e,n,a){var r,s,l,f,c,d;return null==n&&(n=w.popoverDeleteDelay),null==a&&(a=!0),f=void 0,s=void 0,d=void 0,"string"==typeof t?(c=(s=">"===(d="iphone"===t.toLowerCase()?"<320px":"ipad"===t.toLowerCase()?"<768px":t).charAt(0)?"min":"<"===d.charAt(0)?"max":null)?"("+s+"-width: "+d.substring(1)+")":d,f=window.matchMedia(c)):f=t,f.media&&"invalid"===f.media?{added:!1,mq:f,listener:null}:(r="max"===s,o=o||h(a,n,"min"===s,function(t){return t.addClass("is-bottom-fixed")}),e=e||h(a,n,r,function(){}),l=function(t){t.matches?o(a,i):e(a,i)},f.addListener(l),l(f),w.breakpoints[t]={added:!0,mq:f,listener:l},w.breakpoints[t])},h=function(t,o,e,n){return function(t,i){var a;return a=void 0,t&&(a=i.close(),i.updateSetting("activateCallback",n)),setTimeout(function(){if(i.updateSetting("positionContent",e),t)return i.activate(a)},o)}},O=function(t,o){var e,n,i;if(e=void 0,i=!1,"string"==typeof t)i=void 0!==w.breakpoints[t];else for(e in w.breakpoints)w.breakpoints.hasOwnProperty(e)&&w.breakpoints[e].mq===t&&(i=!0);return i&&(n=w.breakpoints[e||t],o?o({matches:!1}):n.listener({matches:!1}),n.mq.removeListener(n.listener),delete w.breakpoints[e||t]),i},N=function(t,o){var e,n;if(e=void 0,"string"==typeof t)e=w[t],w[t]=o;else for(n in e={},t)t.hasOwnProperty(n)&&(e[n]=w[n],w[n]=t[n]);return e},g=function(t){return w[t]},t(document).ready(function(){return p(),t(document).on("mouseenter",".bigfoot-footnote__button",a),t(document).on("touchend click",F),t(document).on("mouseout",".is-hover-instantiated",x),t(document).on("keyup",u),t(window).on("scroll resize",T),t(document).on("gestureend",function(){return T()})}),i={removePopovers:_,close:_,createPopover:f,activate:f,repositionFeet:T,reposition:T,addBreakpoint:e,removeBreakpoint:O,getSetting:g,updateSetting:N}}}).call(this);
</script>
</script><script>$.bigfoot();</script>
</body>
</html>

(Source: https://codepen.io/ryedai1/pen/PoJjOLE )


_________________
Popup Footnote:
----------------
<stye>

a.footnote {text-decoration:none;
   background-color: #FEF6BB;
   padding-left: 2px;
   padding-right: 2px;
   margin-right: 2px;
   -webkit-transition: all 2s ease;
   -moz-transition: all 2s ease;
   -o-transition: all 2s ease;
   transition: all 2s ease;}
a.footnote span {z-index: -1;
   opacity: 0;
   position: fixed;
   left: 15px; 
   bottom: 20px;
   margin-left: 0px;
   margin-right: 18px;
   padding:14px 20px;
   border-radius:4px; box-shadow: 5px 5px 8px #CCC;
   border:1px solid #DCA;
   background-color: #FEF6BB;
   -webkit-transition: all 2s ease;
   -moz-transition: all 2s ease;
   -o-transition: all 2s ease;
   transition: all 2s ease;}
a.footnote:hover span {z-index: 9;
   opacity: 1;
   -webkit-transition: all 2s ease;
   -moz-transition: all 2s ease;
   -o-transition: all 2s ease;
   transition: all 2s ease;}
</style>

</head>
<body>
<!-- partial:index.partial.html -->
<p>text<a class="footnote">&sup1<span>An interesting and informative comment appears here, as if by magic.</span></a>
   </p>
<!-- partial -->
</body>
</html>

(Source: https://codepen.io/WilliamRobertson/pen/ONpWRJ?html-preprocessor=haml )



_____________
CSS at time of day:
--------------------

<script>
<!--
function getStylesheet() {
      var currentTime = new Date().getHours();
      if (0 <= currentTime&&currentTime < 5) {
       document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
      }
      if (5 <= currentTime&&currentTime < 11) {
       document.write("<link rel='stylesheet' href='morning.css' type='text/css'>");
      }
      if (11 <= currentTime&&currentTime < 16) {
       document.write("<link rel='stylesheet' href='day.css' type='text/css'>");
      }
      if (16 <= currentTime&&currentTime < 22) {
       document.write("<link rel='stylesheet' href='evening.css' type='text/css'>");
      }
      if (22 <= currentTime&&currentTime <= 24) {
       document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
      }
}
getStylesheet();
-->
</script>
<noscript><link href="main.css" rel="stylesheet"></noscript>

(Source: https://css-tricks.com/snippets/javascript/different-stylesheet-pending-the-time-of-day/ )

______________
CSS Snowflakes
-----------------------

<style>
/* customizable snowflake styling */
.snowflake {color: #fff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px #000;}
@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}
</style>
<div class="snowflakes" aria-hidden="true">
<div class="snowflake">❅</div><div class="snowflake">❆</div><div class="snowflake">❅</div><div class="snowflake">❆</div>
<div class="snowflake">❅</div><div class="snowflake">❆</div><div class="snowflake">❅</div><div class="snowflake">❆</div>
<div class="snowflake">❅</div><div class="snowflake">❆</div><div class="snowflake">❅</div><div class="snowflake">❆</div>
</div>


___________________________
Call CSS File
-------------------

<link rel="stylesheet" type="text/css" href="yourstylesheetname.css"> 

___________________________
Set page background solid color:
---------------

<style>
body {background-color: #000000;}
</style>

==============
== cssbasics ==

CSS can be added to HTML documents in 3 ways:      
Inline - by using the style attribute inside HTML elements.     
Internal - by using a <style> element in the <head> section.     
External - by using a <link> element to link to an external CSS file 

(Source: https://www.w3schools.com/html/html_css.asp )
