/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color."
   
   
     background-image:url('https://www.witf.io/wp-content/uploads/2020/11/iStock-1159238834-1628x1080.jpg');
   background-image: linear-gradient(red, yellow, green);
   
   background-image: radial-gradient(red 5%, yellow 15%, green 60%);
   
   
   width: fit-content;
   
   
   ----
   
   
body {
  background-color: black;
background-image:url('https://wallpapers.com/images/hd/black-trippy-abstract-artwork-slealozst0p0tjlj.jpg');
  color: lime;
  font-family: courier;
 width: fit-content;
}

----
   .css-off * {
  display: none;
}

   
   */



body {
  display:grid;
   margin: auto;
  background:repeat center fixed;
  background-size: 70% ;
  background-attachment: local;
color:white;
  width: fit-content;
}


h1  {
background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Finite_subdivision_of_a_radial_link.png/200px-Finite_subdivision_of_a_radial_link.png');
  text-decoration: underline solid 5px;
  padding:0 0 0 1em;
  
  text-align:left;
  font-size:36px;
    background: rgba(35, 35, 35, 1);

			   
			     color: #fff;
  text-shadow:
    /* White glow */
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    /* Green glow */
    0 0 42px #0fa,
    0 0 82px #0fa,
    0 0 92px #0fa,
    0 0 102px #0fa,
    0 0 151px #0fa;
			   
			   animation: flicker 13.5s infinite alternate; 
  
  }
  
.flicker {
  animation: flicker 10.5s infinite alternate; 
}
 
 
 .fastflicker {
  animation: flicker 0.5s infinite alternate; 
}   
  
  /*
  color:black;
    text-shadow: 0px 0px 5px rgba(255, 255, 255, 1), 
               0px 0px 10px rgba(255, 255, 255, 1), 
			   0px 0px 15px rgba(255, 255, 255, 1),
			   0px 0px 20px rgba(73, 255, 24, 1),
			   0px 0px 30px rgba(73, 255, 24, 1),
			   0px 0px 40px rgba(73, 255, 24, 1),
			   0px 0px 55px rgba(73, 255, 24, 1),
			   0px 0px 75px rgba(73, 255, 24, 1);
			   
	*/
  
  
   h2, h3, h4, h5, h6 {
background:white;
    text-decoration: underline solid 3px;
    padding-top: 10px;
  padding-right: 100px;
  padding-bottom: 20px;
  padding-left: 20px;
  color:black;
  font-size:20px;
  text-align:left;
    width: -moz-fit-content;
  width: fit-content;

 
  display: table;
}



.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
}

.footer2 {
   position: fixed;
   left: 0;
   bottom: 40px;
   height: 20px;
   width: 30%;
   background-color: black;
   color: orange;
   text-align: center;
}





.plainwindow {
  background:white;
  color:black;
  text-decoration:none;
  border:10px solid black;
  box-shadow: 20px 20px magenta;
  font-family:courier;
  font-size:16px;
  text-shadow:none;
}


/* Flickering animation */
@keyframes flicker {
    
  0%, 18%, 22%, 25%, 53%, 57%, 100% {

      text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #0fa,
      0 0 80px #0fa,
      0 0 90px #0fa,
      0 0 100px #0fa,
      0 0 150px #0fa;
  
  }
  
  20%, 24%, 55% {        
      text-shadow: none;
  }    
}

.elegantshadow {
    color: #131313;
    background-color: #e7e5e4;
    letter-spacing: .15em;
    text-shadow: 
      1px -1px 0 #767676, 
      -1px 2px 1px #737272, 
      -2px 4px 1px #767474, 
      -3px 6px 1px #787777, 
      -4px 8px 1px #7b7a7a, 
      -5px 10px 1px #7f7d7d, 
      -6px 12px 1px #828181, 
      -7px 14px 1px #868585, 
      -8px 16px 1px #8b8a89, 
      -9px 18px 1px #8f8e8d, 
      -10px 20px 1px #949392, 
      -11px 22px 1px #999897, 
      -12px 24px 1px #9e9c9c, 
      -13px 26px 1px #a3a1a1, 
      -14px 28px 1px #a8a6a6, 
      -15px 30px 1px #adabab, 
      -16px 32px 1px #b2b1b0, 
      -17px 34px 1px #b7b6b5, 
      -18px 36px 1px #bcbbba, 
      -19px 38px 1px #c1bfbf, 
      -20px 40px 1px #c6c4c4, 
      -21px 42px 1px #cbc9c8, 
      -22px 44px 1px #cfcdcd, 
      -23px 46px 1px #d4d2d1, 
      -24px 48px 1px #d8d6d5, 
      -25px 50px 1px #dbdad9, 
      -26px 52px 1px #dfdddc, 
      -27px 54px 1px #e2e0df, 
      -28px 56px 1px #e4e3e2;
  }

.typingcontainer {
  width: fit-content;

  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.typingheader {
  font-size: 70px;
  font-weight: 500;
  color: #553c9a;
  border-right: 4px solid #000;
  animation: cursor 0.6s infinite step-end, typing 8s infinite steps(16);
  white-space: nowrap;
  overflow: hidden;
}
@keyframes cursor{
  0%, 100%{border-color: transparent;}
  50%{border-color: #000;}
}

@keyframes typing{
  0%{ width: 0ch} /*Text is hidden*/
  30%{ width: 16ch;} /*The enitre header will be typed out*/
  80%{ width: 16ch;} /*Text stays visible*/
  90%{ width: 0ch;} /*Text is deleted*/
  100%{ width: 0ch;} /*Text stays hidden*/
}

.gradientanim {
  position: absolute;
  width: 90%;
  font-size: 60px;
  font-weight: 600;
  color: transparent;
  background-image: linear-gradient(to right ,#553c9a, #ee4b2b, #00c2cb, #ff7f50, #553c9a);
  -webkit-background-clip: text;
  background-clip: text;    
  background-size: 200%;
  background-position: -200%;
  animation: animated-gradient 2s infinite alternate-reverse;      
}
@keyframes animated-gradient{
  to{
    background-position: 200%;
  }
}


/* ----------------------------------------------
 * Generated by Animista on 2023-6-21 10:14:39
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-in-top
 * ----------------------------------------
 */
@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}

.bounce-in-top {
	-webkit-animation: bounce-in-top 1.1s both;
	        animation: bounce-in-top 1.1s both;
}

.swing-in-top-fwd {
	-webkit-animation: swing-in-top-fwd 6.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
	        animation: swing-in-top-fwd 4.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2023-6-21 10:12:18
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation swing-in-top-fwd
 * ----------------------------------------
 */
@-webkit-keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-100deg);
            transform: rotateX(-100deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
}
@keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-100deg);
            transform: rotateX(-100deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
}


.threedheader {
  font-size: 70px;
  font-weight: 600;
  font-family: 'Roboto', sans-serif;
  color: #b393d3;
  text-transform: uppercase;
  text-shadow: 1px 1px 0px #957dad,
               1px 2px 0px #957dad,
               1px 3px 0px #957dad,
               1px 4px 0px #957dad,
               1px 5px 0px #957dad,
               1px 6px 0px #957dad,
               1px 10px 5px rgba(16, 16, 16, 0.5),
               1px 15px 10px rgba(16, 16, 16, 0.4),
               1px 20px 30px rgba(16, 16, 16, 0.3),
               1px 25px 50px rgba(16, 16, 16, 0.2);
}

ul {
  color:lime;
  font-size:20px;
  border:10px solid thistle;
  border-radius:2%;
  box-shadow: 10px 10px 10px cyan;
 padding:20px;
width: fit-content;
min-width: 300px;
  list-style-type: "→";
  background:repeat center fixed;
  background-size: 70%;
  background-attachment: scroll;
  margin: 5px;
  

 
}




.ul2 {
    border:10px solid thistle;
  border-radius:10%;
  box-shadow: 10px 10px 10px cyan;
 padding:20px;
width: fit-content;
  list-style-type: "→";
   background-image: radial-gradient(indigo 65%, yellow 70%, purple 80%);
}

.menu {  
  border:10px solid indigo;
  border-radius:10%;
  box-shadow: 10px 10px 10px cyan;
 padding:20px;
width: fit-content;
  list-style-type: "→";


}

.bounce-top {
	-webkit-animation: bounce-top 0.9s both;
	        animation: bounce-top 0.9s both;
}


/* ----------------------------------------------
 * Generated by Animista on 2023-6-21 14:11:0
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-top
 * ----------------------------------------
 */
@-webkit-keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
            transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}
@keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
            transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}



shader-art {
  display: block;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

shader-art canvas {
  display: block;
  width: 100%;
  height: 100%;
}


.nav {
  list-style-type: none;
  font-size: 8px;
  padding: 0;
  position: fixed;
  bottom: 0;
  width: fit-content;
  background: white;
  display: inline-block;
  border: 1px solid red;
  z-index:5;
  -webkit-animation: bounce-top 1.9s both;
	        animation: bounce-top 1.9s both;
}

.navlist {
   font-size: 8px;
   display: inline-block;
}

.navlink {
  font-size: 8px;
  color:red;
  padding: 0;
  text-decoration: none;
   display: inline-block;
}

.navlink:hover {
  background: lightgray;
   display: inline-block;
}

.close {
  font-family: freight-sans-pro, sans-serif;
  font-weight: 900;
  background-color: #fff;	
  color: #202c2d;
  text-shadow:
    0 1px #808d93,
    -1px 0 #cdd2d5,
    -1px 2px #808d93,
    -2px 1px #cdd2d5,
    -2px 3px #808d93,
    -3px 2px #cdd2d5,
    -3px 4px #808d93,
    -4px 3px #cdd2d5,
    -4px 5px #808d93,
    -5px 4px #cdd2d5,
    -5px 6px #808d93,
    -6px 5px #cdd2d5,
    -6px 7px #808d93,
    -7px 6px #cdd2d5,
    -7px 8px #808d93,
    -8px 7px #cdd2d5;
  }
  .neongreen {
  color: #fff;
  text-shadow:
    /* White glow */
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    /* Green glow */
    0 0 42px #0fa,
    0 0 82px #0fa,
    0 0 92px #0fa,
    0 0 102px #0fa,
    0 0 151px #0fa;
    animation: flicker 1.5s infinite alternate; 
}

@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #0fa,
      0 0 80px #0fa,
      0 0 90px #0fa,
      0 0 100px #0fa,
      0 0 150px #0fa;
  }
  20%, 24%, 55% {       
    text-shadow: none;
  }
}


  .printers {
  font-family: news-gothic-std, sans-serif;
  font-weight: 400;
  font-style: italic;
  background-color: #edde9c;
  color: #bc2e1e;
  text-shadow:
    0 1px 0px #378ab4,
    1px 0 0px #5dabcd,
    1px 2px 1px #378ab4,
    2px 1px 1px #5dabcd,
    2px 3px 2px #378ab4,
    3px 2px 2px #5dabcd,
    3px 4px 2px #378ab4,
    4px 3px 3px #5dabcd,
    4px 5px 3px #378ab4,
    5px 4px 2px #5dabcd,
    5px 6px 2px #378ab4,
    6px 5px 2px #5dabcd,
    6px 7px 1px #378ab4,
    7px 6px 1px #5dabcd,
    7px 8px 0px #378ab4,
    8px 7px 0px #5dabcd;
  }
  
  
blockquote{
  font-size: 20px;
  width:60%;
  margin:50px auto;
  font-family:helvetica;
  font-style:italic;
  color: khaki;
text-shadow: 3px 3px 6px rgba(255, 255, 23, 0.88),3px 3px 3px rgba(255, 188, 3, 1),3px 2px 10px rgba(255, 0, 0, 1),-1px 15px 4px rgba(35, 18, 89, 1),-8px 3px 6px rgba(145, 145, 13, 1),-5px 2px 2px rgba(255, 13, 182, 1);
  padding:1.2em 30px 1.2em 75px;
  border-left:8px solid #78C0A8 ;
  line-height:1.0;
  position: relative;
 
background-image:conic-gradient(#553c9a, #ee4b2b, #00c2cb, #553c9a);

}

/*  background-image: radial-gradient(#553c9a, #ee4b2b);

repeating-radial-gradient(<ending-shape> <size> <position> ,<color1>, <color2>, <color3>);


repeating-linear-gradient(to right, #553c9a, #ee4b2b 10%, #553c9a 20%);

repeating-radial-gradient(circle closest-corner at 100px 100px, #553c9a, #ee4b2b 10%, #553c9a 20%);

repeating-conic-gradient(#553c9a 0%, #553c9a 10%, #ee4b2b 10%, #ee4b2b 20%, 
#00c2cb 20%, #00c2cb 30%);

repeating-radial-gradient(circle closest-corner at 100px 100px, #553c9a, #b393d3 10%, #553c9a 20%);


*/



blockquote::before{
  font-family:Arial;
  content: "\201C";
  color:#78C0A8;
  font-size:4em;
  position: absolute;
  left: 10px;
  top:-10px;
}

blockquote::after{
  content: '';
}

blockquote span{
  display:block;
  color:#333333;
  font-style: normal;
  font-weight: bold;
  margin-top:1em;
}


li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #04AA6D;
}







img {
  border:25px solid deeppink;
  box-shadow:10px 20px 10px dimgray;
  margin:auto;
  
}

p {
  background:gray;
  color:black;
  padding:4px;
}

button {
      color:linear-gradient(red, yellow, green);
 font-size:40px;

  font-family:courier;
  padding:30px;
  border-radius: 50%;
  
}
/*
  -webkit-animation: glowgreen 1s ease-in-out infinite alternate;
  -moz-animation: glowgreen 1s ease-in-out infinite alternate;
  animation: glowgreen 1s ease-in-out infinite alternate;
  
    -webkit-animation: glowred 1s ease-in-out infinite alternate;
  -moz-animation: glowred 1s ease-in-out infinite alternate;
  animation: glowred 1s ease-in-out infinite alternate;
  */
  
button:hover {
      color: #fff;
 cursor: pointer;

}


.small {
      color: black;
 font-size:20px;
 font-weight:900;

  font-family:courier;
  padding:10px;
  border-radius: 10%;
}



.buttonlist1{
  padding:2px;
  font-size:2vw;
  color:white;
  text-shadow:1px 1px red, -1px -1px black, 2px 5px 10px cyan, 5px 5px 5px yellow;
  padding-left:3px;
  padding-right:3px;
  background-image:url('/images/image1.jpg');
  box-shadow:12px 12px 5px lime;
  display:inline;
  width: fit-content;
}

.buttonlist1:hover {
  border:1px red solid;
   padding:3px;
  background-image:url('/images/image15.jpg');
  color:red;
   font-size:2vw;
  box-shadow:12px 12px 5px;
  display:inline;
    border-radius: 50%;
    width: fit-content;
    }



/* unvisited link */
a:link {
   
 border:2px yellow solid;
 border-radius:5%;
color:#68FFA8;
text-shadow: 6px 5px 4px rgba(171, 34, 181, 1),-12px -5px 8px rgba(28, 62, 49, 1),-12px 20px 8px rgba(11, 53, 28, 1),-3px 1px 1px rgba(16, 0, 245, 1),5px -1px 0px rgba(79, 122, 82, 1);
padding:2px;
 font-weight:700;
 font-size:26px;


  background: 
rgba(55,55,55,0.9);
  
}

@keyframes a {
  to {background-position:0 -200%}
}



/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: cyan;

  background: yellow;
  animation: glowred .1s ease-in-out infinite alternate;
 border:2px white solid;
 border-radius:5%;
}

/* selected link */
a:active {
  color: blue;
}

.rainbowborder {

background-image: radial-gradient(red 5%, yellow 15%, green 60%);

}


pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
 font-size:16px;
 font-weight:900;
 color:black;
 background:black;
  text-shadow: 0  1px lime, 1px 1px  plum, 2px -1px forestgreen, -1px 1px  yellow, -2px 0  red, 0 -2px thistle, 0 -1px green, 12px -2px rgba(255,130,0,0.3),
  12px -2px rgba(255,255,255,0.3),
  5px -2px rgba(255,255,255,0.3),
  5px -2px rgba(255,255,255,0.3),
               0  1px 10px white, 1px 1px 5px  white, 2px -1px 3px white, -1px 1px 10px red, -2px 0 5px  magenta, 0 -2px 10px violet, 0 -1px 5px deeppink;
               text-decoration:underline 0.5px black;
               border:5px forestgreen solid;
               border-radius:2%;
               box-shadow: 20px 0px 20px magenta;
               padding:10px;
               width: fit-content;
               
     
}

.tab {font-size:10px; color:white; font-family:courier; text-shadow:none; background:gray;}


.container {
  width: fit-content;
}




/* GLOWING TEXT  EXAMPLE FROM w3!! */
.glowred {



  -webkit-animation: glowred 1s ease-in-out infinite alternate;
  -moz-animation: glowred 1s ease-in-out infinite alternate;
  animation: glowred 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glowred {
  from {
    background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Finite_subdivision_of_a_radial_link.png/200px-Finite_subdivision_of_a_radial_link.png');
    
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  to {
    background:lightyellow;
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #fff, 0 0 80px #fff;
  }
}
/*--------------------------------------------------*/
/*-------OTHER GLOWS!!!!!!--------------*/
/*--------------------------------------------------*/
/*---------------GREEN-----------------------------*/
.glowgreen {

  color: #fff;

  -webkit-animation: glowgreen 1s ease-in-out infinite alternate;
  -moz-animation: glowgreen 1s ease-in-out infinite alternate;
  animation: glowgreen 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glowgreen {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #73E600, 0 0 40px #73E600, 0 0 50px #73E600, 0 0 60px #73E600, 0 0 70px #73E600;
  }
  to {
    text-shadow: 0 0 20px lime, 0 0 30px #a6ff4d, 0 0 40px #a6ff4d, 0 0 50px #a6ff4d, 0 0 60px #a6ff4d, 0 0 70px #a6ff4d, 0 0 80px #a6ff4d;
  }
}


/*---------------GREEN for links-----------------------------*/

.glowgreenlink {

  color: #fff;
 
  -webkit-animation: glowgreenlink .5s ease-in-out infinite alternate;
  -moz-animation: glowgreenlink .5s ease-in-out infinite alternate;
  animation: glowgreenlink .5s ease-in-out infinite alternate;
}

@-webkit-keyframes glowgreenlink {
  from {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #73E600, 0 0 20px #73E600, 0 0 25px #73E600, 0 0 30px #73E600, 0 0 35px #73E600;
  }
  to {
    text-shadow: 0 0 10px lime, 0 0 15px #a6ff4d, 0 0 20px #a6ff4d, 0 0 25px #a6ff4d, 0 0 30px #a6ff4d, 0 0 32px #a6ff4d, 0 0 80px #a6ff4d;
  }
}

.border {

	display: grid;


	border: 8px solid;
	padding: 10px;
	width: fit-content;
}

.radial-repeating {
	border-width: 10px;
	border-image: repeating-radial-gradient(
			circle at 10px,
			turquoise,
			pink 2px,
			greenyellow 4px,
			pink 2px
		)
		1;
		width: fit-content;
}

/*---------------SCROLLING/MARQUEE-----------------------------*/

.scrolling {
 height: 50px;	
 overflow: hidden;
 position: relative;

 font-size: 1em;
 color: limegreen;

 width: 30%;

 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: scrolling 15s linear infinite;
 -webkit-animation: scrolling 15s linear infinite;
 animation: scrolling 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scrolling {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scrolling {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scrolling {
 0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}