cyberweb 0.12.35

data/lib/cyberweb/toplevel_methods/css.rb

@@ -0,0 +1,2194 @@
+#!/usr/bin/ruby -w
+# Encoding: UTF-8
+# frozen_string_literal: true
+# =========================================================================== #
+# require 'cyberweb/toplevel_methods/css.rb'
+# Cyberweb.css_comment
+# =========================================================================== #
+module Cyberweb
+
+  require 'cyberweb/project/project.rb'
+  require 'cyberweb/constants/constants.rb'
+  require 'cyberweb/encoding/encoding.rb'
+
+  # ========================================================================= #
+  # === Cyberweb::ARRAY_RANDOM_COLOUR
+  #
+  # For random colour macros, add to this array here.
+  # ========================================================================= #
+  ARRAY_RANDOM_COLOUR = %w(
+    RCOL
+    RAND_COL
+    RCOLOUR
+    RANDOM_COLOUR
+    RAND
+  )
+
+  # ========================================================================= #
+  # === Cyberweb.found_these_css_classes
+  # ========================================================================= #
+  def self.found_these_css_classes
+    @array_found_these_css_classes
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.container_for_the_CSS_coffee_animation
+  # ========================================================================= #
+  def self.container_for_the_CSS_coffee_animation
+    return '<h2 style="color: gold; text-align: center">Get some coffee!</h2>
+
+<div class="container_for_coffee">
+ <div class="coffee-header">
+  <div class="coffee-header__buttons coffee-header__button-one"></div>
+  <div class="coffee-header__buttons coffee-header__button-two"></div>
+  <div class="coffee-header__display"></div>
+  <div class="coffee-header__details"></div>
+ </div>
+ <div class="coffee-medium">
+  <div class="coffe-medium__exit"></div>
+  <div class="coffee-medium__arm"></div>
+  <div class="coffee-medium__liquid"></div>
+  <div class="coffee-medium__smoke coffee-medium__smoke-one"></div>
+  <div class="coffee-medium__smoke coffee-medium__smoke-two"></div>
+  <div class="coffee-medium__smoke coffee-medium__smoke-three"></div>
+  <div class="coffee-medium__smoke coffee-medium__smoke-for"></div>
+  <div class="coffee-medium__cup"></div>
+ </div>
+ <div class="coffee-footer"></div>
+</div>
+
+'
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.css_rules_for_the_coffee_animation
+  # ========================================================================= #
+  def self.css_rules_for_the_coffee_animation
+    return '.container_for_coffee {
+  width:    300px;
+  height:   280px;
+  position: absolute;
+  top:   calc(25% - 140px);
+  left:  calc(50% - 150px);
+}
+.coffee-header {
+  width: 100%;
+  height: 80px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: #ddcfcc;
+  border-radius: 10px;
+}
+.coffee-header__buttons {
+  width: 25px;
+  height: 25px;
+  position: absolute;
+  top: 25px;
+  background-color: #282323;
+  border-radius: 50%;
+}
+.coffee-header__buttons::after {
+  content: "";
+  width: 8px;
+  height: 8px;
+  position: absolute;
+  bottom: -8px;
+  left: calc(50% - 4px);
+  background-color: #615e5e;
+}
+.coffee-header__button-one {
+  left: 15px;
+}
+.coffee-header__button-two {
+  left: 50px;
+}
+.coffee-header__display {
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  top: calc(50% - 25px);
+  left: calc(50% - 25px);
+  border-radius: 50%;
+  background-color: #9acfc5;
+  border: 5px solid #43beae;
+  box-sizing: border-box;
+}
+.coffee-header__details {
+  width: 8px;
+  height: 20px;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: #9b9091;
+  box-shadow: -12px 0 0 #9b9091, -24px 0 0 #9b9091;
+}
+.coffee-medium {
+  width: 90%;
+  height: 160px;
+  position: absolute;
+  top: 80px;
+  left: calc(50% - 45%);
+  background-color: #bcb0af;
+}
+.coffee-medium:before {
+  content: "";
+  width: 90%;
+  height: 100px;
+  background-color: #776f6e;
+  position: absolute;
+  bottom: 0;
+  left: calc(50% - 45%);
+  border-radius: 20px 20px 0 0;
+}
+.coffe-medium__exit {
+  width: 60px;
+  height: 20px;
+  position: absolute;
+  top: 0;
+  left: calc(50% - 30px);
+  background-color: #231f20;
+}
+.coffe-medium__exit::before {
+  content: "";
+  width: 50px;
+  height: 20px;
+  border-radius: 0 0 50% 50%;
+  position: absolute;
+  bottom: -20px;
+  left: calc(50% - 25px);
+  background-color: #231f20;
+}
+.coffe-medium__exit::after {
+  content: "";
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  bottom: -30px;
+  left: calc(50% - 5px);
+  background-color: #231f20;
+}
+.coffee-medium__arm {
+  width: 70px;
+  height: 20px;
+  position: absolute;
+  top: 15px;
+  right: 25px;
+  background-color: #231f20;
+}
+.coffee-medium__arm::before {
+  content: "";
+  width: 15px;
+  height: 5px;
+  position: absolute;
+  top: 7px;
+  left: -15px;
+  background-color: #9e9495;
+}
+.coffee-medium__cup {
+  width: 80px;
+  height: 47px;
+  position: absolute;
+  bottom: 0;
+  left: calc(50% - 40px);
+  background-color: #FFF;
+  border-radius: 0 0 70px 70px / 0 0 110px 110px;
+}
+.coffee-medium__cup::after {
+  content: "";
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: 6px;
+  right: -13px;
+  border: 5px solid #FFF;
+  border-radius: 50%;
+}
+@keyframes liquid {
+  0% {
+    height: 0px;  
+    opacity: 1;
+  }
+  5% {
+    height: 0px;  
+    opacity: 1;
+  }
+  20% {
+    height: 62px;  
+    opacity: 1;
+  }
+  95% {
+    height: 62px;
+    opacity: 1;
+  }
+  100% {
+    height: 62px;
+    opacity: 0;
+  }
+}
+.coffee-medium__liquid {
+  width: 6px;
+  height: 63px;
+  opacity: 0;
+  position: absolute;
+  top: 50px;
+  left: calc(50% - 3px);
+  background-color: #74372b;
+  animation: liquid 3s 3s linear infinite;
+}
+.coffee-medium__smoke {
+  width: 8px;
+  height: 20px;
+  position: absolute;  
+  border-radius: 5px;
+  background-color: #b3aeae;
+}
+
+@keyframes smokeOne {
+  0% {
+    bottom: 20px;
+    opacity: 0;
+  }
+  40% {
+    bottom: 50px;
+    opacity: .5;
+  }
+  80% {
+    bottom: 80px;
+    opacity: .3;
+  }
+  100% {
+    bottom: 80px;
+    opacity: 0;
+  }
+}
+
+@keyframes smokeTwo {
+  0% {
+    bottom: 40px;
+    opacity: 0;
+  }
+  40% {
+    bottom: 70px;
+    opacity: .5;
+  }
+  80% {
+    bottom: 80px;
+    opacity: .3;
+  }
+  100% {
+    bottom: 80px;
+    opacity: 0;
+  }
+}
+.coffee-medium__smoke-one {
+  opacity: 0;
+  bottom: 50px;
+  left: 102px;
+  animation: smokeOne 3s 4s linear infinite;
+}
+.coffee-medium__smoke-two {
+  opacity: 0;
+  bottom: 70px;
+  left: 118px;
+  animation: smokeTwo 3s 5s linear infinite;
+}
+.coffee-medium__smoke-three {
+  opacity: 0;
+  bottom: 65px;
+  right: 118px;
+  animation: smokeTwo 3s 6s linear infinite;
+}
+.coffee-medium__smoke-for {
+  opacity: 0;
+  bottom: 50px;
+  right: 102px;
+  animation: smokeOne 3s 5s linear infinite;
+}
+.coffee-footer {
+  width: 95%;
+  height: 15px;
+  position: absolute;
+  bottom: 25px;
+  left: calc(50% - 47.5%);
+  background-color: #41bdad;
+  border-radius: 10px;
+}
+.coffee-footer::after {
+  content: "";
+  width: 106%;
+  height: 26px;
+  position: absolute;
+  bottom: -25px;
+  left: -8px;
+  background-color: #000;
+}
+'
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.test_css
+  # ========================================================================= #
+  def self.test_css
+    puts 'h1 {
+  text-decoration: underline red;
+  text-decoration-thickness: 3px;
+  text-underline-offset: 6px;
+ }'
+  end
+
+  require 'cyberweb/colours/colours.rb'
+  # ========================================================================= #
+  # === Cyberweb.return_css_class
+  #
+  # This method will return a css class - but only when the input
+  # given to this method is NOT empty. In other words: empty arguments
+  # will be ignored.
+  #
+  # ARRAY_RANDOM_COLOUR also includes RAND.
+  # ========================================================================= #
+  def self.return_css_class(
+      css_class = ''
+    )
+    # ======================================================================= #
+    # Ensure that we have a String from this point.
+    # ======================================================================= #
+    css_class = css_class.to_s.strip
+    unless css_class.empty?
+      ARRAY_RANDOM_COLOUR.each {|word|
+        css_class.gsub!(/#{word}/, 'color: '+return_random_colour)
+      } if css_class.include? 'COL'
+      # ===================================================================== #
+      # Handle colour input next.
+      # ===================================================================== #
+      css_class = ::Cyberweb.sanitize_for_colours(css_class) # Since as of Nov 2014.
+      css_class.strip!
+      result = ''.dup
+      # ===================================================================== #
+      # Append onto the Array that keeps track of which CSS classes were
+      # found.
+      # ===================================================================== #
+      (
+        ::Cyberweb.found_these_css_classes << css_class.split(' ')
+      ).flatten!.uniq!
+      result << ' class="' << css_class << '"'
+      return result # Early return in this case.
+    end
+    '' # Otherwise an empty String will be returned.
+  end; self.instance_eval { alias css_class= return_css_class } # === Cyberweb.css_class=
+
+  # ========================================================================= #
+  # === return_unique_css_id
+  # ========================================================================= #
+  def return_unique_css_id
+    _ = ''.dup
+    20.times {
+      _ << ALPHABET.sample
+    }
+    _
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.generate_animated_border_gradient_box
+  #
+  # Usage example:
+  #
+  #   Cyberweb.generate_animated_border_gradient_box(inner_border_size: '12px')
+  #   Cyberweb.generate_animated_border_gradient_box(inner_border_size: '12px', border_radius: '10px')
+  #
+  # ========================================================================= #
+  def self.generate_animated_border_gradient_box(
+      hash = {
+        inner_border_size: '3px;',
+        border_radius:     '10px;',
+        animation_speed:   '12s'
+      }
+    )
+    if hash.is_a?(String)
+      hash = {inner_border_size: hash}
+    end
+    # ======================================================================= #
+    # Use a default Hash:
+    # ======================================================================= #
+    default_hash = {
+      inner_border_size:   '3px;',
+      border_radius:       '10px',
+      animation_speed:     '12s',
+      gradient_colour1:    '#213', # This is some darkblue default colour here.
+      gradient_colour_for_the_border1:  '#08f'
+    }
+    default_hash.merge!(hash)
+    result = <<-EOF
+.animated_border_gradient_box {
+  --border-size:       #{default_hash[:inner_border_size].delete(';')};
+  --border-angle:      0turn;
+  background-image:    conic-gradient(from var(--border-angle), #{default_hash[:gradient_colour1]}, #112 50%, #{default_hash[:gradient_colour1]}),
+                       conic-gradient(from var(--border-angle), transparent 20%, #{default_hash[:gradient_colour_for_the_border1]}, #f03);
+  background-size:     calc(100% - (var(--border-size) * 5)) calc(100% - (var(--border-size) * 5)), cover;
+  background-position: center center;
+  background-repeat:   no-repeat;
+  border-radius:       #{default_hash[:border_radius].delete(';')};
+  -webkit-animation:   animated_background_spin #{default_hash[:animation_speed]} linear infinite;
+          animation:   animated_background_spin #{default_hash[:animation_speed]} linear infinite;
+}
+@-webkit-keyframes animated_background_spin {
+  to {
+    --border-angle: 1turn;
+  }
+}
+@keyframes animated_background_spin {
+  to {
+    --border-angle: 1turn;
+  }
+}
+
+@property --border-angle {
+  syntax: "<angle>";
+  inherits: true;
+  initial-value: 0turn;
+}
+EOF
+    return result
+  end; self.instance_eval { alias return_animated_border_gradient_box generate_animated_border_gradient_box } # === Cyberweb return_animated_border_gradient_box
+
+  # ========================================================================= #
+  # === Cyberweb.return_css_for_the_sausage_dog
+  #
+  # Usage example:
+  #
+  #   x = Cyberweb.return_css_for_the_sausage_dog
+  #
+  # ========================================================================= #
+  def self.return_css_for_the_sausage_dog
+    result = <<-EOF
+
+/* Support for CSS `d` property is required. */
+
+.sausage-dog-animation {
+  height: 25rem;
+  max-height: 80vh;
+  max-width: 80vw;
+}
+
+.ear,
+.closed-eye,
+.lean,
+.front-legs,
+.leg,
+.head,
+.tail,
+.tail-blur,
+.shadow {
+  animation-duration: 3s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+.ball,
+.ball-decoration,
+.ball-sound {
+  animation-duration: 3s;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+}
+
+.ball {
+  animation-name: squishBall;
+  transform: matrix(
+    1.0951654,
+    0.52195853,
+    -0.52866476,
+    1.2371611,
+    208.27138,
+    -632.28196
+  );
+}
+
+@keyframes squishBall {
+  0%,
+  50%,
+  72%,
+  80%,
+  92%,
+  100% {
+    d: path(
+      "m 930.80242,477.19065 c -13.05851,3.00801 -24.77881,15.97694 -26.81485,30.67673 -2.03603,14.69979 5.61282,31.12503 15.54844,43.47271 9.93563,12.34768 22.15522,20.61485 36.12779,24.29677 13.97258,3.68192 29.69644,2.77869 42.91157,-2.81649 13.21513,-5.59518 23.92113,-15.88139 30.65943,-28.14324 6.7383,-12.26185 9.5079,-26.49697 5.7369,-38.5172 -3.771,-12.02022 -14.0825,-21.82316 -25.5603,-24.46605 -11.47786,-2.6429 -24.12011,1.87601 -37.63861,0.6591 -13.5185,-1.21691 -27.91187,-8.17033 -40.97037,-5.16233 z"
+    );
+    transform: matrix(
+        1.0951654,
+        0.52195853,
+       -0.52866476,
+        1.2371611,
+      208.27138,
+     -632.28196
+    );
+  }
+  65%,
+  85% {
+    d: path(
+      "m 932.4158,479.26229 c -14.67189,0.93637 -26.39219,13.9053 -28.42823,28.60509 -2.03603,14.69979 5.61282,31.12503 15.94228,38.97676 10.32947,7.85173 23.3365,7.12856 34.39281,10.90173 11.0563,3.77318 20.16082,12.04166 33.72906,12.76579 13.56828,0.72414 31.59878,-6.09489 42.72528,-18.16177 11.1265,-12.06689 15.3474,-29.37891 10.9229,-43.93943 -4.4245,-14.56052 -17.4943,-26.36654 -28.8312,-27.22343 -11.337,-0.85689 -20.93852,9.23684 -34.54977,8.73602 -13.61125,-0.50082 -31.23124,-11.59712 -45.90313,-10.66076 z"
+    );
+    transform: matrix(
+        1.0951654,
+        0.52195853,
+       -0.52866476,
+        1.2371611,
+      208.27138,
+     -642.28196
+    );
+  }
+}
+
+.ball-decoration {
+  animation-name: ballDecorationAnimation;
+}
+
+@keyframes ballDecorationAnimation {
+  0%,
+  50%,
+  72%,
+  80%,
+  92%,
+  100% {
+    d: path(
+      "m 963.39546,597.71943 c 21.49913,-19.30313 4.80913,-64.80408 16.71919,-83.46282 16.19467,-25.37116 67.93925,-22.92156 89.43095,-47.68524"
+    );
+  }
+  65%,
+  85% {
+    d: path(
+      "m 978.40243,581.77452 c 21.49916,-19.30313 -15.82546,-51.20401 -3.9154,-69.86275 16.19467,-25.37116 63.71847,-19.16982 85.21017,-43.9335"
+    );
+  }
+}
+
+.ball-sound {
+  animation-name: ballSound;
+  visibility: hidden;
+}
+
+@keyframes ballSound {
+  0%,
+  60%,
+  70%,
+  80%,
+  90%,
+  100% {
+    visibility: hidden;
+    transform: translateY(0);
+  }
+  65%,
+  67%,
+  69%,
+  85%,
+  87%,
+  89% {
+    visibility: visible;
+    transform: translateY(-3px);
+  }
+  66%,
+  68%,
+  86%,
+  88% {
+    visibility: visible;
+    transform: translateY(3px);
+  }
+}
+
+.ear {
+  animation-name: moveEar;
+  transform-origin: top center;
+  transform-box: fill-box;
+}
+
+@keyframes moveEar {
+  0%,
+  12%,
+  21%,
+  31%,
+  35%,
+  100% {
+    transform: rotateZ(0);
+  }
+  9%,
+  19%,
+  29% {
+    transform: rotateZ(-5deg);
+    transform: rotateZ(-10deg);
+  }
+  13%,
+  23%,
+  33% {
+    transform: rotateZ(5deg);
+    transform: rotateZ(10deg);
+  }
+}
+
+.closed-eye {
+  animation-name: closeEye;
+}
+
+@keyframes closeEye {
+  0%,
+  50%,
+  100% {
+    visibility: hidden;
+  }
+  10% {
+    visibility: visible;
+  }
+}
+
+.lean {
+  animation-name: leanDown;
+  transform-origin: center;
+}
+
+@keyframes leanDown {
+  0%,
+  50%,
+  100% {
+    transform: rotateZ(0) translateY(0);
+  }
+  60%,
+  90% {
+    transform: rotateZ(10deg) translateY(5%);
+  }
+}
+
+.front-legs {
+  animation-name: flexLegs;
+}
+
+@keyframes flexLegs {
+  0%,
+  50%,
+  100% {
+    transform: translateX(0);
+  }
+  60%,
+  90% {
+    transform: translateX(12%);
+  }
+}
+
+.leg {
+  animation-name: rotateLegs;
+  transform-origin: bottom left;
+  transform-box: fill-box;
+  transform: translateX(16%) rotate(-10deg);
+}
+
+@keyframes rotateLegs {
+  0%,
+  50%,
+  100% {
+    transform: translateX(16%) rotate(-10deg);
+  }
+  60%,
+  90% {
+    transform: translateX(35%) rotate(-83deg);
+  }
+}
+
+.head {
+  animation-name: lookDown;
+  transform-origin: top right;
+  transform-box: fill-box;
+}
+
+@keyframes lookDown {
+  0%,
+  55%,
+  100% {
+    transform: rotateZ(0) translate(0, 0);
+  }
+  60%,
+  90% {
+    transform: rotateZ(5deg) translate(2.5%, 6%);
+  }
+}
+
+.tail {
+  animation-name: moveTail;
+  transform-origin: bottom center;
+}
+
+@keyframes moveTail {
+  0%,
+  50%,
+  90%,
+  100% {
+    d: path(
+      "m 161.6285,568.63016 20.92664,-20.00034 C 151.50961,521.73829 14.092,504.432 14.092,504.432 c 0,0 128.8135,26.71916 147.5365,64.19816 z"
+    );
+  }
+  64%,
+  70%,
+  76%,
+  82% {
+    d: path(
+      "m 161.6285,568.63016 20.92664,-20.00034 C 151.50961,521.73829 77.565044,422.94078 77.565044,422.94078 c 0,0 65.340456,108.21038 84.063456,145.68938 z"
+    );
+  }
+  60%,
+  66%,
+  72%,
+  78%,
+  84% {
+    d: path(
+      "m 161.6285,568.63016 20.92664,-20.00034 C 151.50961,521.73829 14.092,504.432 14.092,504.432 c 0,0 128.8135,26.71916 147.5365,64.19816 z"
+    );
+  }
+  62%,
+  68%,
+  74%,
+  80%,
+  86% {
+    d: path(
+      "m 161.6285,568.63016 20.92664,-20.00034 C 151.50961,521.73829 159.419,390.74 159.419,390.74 c 0,0 -16.5135,140.41116 2.2095,177.89016 z"
+    );
+  }
+}
+
+.tail-blur {
+  animation-name: tailBlur;
+  transform-origin: bottom center;
+}
+
+@keyframes tailBlur {
+  0%,
+  59%,
+  90%,
+  100% {
+    opacity: 0;
+  }
+  64%,
+  70%,
+  76%,
+  82% {
+    transform: rotate(-2deg);
+    opacity: 0;
+  }
+  60%,
+  66%,
+  72%,
+  78%,
+  84% {
+    opacity: 0.3;
+  }
+  62%,
+  68%,
+  74%,
+  80%,
+  86% {
+    transform: rotate(2deg);
+    opacity: 0;
+  }
+}
+
+.shadow {
+  animation-name: scaleShadow;
+  transform-origin: center center;
+}
+
+@keyframes scaleShadow {
+  0%,
+  55%,
+  100% {
+    transform: scaleX(1) translateX(0);
+  }
+  60%,
+  90% {
+    transform: scaleX(1.1) translateX(4%);
+  }
+}
+
+EOF
+    return result
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.return_css_for_the_simple_calculator
+  #
+  # This is the CSS that handles the simple calculator. This calculator
+  # can be easily embedded "into" a given webpage.
+  #
+  # The first argument can be a Hash - this explains why the body of
+  # the method has to remain somewhat flexible.
+  # ========================================================================= #
+  def self.return_css_for_the_simple_calculator(
+      font_size_to_use         = '16px',
+      background_colour_to_use = '#538fbe'
+    )
+    # ======================================================================= #
+    # === Handle Hashes given to this method first:
+    # ======================================================================= #
+    if font_size_to_use.is_a?(Hash)
+      _ = font_size_to_use
+      # ===================================================================== #
+      # === :background_colour
+      # ===================================================================== #
+      if _.has_key?(:background_colour)
+        background_colour_to_use = _.delete(:background_colour)
+      end
+      # ===================================================================== #
+      # === :font_size_to_use
+      # ===================================================================== #
+      if _.has_key?(:font_size_to_use)
+        font_size_to_use = _.delete(:font_size_to_use)
+      end
+    end
+    return '
+/*
+ * This here is for the default CSS calculator. Each individual clickable
+ * "button" of the calculator will have these CSS rules.
+ *
+ * It is part of the .css file here because we may want to
+ * easily re-use this in sinatra as well.
+ */
+.input_for_the_calculator
+{
+  display: inline-block;
+  text-decoration: none;
+  color: #fff;
+  font-weight: bold;
+  margin: 12px;
+  padding: 12px;
+  width: 60px;
+  text-align: center;
+  background-image: -webkit-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
+  box-shadow: 12px 5px 0px #2b638f, 0px 3px 10px rgba(0,0,0,.2);
+  border: 2px dotted #2d6898;
+  font-size: '+font_size_to_use.to_s+';
+  background-color: '+background_colour_to_use.to_s+';
+}
+     '
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.css_rules_for_the_polaroid_card_effect
+  # ========================================================================= #
+  def self.css_rules_for_the_polaroid_card_effect(
+      width      = '300px',
+      min_height = '240px'
+    )
+    return '
+    .polaroid_card {
+  background-color: var(--background);
+  display:    block;
+  width:      '+width.to_s+';
+  min-height: '+min_height.to_s+';
+  cursor: pointer;
+  padding: 15px;
+  border: 3px solid var(--primary);
+  box-shadow:
+    10px -10px 0 -3px var(--background), 10px -10px var(--green),
+    20px -20px 0 -3px var(--background), 20px -20px var(--yellow),
+    30px -30px 0 -3px var(--background), 30px -30px var(--orange),
+    40px -40px 0 -3px var(--background), 40px -40px var(--red);
+}
+
+.polaroid_card:hover {
+  animation: shadow_wave_animation 1s ease infinite;
+}
+
+@keyframes shadow_wave_animation {
+  0% {
+    border: 3px solid var(--primary);
+    box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--green),
+      20px -20px 0 -3px var(--background), 20px -20px var(--yellow),
+      30px -30px 0 -3px var(--background), 30px -30px var(--orange),
+      40px -40px 0 -3px var(--background), 40px -40px var(--red);
+  }
+  20% {
+    border: 3px solid var(--red);
+    box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--primary),
+      20px -20px 0 -3px var(--background), 20px -20px var(--green),
+      30px -30px 0 -3px var(--background), 30px -30px var(--yellow),
+      40px -40px 0 -3px var(--background), 40px -40px var(--orange);
+  }
+  40% {
+    border: 3px solid var(--orange);
+    box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--red),
+      20px -20px 0 -3px var(--background), 20px -20px var(--primary),
+      30px -30px 0 -3px var(--background), 30px -30px var(--green),
+      40px -40px 0 -3px var(--background), 40px -40px var(--yellow);
+  }
+  60% {
+    border: 3px solid var(--yellow);
+    box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--orange),
+      20px -20px 0 -3px var(--background), 20px -20px var(--red),
+      30px -30px 0 -3px var(--background), 30px -30px var(--primary),
+      40px -40px 0 -3px var(--background), 40px -40px var(--green);
+  }
+  80% {
+    border: 3px solid var(--green);
+    box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--yellow),
+      20px -20px 0 -3px var(--background), 20px -20px var(--orange),
+      30px -30px 0 -3px var(--background), 30px -30px var(--red),
+      40px -40px 0 -3px var(--background), 40px -40px var(--primary);
+  }
+  100% {
+    border: 3px solid var(--primary);
+    box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--green),
+      20px -20px 0 -3px var(--background), 20px -20px var(--yellow),
+      30px -30px 0 -3px var(--background), 30px -30px var(--orange),
+      40px -40px 0 -3px var(--background), 40px -40px var(--red);
+  }
+  
+}
+
+:root {
+  --primary:    #22D2A0;
+  --secondary:  #192824;
+  --background: #192824;
+  --green:      #1FC11B;
+  --yellow:     #FFD913;
+  --orange:     #FF9C55;
+  --red:        #FF5555;
+}
+
+.polaroid_card p {
+  font-family: "Archivo", sans-serif;
+  font-size: 25px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 10px;
+  color: var(--primary);
+  box-sizing: border-box;
+}
+
+.polaroid_card h2 {
+  font-size: 14px;
+  font-family: "Archivo Black", "Archivo", sans-serif;
+  font-weight: normal;
+  color: var(--primary);
+  box-sizing: border-box;
+}
+
+'
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.css_rules_for_the_submarine_component
+  # ========================================================================= #
+  def self.css_rules_for_the_submarine_component
+    result = <<-EOF
+.outer_container_for_the_submarine {
+  position: absolute;
+  top: 0%;
+  left: 0%;
+  width: 100%;
+  height: 100%;
+  background: #130560;
+  overflow: hidden;
+}
+.submarine__container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 400px;
+  height: 200px;
+  transform: translate(-50%, -50%);
+}
+.submarine__body {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 250px;
+  height: 80px;
+  background: #e30449;
+  border-radius: 50px;
+  transform: translate(-50%, -50%);
+}
+.submarine__propeller {
+  position: absolute;
+  left: 80%;
+  top: 50%;
+  width: 30px;
+  height: 50px;
+  transform: translate(0%, -50%);
+  perspective: 600px;
+}
+.propeller__perspective {
+  width: 100%;
+  height: 100%;
+  transition: transform 1s;
+  transform-style: preserve-3d;
+  animation: rotateInfinite 1s linear infinite;
+  cursor: pointer;
+}
+.submarine__propeller-parts {
+  position: absolute;
+  left: 0%;
+  width: 100%;
+  height: 100%;
+  top: 0%;
+  perspective: 1000px;
+  transform-style: preserve-3d;
+}
+.darkOne {
+  top: 0%;
+  background: #f7ac08;
+  transform: rotateY(180deg) rotateX(225deg);
+}
+.lightOne {
+  top: 0%;
+  background: #f7e349;
+  transform: rotateX(45deg);
+}
+.submarine__sail {
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  width: 90px;
+  height: 50px;
+  transform: translate(-50%, -100%);
+  background: #c6003d;
+  clip-path: polygon(0% 0%, 70% 0%, 100% 100%, 0% 100%);
+}
+.submarine__sail-shadow {
+  position: absolute;
+  width: 160%;
+  height: 10%;
+  background: #a10532;
+  border-radius: 5px;
+}
+.dark1 {
+  left: 0%;
+  top: 0%;
+  transform: translate(0%, -33%);
+}
+.dark2 {
+  left: 0%;
+  top: 50%;
+}
+.light1 {
+  left: 20%;
+  top: 20%;
+  width: 50%;
+  background: #ef689e;
+}
+.submarine__window {
+  width: 25px;
+  height: 25px;
+  border-radius: 100%;
+  background-image: linear-gradient(45deg, #c9e5d9, #fff);
+  border: 8px solid #a10532;
+  z-index: 10;
+  animation: shadow-change 1s linear infinite;
+}
+.one, 
+.two {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.one {
+  left: 40%;
+}
+.two {
+  left: 20%;
+}
+.submarine__shadow-dark {
+  position: absolute;
+  left: 70%;
+  top: 50%;
+  width: 70px;
+  height: 10px;
+  border-radius: 5px;
+  transform: translate(-50%, -50%);
+  background: #a10532;
+}
+.submarine__shadow-light {
+  position: absolute;
+  left: 35%;
+  top: 13%;
+  width: 100px;
+  height: 6px;
+  border-radius: 5px;
+  transform: translate(-50%, -50%);
+  background: #ef689e;
+}
+.submarine__shadow-arcLight {
+  position: absolute;
+  top: 65%;
+  left: 80%;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #ef689e;
+}
+.submarine__periscope {
+  position: absolute;
+  top: 0%;
+  left: 40%;
+  width: 20px;
+  height: 50px;
+  border-right: 10px solid #e92d77;
+  border-top: 10px solid #c6003d;
+  border-left: 0px solid transparent;
+  border-bottom: 0px solid transparent;
+  border-top-right-radius: 10px;
+}
+.submarine__periscope-glass {
+  position: absolute;
+  left: 40%;
+  top: 0%;
+  width: 5px;
+  height: 15px;
+  background: #f7ac08;
+  transform: translate(-50%, -15%);
+}
+.light {
+  position: absolute;
+  top: 0%;
+  left: 0%;
+  width: 500px;
+  height: 100px;
+  background: linear-gradient(to left, #817e97, #130560);
+	/* The points are: centered top, left bottom, right bottom */
+  clip-path: polygon(0% 0%, 50% 45%, 50% 55%, 0% 100%);
+  transform: translate(-18%, -45%);
+}
+
+.bubbles__container {
+  position: absolute;
+  top: 50%;
+  left: 55%;
+  width: 100px;
+  height: 50px;
+  transform: translate(100%, -50%);
+}
+.bubbles {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 100%;
+  left: 5%;
+  top:  5%;
+  background: #fff;
+  opacity: 0.8;
+}
+.bubble-1 {
+  top: 15%;
+  left: 1%;
+  opacity: 0;
+  animation: move-right 1s infinite linear;
+  animation-delay: 0.25s;
+}
+.bubble-2 {
+  top: 30%;
+  left: 1%;
+  opacity: 0;
+  animation: move-right 1s infinite linear;
+  animation-delay: 0.5s;
+}
+.bubble-3 {
+  top: 45%;
+  left: 1%;
+  opacity: 0;
+  animation: move-right 1s infinite linear;
+  animation-delay: 0.75s;
+}
+.bubble-4 {
+  top: 60%;
+  left: 1%;
+  opacity: 0;
+  animation: move-right 1s infinite linear;
+  animation-delay: 1s;
+}
+.ground__container {
+  position: absolute;
+  top: 75%;
+  left: 0%;
+  width: 100%;
+  height: 25%;
+  background: #08003b;
+  margin-top: 20px;
+}
+.ground1 {
+  top: 75%;
+  height: 100%;
+  background: #0c0051;
+}
+.ground2 {
+  position: absolute;
+  top: 35%;
+  width: 100%;
+  height: 100%;
+  background: #08003b;
+}
+.ground span {
+  position: absolute;
+  width: 60px;
+  height: 60px;
+  border-radius: 100%;
+}
+.ground1 span {
+  background: #0c0051;
+}
+.ground2 span {
+  background: #08003b;
+  width: 80px;
+  height: 80px;
+  border-radius: 100%;
+  transform: translateY(30%);
+}
+.up-1 {
+  left: 0%;
+  top: -2px;
+  animation: moveThegroundRight 3s infinite linear;
+}
+.up-2 {
+  left: -10%;
+  top: -4px;
+  animation: moveThegroundRight 4s infinite linear;
+}
+.up-3 {
+  left: -20%;
+  top: -6px;
+  animation: moveThegroundRight 5s infinite linear;
+}
+.up-4 {
+  left: -30%;
+  top: -8px;
+  animation: moveThegroundRight 6s infinite linear;
+}
+.up-5 {
+  left: -40%;
+  top: -10px;
+  animation: moveThegroundRight 7s infinite linear;
+}
+.up-6 {
+  left: -50%;
+  top: -12px;
+  animation: moveThegroundRight 8s infinite linear;
+}
+.up-7 {
+  left: -60%;
+  top: -14px;
+  animation: moveThegroundRight 9s infinite linear;
+}
+.up-8 {
+  left: -70%;
+  top: -16px;
+  animation: moveThegroundRight 10s infinite linear;
+}
+.up-9 {
+  left: -80%;
+  top: -18px;
+  animation: moveThegroundRight 11s infinite linear;
+}
+.up-10 {
+  left: -90%;
+  top: -20px;
+  animation: moveThegroundRight 12s infinite linear;
+}
+.up-11 {
+  left: -100%;
+  top: -22px;
+  animation: moveThegroundRight 13s infinite linear;
+}
+.up-12 {
+  left: -110%;
+  top: -24px;
+  animation: moveThegroundRight 14s infinite linear;
+}
+.up-13 {
+  left: -120%;
+  top: -26px;
+  animation: moveThegroundRight 15s infinite linear;
+}
+.up-14 {
+  left: -130%;
+  top: -28px;
+  animation: moveThegroundRight 16s infinite linear;
+}
+.up-15 {
+  left: -140%;
+  top: -30px;
+  animation: moveThegroundRight 17s infinite linear;
+}
+.up-16 {
+  left: -150%;
+  top: -32px;
+  animation: moveThegroundRight 18s infinite linear;
+}
+.up-17 {
+  left: -160%;
+  top: -34px;
+  animation: moveThegroundRight 19s infinite linear;
+}
+.up-18 {
+  left: -170%;
+  top: -36px;
+  animation: moveThegroundRight 20s infinite linear;
+}
+.up-19 {
+  left: -180%;
+  top: -38px;
+  animation: moveThegroundRight 21s infinite linear;
+}
+.up-20 {
+  left: -190%;
+  top: -40px;
+  animation: moveThegroundRight 22s infinite linear;
+}
+
+@keyframes shadow-change {
+  0%, 100% {
+	  background-image: linear-gradient(45deg, #c9e5d9 0%, #c9e5d9 20%, #fff 21%, #fff 39%, #c9e5d9 40%, #fff 41%, #fff 59%, #c9e5d9 60%);
+	}
+  20% {
+	  background-image: linear-gradient(45deg, #c9e5d9 20%, #c9e5d9 40%, #fff 41%, #fff 59%, #c9e5d9 60%, #fff 61%, #fff 79%, #c9e5d9 80%);
+	}
+  40% {
+	  background-image: linear-gradient(45deg, #c9e5d9 40%, #c9e5d9 60%, #fff 61%, #fff 79%, #c9e5d9 80%, #fff 81%, #fff 99%, #c9e5d9 0%);
+	}
+  60% {
+	  background-image: linear-gradient(45deg, #c9e5d9 60%, #c9e5d9 80%, #fff 81%, #fff 99%, #c9e5d9 0%, #fff 1%, #fff 19%, #c9e5d9 20%);
+	}
+  80% {
+	  background-image: linear-gradient(45deg, #c9e5d9 80%, #c9e5d9 0%, #fff 1%, #fff 19%, #c9e5d9 20%, #fff 21%, #fff 39%, #c9e5d9 40%);
+	}
+}
+
+@keyframes move-right {
+  0% {
+	  opacity: 0;
+	}
+  10% {
+	  opacity: 0.4;
+	  transform: translate(10%, 10%);
+	}
+  50% {
+	  opacity: 0.2;
+	  transform: translate(450%, 25%);
+	}
+  80% {
+	  opacity: 0;
+	  transform: translateX(555%);
+	}
+  100% {
+	  opacity: 0;
+	  left: 0%;
+	  top: 0%;
+	}
+}
+
+@keyframes rotateInfinite {
+  0% {
+	  transform: rotateX(0deg);
+	}
+  50% {
+	  transform: rotateX(180deg);
+	}
+  100% {
+	  transform: rotateX(360deg);
+	}
+}
+ @keyframes moveThegroundRight {
+  90% {
+	  opacity: 1;
+	  left: 100%;
+	}
+  95%, 100% {
+	  left: 1050%;
+	  opacity: 0;
+	}
+}
+EOF
+    return result
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.return_css_for_sunny_weather
+  # ========================================================================= #
+  def self.return_css_for_sunny_weather
+    return '
+/* Weather: SUNNY */
+.weather_sunny { 
+  animation:  animation_sunny 15s linear infinite;
+  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); 
+  height: 140px;
+  width: 20px; 
+  margin-left: -15px;
+  position: absolute;
+  left: 90px;  
+  top: 20px;
+}
+.weather_sunny:before {
+  background-color: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
+  content: ''; 
+  height: 140px; 
+  width: 20px;
+  opacity: 1; 
+  position: absolute;
+  bottom: 0px;
+  left: 0px; 
+  transform: rotate(90deg);
+}
+.weather_sunny:after {
+  background-color: #FFEE44; 
+  border-radius: 50%; 
+  box-shadow: rgba(255,255,0,0.2) 0 0 0 15px;
+  content: '';  
+  height: 80px;
+  width: 80px;  
+  position: absolute; 
+  left: -30px; 
+  top: 30px;
+}
+
+.weather_container {
+  background-color: linear-gradient(left, #00BBFF, #00BBFF 14.3%, #2EB5E5 14.3%, #2EB5E5 28.6%, #E6E6E6 28.6%, #E6E6E6 42.9%, #F3D166 42.9%, #F3D166 57.2%, #222233 57.2%, #222233 71.5%, #444444 71.5%, #444444 85.8%, #85DB8C 85.8%);
+  transform: scale(.9);
+  width: 1200px;
+  position: absolute;
+  height: 210px;
+  left: 50%;
+  top: 50%;
+  margin: -65px -600px;
+}
+
+@keyframes animation_sunny { 
+  0%    { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+'
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.return_css_for_tetris
+  #
+  # This is the CSS that will be returned when we want to enable the small
+  # tetris-game that is distributed with the cyberweb project.
+  # ========================================================================= #
+  def self.return_css_for_tetris
+    return 'canvas#tetris {
+  position: absolute;
+  top: 45%;
+  left: 50%;
+  width: 640px;
+  height: 640px;
+  margin: -320px 0 0 -320px;
+}
+    '
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.return_this_css_component
+  # ========================================================================= #
+  def self.return_this_css_component(
+      i = :animated_bike
+    )
+    i = i.to_s.dup
+    unless i.end_with? '.css'
+      i << '.css'
+    end
+    unless i.include? '/'
+      i.prepend(
+        Cyberweb.project_base_directory?+
+        'cascading_style_sheets/custom/'
+      )
+    end
+    # ======================================================================= #
+    # i will now be something like:
+    #
+    #   /usr/lib/ruby/site_ruby/3.1.0/cyberweb/cascading_style_sheets/custom/animated_bike.css
+    #
+    # ======================================================================= #
+    if File.exist? i
+      i = File.read(i)
+    end
+    return i
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.return_the_content_of_these_css_classes
+  #
+  # This method will take CSS classes, find the corresponding rule for
+  # them and then return this rule as a String.
+  #
+  # Usage example:
+  #
+  #   x = Cyberweb.return_the_content_of_these_css_classes('input_for_the_calculator')
+  #
+  # ========================================================================= #
+  def self.return_the_content_of_these_css_classes(
+      these_css_classes = 'BG_BLACK pad0_4em'
+    )
+    original_input = ''.dup
+    Dir[
+      DIRECTORY_WITH_CSS_FILES+'*.css'
+    ].each {|this_css_file|
+      original_input << File.read(this_css_file)
+      original_input << "\n"
+    }
+    _ = ''.dup
+    these_css_classes = [these_css_classes].flatten.compact.map {|entry|
+      if entry.include? ' '
+        entry = entry.split(' ')
+      end
+      entry
+    }
+    these_css_classes.flatten!
+    these_css_classes.each {|this_css_class|
+      use_this_regex = /^(\.#{this_css_class}.+)$/
+      original_input =~ use_this_regex
+      _ << $1.to_s.dup+"\n"
+    }
+    return _
+  end; self.instance_eval { alias embed_these_css_classes return_the_content_of_these_css_classes } # === Cyberweb.embed_these_css_classes
+
+  # ========================================================================= #
+  # === Cyberweb.return_content_of_all_the_CSS_files
+  #
+  # This method will return, as a String, the content of all .css files
+  # distributed within the Cyberweb project. (Or, more accurately, those
+  # that are registered to be distributed.)
+  #
+  # The method can only return the content of just one .css file too;
+  # simply pass it in as the argument to the method, as the following
+  # example showcases.
+  #
+  # Usage example:
+  #
+  #   x = Cyberweb.return_this_internal_css_file_as_a_string('misc.css')
+  #
+  # ========================================================================= #
+  def self.return_content_of_all_the_CSS_files(
+      array = Cyberweb::ARRAY_LOCAL_CSS_FILES
+    )
+    _ = ''.dup
+    # ======================================================================= #
+    # The next [] is necessary because the input may also be a String,
+    # yet we must use .each on the input.
+    # ======================================================================= #
+    [array].flatten.compact.each {|this_css_file|
+      target_file = DIRECTORY_WITH_CSS_FILES+
+                    this_css_file
+      target_file << '.css' unless target_file.end_with? '.css'
+      if File.exist? target_file
+        _ << File.read(target_file)
+        _ << "\n"
+      end
+    }
+    return _
+  end; self.instance_eval { alias return_this_internal_css_file_as_a_string return_content_of_all_the_CSS_files } # === Cyberweb.return_this_internal_css_file_as_a_string
+
+  # ========================================================================= #
+  # === Cyberweb.return_this_css_style                            (style tag)
+  #
+  # This method returns a proper CSS <style> tag, that is one that
+  # starts with <style> and ends with </style>.
+  #
+  # RANDOM_COLOUR is a special "macro" but you may also use RAND or
+  # similar "macros" to get a random colour. Getting a random colour
+  # may be useful in the event that you do not want to come up with
+  # a colour scheme on your own.
+  #
+  # Personally I use this when I do not want to lookup a colour name.
+  #
+  # Example of what this method may return:
+  #
+  #   "<style>color: green</style>"
+  #
+  # ========================================================================= #
+  def self.return_this_css_style(
+      i            = '', # This is css_style.
+      use_newlines = true
+    )
+    case use_newlines
+    when :do_not_use_newlines,
+         :remove_newlines
+      use_newlines = false
+    end
+    _ = ''.dup # This will be the return result.
+    i = i.join(N) if i.is_a? Array # Need to convert Arrays.
+    if i.is_a? Hash
+      if i.has_key? :style
+        i = i.delete(:style)
+      end
+    end
+    i = i.to_s
+    unless i.empty?
+      if i.include? 'FS'
+        i.gsub!(/FS(.+)em/, 'font-size:\\1em')
+      end
+      # ===================================================================== #
+      # How to use the following? Simple. Simply add in your css stuff
+      # a line like this:
+      #   body { RANDOM_BACKGROUND_IMAGE }
+      # ===================================================================== #
+      if i.include? 'RANDOM_BACKGROUND_IMAGE'
+        i.gsub!(/RANDOM_BACKGROUND_IMAGE/,
+          'background-image: url("'+@fixed_path+'images/'+return_random_image+'");
+           background-repeat: no-repeat;')
+      end
+      # ===================================================================== #
+      # === Add the <style> opening tag next
+      # 
+      # Next, add <style> tag, or <style type="text/css">
+      # ===================================================================== #
+      if ::Cyberweb.is_html5?
+        _ << '<style>'
+      else
+        _ << '<style type="text/css">'
+      end
+      _ << NL if use_newlines
+      # ===================================================================== #
+      # i = remove_newlines(i)
+      # ^^^ We can not remove newlines, as the css style may have
+      # more than one line.
+      # ===================================================================== #
+      # ===================================================================== #
+      # === Handle border-double pseudo-CSS element
+      #
+      # The next construct is a pseudo-CSS element. border double means 
+      # top and bottom border on an element.
+      # ===================================================================== #
+      if i.include? 'border-double:'
+        i.gsub!(/border-double:(.+);/,'border-top: \\1; border-bottom: \\1;')
+      end
+      # ===================================================================== #
+      # === Handle colour-input next
+      # ===================================================================== #
+      i = ::Cyberweb.sanitize_for_colours(i) # Since as of Jul 2011. bl $CYBERWEB/colours/colours.rb
+      # ===================================================================== #
+      # RANDOM_BORDER
+      # ===================================================================== #
+      if i.include? 'RANDOM_BORDER'
+        regex = /RANDOM_BORDER_(.+)/
+        match = i.match(regex)[1]
+        i.gsub!(regex, ::Cyberweb.return_random_border(match))
+      end
+      _ << i
+      _ << NL if use_newlines
+      _ << '</style>'
+      _ << NL if use_newlines
+    end
+    return _
+  end; self.instance_eval { alias style_tag return_this_css_style } # === Cyberweb.style_tag
+       self.instance_eval { alias css_style return_this_css_style } # === Cyberweb.css_style
+
+  # ========================================================================= #
+  # === listing_css=
+  #
+  # Use this method to modify the "global" variable @listing_css_object.
+  #
+  # You can also use the method listing_css instead.
+  #
+  # Usage example:
+  #
+  #   Cyberweb.listing_css = '<b class="red">'
+  #
+  # ========================================================================= #
+  def listing_css=(i)
+    ::Cyberweb.listing_css_object = i
+  end; alias listing_css listing_css= # === listing_css
+
+  # ========================================================================= #
+  # === Cyberweb.css_comment
+  #
+  # This method will simply make a CSS comment.
+  # ========================================================================= #
+  def self.css_comment(i)
+    return "/* #{i} */#{NL}"
+  end
+
+  # ========================================================================= #
+  # === TEMPLATES
+  #
+  # Next we load up some css templates.
+  # ========================================================================= #
+
+  # ========================================================================= #
+  # === Cyberweb::TEMPLATE1
+  # ========================================================================= #
+  if File.exist? PROJECT_BASE_DIR+CSS_FILES.first
+    TEMPLATE1 = File.readlines(
+      PROJECT_BASE_DIR+CSS_FILES.first,
+        encoding: ::Cyberweb.main_encoding?
+    ).join('') # <- This is cascading_style_sheets/default.css
+  else
+    TEMPLATE1 = ''
+  end
+
+  # ========================================================================= #
+  # === TEMPLATE2
+  # ========================================================================= #
+  if File.exist? DIRECTORY_WITH_CSS_FILES+'template2.css'
+    TEMPLATE2 = File.readlines(
+      DIRECTORY_WITH_CSS_FILES+'template2.css',
+        encoding: ::Cyberweb.main_encoding?
+    ).join('')
+  else
+    TEMPLATE2 = ''
+  end
+
+  # ========================================================================= #
+  # === CODE_TEMPLATE
+  # ========================================================================= #
+  if File.exist? DIRECTORY_WITH_CSS_FILES+'code.css'
+    CODE_TEMPLATE = File.readlines(
+      DIRECTORY_WITH_CSS_FILES+'code.css',
+        encoding: ::Cyberweb.main_encoding?
+    ).join('')
+  else
+    CODE_TEMPLATE = ''
+  end
+
+  # ========================================================================= #
+  # === TEMPLATE_RUBY_REGEX
+  # ========================================================================= #
+  if File.exist? DIRECTORY_WITH_CSS_FILES+'ruby_regexes.css'
+    TEMPLATE_RUBY_REGEX = File.readlines(
+      "#{DIRECTORY_WITH_CSS_FILES}ruby_regexes.css",
+        encoding: ::Cyberweb.main_encoding?
+    ).join('')
+  else
+    TEMPLATE_RUBY_REGEX = ''
+  end
+
+  # ========================================================================= #
+  # === @array_found_these_css_classes
+  #
+  # This Array will be populated whenever a css class is used in a
+  # WebApp.
+  #
+  # These css classes will be stored in a unique fashion.
+  #
+  # NO duplicates!
+  # ========================================================================= #
+  @array_found_these_css_classes = []
+
+  # ========================================================================= #
+  # === Cyberweb.print_this_css
+  #
+  # Use this to print your custom css style.
+  # ========================================================================= #
+  def self.print_this_css(css)
+    ee return_this_css_style(css)
+  end; self.instance_eval { alias add_css_style print_this_css } # === Cyberweb.add_css_style (Added 12.11.2014)
+       self.instance_eval { alias inline_css    print_this_css } # === Cyberweb.inline_css
+
+  # ========================================================================= #
+  # === Cyberweb.output_this_css_style
+  # ========================================================================= #
+  def self.output_this_css_style(i)
+    print return_this_css_style(i) 
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.generate_cap_box
+  #
+  # Code in this method can be used to generate a "cap-box", which is
+  # mostly a div header with some content.
+  #
+  # The method also accepts a Block, such as:
+  #
+  #   {{ width: '80%' }}
+  #
+  # ========================================================================= #
+  def self.generate_cap_box(
+      use_this_title_for_the_upper_box = 'Hello world!',
+      # ===================================================================== #
+      # The next variable is the inner content - by default it will
+      # be empty.
+      # ===================================================================== #
+      title_for_the_content_header     = '',
+      inner_content                    = '', # This is the inner content.<br>Looks fancy!<br>',
+      border_to_use                    = '3px solid #2a2a2a',
+      box_width                        = '700px'
+    )
+    if block_given?
+      yielded = yield
+      if yielded.is_a? Hash
+        # =================================================================== #
+        # === :width
+        # =================================================================== #
+        if yielded.has_key? :width
+          box_width = yielded.delete(:width).to_s
+        end
+      end
+    end
+    css_style_to_use = '#cap_box_container {
+  border: '+border_to_use+';
+  background: #ddd;
+  box-shadow: 0 0 5px #b1b1b1;
+}
+
+.cap_box_wrapper {
+  font-family: Arial, Arial, Helvetica, sans-serif;
+  width: '+box_width+';
+  line-height: 1.5;
+  margin: 0 auto;
+}
+
+.cap_box_header {
+  background: #222;
+  border: 5px solid #444;
+  padding: 10px;
+  margin: 0 -35px 20px;
+  position: relative;
+}
+
+.cap_box_header .cap_box_inner {
+  overflow: hidden;
+  color: #fff;
+}
+
+#cap_box_top_main_area {
+  margin-top: 20px;
+  padding: 0 20px 90px;
+  background-color: #fff;
+}
+
+/* This is the shadow on the left hand side. */
+.cap_box_header .triangle_on_the_left_hand_side {
+  border: 10px solid black;
+  border-color: transparent transparent black;
+  width: 0;
+  height: 0;
+  display: block;
+  position: absolute;
+  bottom: -15px;
+  left: 0;
+  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+}
+
+/* This is the shadow on the right hand side. */
+.cap_box_header .triangle_on_the_right_hand_side {
+  border: 10px solid black;
+  border-color: black transparent transparent;
+  width: 0;
+  height: 0;
+  display: block;
+  position: absolute;
+  top: -15px;
+  right: 0;
+  transform: rotate(45deg);
+}'.dup
+    return return_this_css_style(
+      css_style_to_use.to_s
+    ).to_s+
+    div('cap_box_wrapper', id: 'drag_cap_box_wrapper') {
+      div(id: 'cap_box_container') {
+        div(id: 'cap_box_top_main_area') {
+          div('cap_box_header') {
+            div('cap_box_inner') {
+              ee "<b>#{use_this_title_for_the_upper_box}</b>"
+            }
+            ee '<span class="triangle_on_the_left_hand_side"></span>
+                <span class="triangle_on_the_right_hand_side"></span>'
+          }
+          if title_for_the_content_header and !title_for_the_content_header.empty?
+            h1_id(title_for_the_content_header.dup)
+          end
+          ee inner_content
+        }
+      }
+    }
+  end
+
+  # ========================================================================= #
+  # === found_these_css_classes?
+  #
+  # Return which CSS classes we found. That array gets populated
+  # through the method return_css_class() - see below.
+  # ========================================================================= #
+  def found_these_css_classes?
+    ::Cyberweb.found_these_css_classes
+  end
+
+  # ========================================================================= #
+  # === generate_info_box
+  #
+  # The original was taken from:
+  #
+  #   http://aktuell.de.selfhtml.org/artikel/css/infobox/
+  #
+  # ========================================================================= #
+  def generate_info_box(
+      text_to_be_shown_on_the_popup_box = 'Lorem ipsum dolor sit amet,
+      consectetuer adipiscing elit, sed diam nonummy nibh euismod
+      tincidunt ut laoreet dolore magna aliquam erat volutpat.'
+    )
+    ee '<style type="text/css">
+img {
+  border:none;
+}
+
+#infobox {
+  height:  80px;
+  width:   80px;
+  padding:  0;
+  margin: 20px;
+  border: 1px solid black;
+  font:   bold 14px verdana, sans-serif;
+}
+
+#infobox div { display:none; }
+
+#infobox:hover div{
+  display: block;
+  width:   400px;
+  position:absolute;
+  top:  95%;
+  right:5px;
+  border:2px dashed black;
+  padding:18px;
+  font:normal 15px verdana, sans-serif;
+}
+
+</style>
+<div id="infobox">
+<a href="beispiel3b.htm">
+<img src="https://i.imgur.com/nSuF9W9.png" width="80" height="80" alt="schmetterling">
+</a>
+
+<div><p><strong>INFO</strong></p>
+ <p>'+text_to_be_shown_on_the_popup_box+'</p>
+ <p><img src="https://i.imgur.com/nSuF9W9.png" height="150" alt=""></p>
+ <ul>
+  <li>Lorem ipsum dolor sit amet</li>
+  <li>Lorem ipsum dolor sit amet</li>
+  <li>Lorem ipsum dolor sit amet</li>
+ </ul>
+</div>'
+  end; alias add_info_box generate_info_box # === add_info_box
+
+  # ========================================================================= #
+  # === css_comment
+  # ========================================================================= #
+  def css_comment(i)
+    ::Cyberweb.css_comment(i)
+  end
+
+  # ========================================================================= #
+  # === report_which_css_classes_were_found
+  #
+  # Report which css classes we have found.
+  # ========================================================================= #
+  def report_which_css_classes_were_found(
+      i = found_these_css_classes?
+    )
+    i.each_with_index {|entry, index|
+      index += 1
+      e '('+index.to_s+') <b>'+entry+'</b>'
+    }
+  end
+
+  # ========================================================================= #
+  # === print_css_class
+  #
+  # Prints a CSS class.
+  # ========================================================================= #
+  def print_css_class(css_class)
+    ee return_css_class(css_class)
+  end
+
+  # ========================================================================= #
+  # === print_css_style
+  #
+  # Will simply print the css style to use.
+  # ========================================================================= #
+  def print_css_style(css_style = '')
+    ee return_css_style(css_style)
+  end
+
+  # ========================================================================= #
+  # === include_css
+  #
+  # Use this method to include a CSS file. The first given argument to
+  # this method, `css_file`, needs to specify the _full_ location to
+  # the .css file in question.
+  #
+  # We will also append '.css' if this is missing.
+  # ========================================================================= #
+  def include_css(css_file)
+    css_file << '.css' unless css_file.end_with? '.css'
+    css_file = '<link rel="stylesheet" type="text/css" href="'+css_file+'" />'
+    css_file << NL
+    return css_file
+  end; alias include_css_file include_css # === include_css
+       alias link_to_css_file include_css # === link_to_css_file
+
+  # ========================================================================= #
+  # === string_my_css
+  #
+  # This method will return CSS as string
+  #
+  # As my_css but will just returns a string.
+  # string_my_css(input)
+  # ========================================================================= #
+  def string_my_css(
+      input,
+      use_these_css_files = ARRAY_DEFAULT_CSS_FILES_TO_INCLUDE
+    )
+    output = ''
+    _ = '<link rel="stylesheet" type="text/css" href="'
+    input << 'cyberweb/cascading_style_sheets/'
+    use_these_css_files.each {|css_file|
+      output << (
+        _+input+css_file+'.css" />' + NL
+      )
+    }    
+    return output
+  end
+
+  # ========================================================================= #
+  # === print_css
+  #
+  # Prints generic CSS. Hmmmmm
+  # ========================================================================= #
+  def print_css(
+      change_to = ::Cyberweb.converted_path,
+      print_all = true
+    )
+    ee return_css(change_to, print_all)
+  end
+
+  # ========================================================================= #
+  # === return_this_css_style
+  # ========================================================================= #
+  def return_this_css_style(
+      i,
+      use_newlines = true
+    )
+    return ::Cyberweb.return_this_css_style(i, use_newlines)
+  end; alias css_style= return_this_css_style # === css_style=
+
+  # ========================================================================= #
+  # === return_css_style
+  # ========================================================================= #
+  def return_css_style(i = '')
+    ::Cyberweb.return_css_style(i)
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.return_css_style
+  #
+  # This method will simply return CSS that can be used in HTML tags.
+  #
+  # Something such as:
+  #
+  #   style="foobar"
+  #
+  # ========================================================================= #
+  def self.return_css_style(
+      i = ''
+    )
+    _ = i.to_s.dup # The result value.
+    unless _.empty?
+      _ = ' style="'+_+'"'
+    end
+    return _
+  end; self.instance_eval { alias return_this_css return_css_style } # === Cyberweb.return_this_css
+
+  # ========================================================================= #
+  # === return_css_class
+  # ========================================================================= #
+  def return_css_class(
+      css_class = ''
+    )
+    ::Cyberweb.return_css_class(css_class)
+  end; alias css_class= return_css_class # === css_class=
+
+  # ========================================================================= #
+  # === generate_the_id_for_the_coloured_box_background
+  #
+  # We need to generate a unique ID because otherwise we can
+  # not use re-use the same div box on the same box.
+  # ========================================================================= #
+  def generate_the_id_for_the_coloured_box_background
+    return '#coloured_box_background_'+return_unique_css_id
+  end
+
+  # ========================================================================= #
+  # === generate_coloured_box
+  #
+  # This will generate the coloured box.
+  # ========================================================================= #
+  def generate_coloured_box(
+      background_colour_to_use = '#93cde9',
+      padding_to_use           = '25px',
+      text_to_display          = 'Test',
+      height                   = '100px'
+    )
+    id_for_the_coloured_box = generate_the_id_for_the_coloured_box_background
+    if background_colour_to_use.empty?
+      background_colour_to_use = '#93cde9'
+    end
+    background_colour_to_use = background_colour_to_use.to_s.dup
+    if padding_to_use.empty?
+      padding_to_use = '25px'
+    end
+    # The return string is stored in the variable _.
+    _ = <<-EOF
+
+<style>
+
+#{id_for_the_coloured_box} {
+  background-color: #{background_colour_to_use};
+  padding: #{padding_to_use};
+}
+#{id_for_the_coloured_box}_fg {
+  background-color: #c4e4f3;
+  width:  300px;
+  height: #{height};
+  box-shadow: 0px 0px 8px #ffffff;
+  -webkit-box-shadow: 0px 0px 8px #ffffff;
+}
+</style>
+<div id="#{id_for_the_coloured_box}">
+  <div id="#{id_for_the_coloured_box}_fg">
+    #{text_to_display}
+  </div>
+</div>
+EOF
+    return _
+  end
+
+class Css # === Cyberweb::Css
+
+  attr_accessor :optional
+
+  # ========================================================================= #
+  # === DEFAULT_CSS_CLASS
+  # ========================================================================= #
+  DEFAULT_CSS_CLASS = 'marl1em BO'
+
+  # ========================================================================= #
+  # === initialize
+  # ========================================================================= #
+  def initialize
+    reset
+  end
+
+  # ========================================================================= #
+  # === _
+  # ========================================================================= #
+  def _
+    @optional
+  end
+
+  # ========================================================================= #
+  # === reset
+  # ========================================================================= #
+  def reset
+    @optional = DEFAULT_CSS_CLASS
+  end
+
+end
+
+end
+
+if __FILE__ == $PROGRAM_NAME
+  Cyberweb.test_css  
+end