/* HTML: <div class="sosrotation"></div> */
div.sosrotation {
  position: relative;
  width: 120px;
  height: 120px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: yellow;
  border: 1px solid;
}
div.sos {
  display: table-cell;
  width: 120px;
  height: 120px;
  text-align: center;
  vertical-align: middle;
}
@keyframes spinna {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

div.sosrotation{animation: spinna 12s linear infinite;}

/* HTML: <div class="yingyang"></div> */
div.yingyang {
  position: relative;
  top: 10px;
  width: 120px;
  height: 120px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: 
   radial-gradient(25% 25% at 50% 25%,#000 24%,#fff 26% 99%,#0000 101%), 
   radial-gradient(25% 25% at 50% 75%,#fff 24%,#000 26% 99%,#0000 101%), 
   conic-gradient(#000 50%, #fff 0);
  border: 1px solid;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

div.yingyang{animation: spin 2s linear infinite alternate;}

/* HTML: <div class="vertigo"></div> */
div.vertigo {
  --b: 15px;  /* border thickness */
  --s: 300px; /* preferred  text-align: center;
  vertical-align: middle; size shape */
  --c: #CD8C52;

  width: round(var(--s),4*var(--b));
  aspect-ratio: 1;
  border-radius: 50%;
  background: 
    repeating-radial-gradient(calc(2*var(--b)) at top,#0000 -1px,var(--c) 0 calc(50% - 1px),#0000 50% calc(100% - 1px)) calc(50% + var(--b)) 100%, 
    repeating-radial-gradient(calc(2*var(--b)) at bottom,var(--c) -1px,#0000 0 calc(50% - 1px),var(--c) 50% calc(100% - 1px)) 50% 0;
  background-size: 150% 50%;
  background-repeat: no-repeat;
  mask: 
    radial-gradient(calc(1.5*var(--b)) at calc(100% - var(--b)/2) 0, #0000 calc(100%/3), #000 calc(100%/3 + 1px) 110%, #0000 0) calc(50% + var(--b)/2) 
     100%/calc(3*var(--b)) 50% exclude no-repeat, 
    conic-gradient(#000 0 0);
}

div.vertigo{animation: spin 5s linear infinite alternate;}

/* HTML: <div class="lollipop"></div> */
.lollipop {
  --r: 150px; /* control the size */
  --c1: #fd99d7;
  --c2: #4e4cb0;

  height: calc(2* var(--r));
  aspect-ratio: 1;
  clip-path: circle();
  display: flex;
}
.lollipop:before,
.lollipop:after {
  content: "";
  flex: 1;
  --g1:radial-gradient(50% 50%,var(--c1) 99%,#0000) no-repeat;
  --g2:radial-gradient(50% 50%,var(--c2) 99%,#0000) no-repeat;
  background: var(--g1) calc(sin(60deg)* var(--r)) calc(var(--r) / -2), var(--g2) calc(var(--r) / 2) calc(sin(-60deg)* var(--r)), var(--g1) 0 calc(-1* var(--r)), var(--g2) calc(var(--r) / -2) calc(sin(-60deg)* var(--r)), var(--g1) calc(sin(-60deg)* var(--r)) calc(var(--r) / -2), var(--g2) calc(-1* var(--r)) 0, var(--g1) calc(sin(-60deg)* var(--r)) calc(var(--r) / 2);
  background-size: 200%;
}
.lollipop:after {
   rotate: 180deg;
}

div.lollipop{animation: spin 5s linear infinite alternate;}

/* HTML: <div class="eighties"></div> */

.eighties {
  height: 50px;
  width: 50px;
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  background: 
    radial-gradient(6% 6% at 60% 25%,#000 90%,#0000),
    radial-gradient(circle at 35% 35%,#0000,70%,#0005) #0ff;
  clip-path: polygon(0 0,100% 0,100% 25%,50% 50%,100% 75%,100% 100%,0 100%);
}

div.eighties{animation: marquee 10s linear infinite;}

@keyframes marquee {
  from {left: 0px;}
  to {left: 1260px;}
}
/* HTML: <div class="spinnadisc"></div> */
div.spinnadisc {
  position: relative;
  margin: 19px auto;
  width: 262px; height: 262px;
  border-radius: 50%;
  background: 
    linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0,
    linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%,
    repeating-radial-gradient(#2a2928 0 3px, #ada9a0 4px, #2a2928 5px);
  background-size: 50% 100%, 100% 50%, 100% 100%;
}
div.spinnadisc:after {
  position: absolute;
  top: 50%; left: 50%;
  margin: -35px;
  border: solid 1px #d9a388;
  width: 68px; height: 68px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #da5b33,
    inset 0 0 0 27px #da5b33;
  background: #b5ac9a;
  content: '';
}

div.spinnadisc{animation: spin 5s linear infinite alternate;}

/* HTML: <div class="topforty"></div> */
@property --num {
  syntax: "<integer>";
  initial-value: 30;
  inherits: false;
}

div.twista {
  height: 200px;
  width: 200px;
  background-color: white;
  border-radius: 50%;
  border: 5px #FF00AA solid;
  animation-name: blinking;
  animation-duration: 5s;
  animation-iteration-count: 100;
}

@keyframes blinking {
  50% {
    border-color: #24E0FF;
  }
} 

div.topthirty {
  animation: counter 30s ease-in-out;
  counter-reset: num var(--num);
  font: 800 48px system-ui;
  padding: 2rem;
  text-align: left;
  vertical-align: middle;
  animation-iteration-count: 1;
}
div.topthirty::after {
  content: counter(num);
}

@keyframes counter {
  from {
    --num: 30;
  }
  to {
    --num: 1;
  }
}

.palla {
  position: relative;
  top: 10px;
  width: 120px;
  height: 120px;
  color: White;
  font: 1.2em sans-serif;
  background: Orange;
  border-radius: 50%;
  transition: transform 1s;
}

.palla:hover {
  transform: scale(1.2);
  background: OrangeRed;
}

/* HTML: <div class="ball"></div> */
div.ball {
  position: relative;
  top: 10px;
  left: 10px;
  width: 120px;
  height: 120px;
  color: White;
  font: 1.2em sans-serif;
  background: Orange;
  border-radius: 50%
}  
div.label {
  display: table-cell;
  width: 120px;
  height: 120px;
  text-align: center;
  vertical-align: middle;
 } 
 
 @keyframes bounce { from { top: 10px; }
 50% { top: 40px}
 to {top: 100px; background: OrangeRed; } }
 
 div.ball{animation: bounce 2s linear infinite alternate;}
 
 /* HTML: <div class="hot100"></div> */
 .hot100 {
  position: relative;
  top: 10px;
  width: 120px;
  height: 120px;
  background-image: repeating-radial-gradient(#DBB7BB, #D6BFDD 20% );
  border-radius: 50%;
}  


@keyframes levitate { from { top: 10px; }
 50% { top: 40px}
 to {top: 100px;  background-image: repeating-radial-gradient(#F1A7DC, #F8CFA9 , #B1E4E3 ); } }
 
 .hot100{animation: levitate 2s linear infinite alternate;}


 div.eighties{animation: marquee 10s linear infinite;}

@keyframes marquee {
  from {left: 0px;}
  to {left: 1260px;}
}
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
  border-radius: 50%;
}
 
/* HTML: <div class="outer"></div> */
 .outer-1 {
background-color:red;
width:100px; /* You can define it by % also */
height:100px; /* You can define it by % also*/
position:relative;
border:1px solid black;
border-radius: 50%;
}
.inner-1 {
background-color:white;
top: 15%; left:15%; /* of the container */
width:70%; /* of the outer-1 */
height:70%; /* of the outer-1 */
position: absolute;
border:1px solid black;
border-radius: 50%;
}
.inner-2 {
background-color:blue;
top: 30%; left:30%; /* of the container */
width:40%; /* of the inner-1 */
height:40%; /* of the inner-1 */
position: absolute;
border:1px solid black;
border-radius: 50%;
}

/* HTML: <div class="misleeve"></div> */ 
.misleeve {
 position: relative;
 height: 200px;
 aspect-ratio: 1;
 background: repeating-radial-gradient(#FAF0BE 0 80px, #FF0000 0 200px);
 mask: radial-gradient(50px,#0000 98%, #000);
 max-width: 960px;
}
/* HTML: <div class="milogo"></div> */ 
.milogo {
 position: relative;
 height: 200px;
 aspect-ratio: 1;
 background: #B22222;
 mask: radial-gradient(50px,#0000 98%, #000);
 max-width: 960px;
}

/* HTML: <div class="epicsleeve"></div> */ 
.epicsleeve {
 position: relative;
 height: 200px;
 aspect-ratio: 1;
 background: repeating-linear-gradient(90deg, #FFFF00 0 50px, #000000 0 150px);
 mask: radial-gradient(50px,#0000 98%, #000);
 max-width: 960px;
}

/* HTML: <div class="gordysleeve"></div> */ 
.gordysleeve {
 position: relative;
 height: 200px;
 aspect-ratio: 1;
 background: repeating-linear-gradient(45deg, #FFFF00 0 15px, #A020F0 0 30px);
 mask: radial-gradient(50px,#0000 98%, #000);
 max-width: 960px;
}

/* HTML: <div class="rcasleeve"></div> */ 
.rcasleeve {
 position: relative;
 height: 200px;
 aspect-ratio: 1;
 background: repeating-linear-gradient(0deg, #FFFFFF 0 100px, #228B22 0 200px);
 mask: radial-gradient(50px,#0000 98%, #000);
 max-width: 960px;
 border: 1px solid grey;
}

/* HTML: <div class="rsosleeve"></div> */ 
.rsosleeve {
 position: relative;
 height: 200px;
 aspect-ratio: 1;
 background: #CD5C5C;
 mask: radial-gradient(50px,#0000 98%, #000);
 max-width: 960px;
}

/* HTML: <div class="rsotansleeve"></div> */ 
.rsotansleeve {
 position: relative;
 height: 200px;
 aspect-ratio: 1;
 background: #D2B48C;
 mask: radial-gradient(50px,#0000 98%, #000);
 max-width: 960px;
}

/* HTML: <div class="motownsleeve"></div> */ 
.motownsleeve {
 position: relative;
 height: 300px;
 aspect-ratio: 1;
 background: MediumBlue;
 mask: radial-gradient(50px,#0000 98%, #000);
 max-width: 960px;
}

.misleeve, .milogo, .epicsleeve, .gordysleeve, .motownsleeve, .rcasleeve, .rsosleeve, .rsotansleeve {animation: marquee 50s linear infinite;}

.recordlabel {
  display: table-cell;
  width: 200px;
  height: 80px;
  text-align: center;
  vertical-align: middle;
}

.recordlabel1 {
  color: #FFFF00;
  display: table-cell;
  width: 200px;
  height: 80px;
  text-align: center;
  vertical-align: middle;
}

.recordlabel2 {
  color: #FFFFFF;
  display: table-cell;
  width: 200px;
  height: 80px;
  text-align: center;
  vertical-align: middle;
}

/* HTML: <div class="compactisc"></div> */
.compactdisc {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  border: 1px solid grey;
  background: conic-gradient(white, white, white, lightgrey, lightgrey, #6B476B, #0012DF, #00D3DF, #5EFF00, #FFFf00, #FF8000, #FF3D45, lightgrey, lightgrey, white, white, white, white, lightgrey, lightgrey, #6B476B, #0012DF, #00D3DF, #5EFF00, #FFFf00, #FF8000, #FF3D45, lightgrey, lightgrey, white);
}

.compactdisc::before,
.compactdisc::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: inherit;
  box-shadow: 0 0 1px grey;
  box-sizing: border-box;
}

.compactdisc::before {
  width: 30%;
  height: 30%;
  margin: -15% 0 0 -15%;
  background: lightgrey;
  background-clip: padding-box; 
  border: 10px solid rgba(0, 0, 0, 0.2);
}

.compactdisc::after {
  width: 18%;
  height: 18%;
  margin: -9% 0 0 -9%;
  background: white;
  background-clip: padding-box;
  border: 10px solid rgba(0, 0, 0, 0.1);
  filter: drop-shadow(0 0 2px grey);
}

div.compactdisc{animation: spin 5s linear infinite alternate;}

/* HTML: <div class="seventies"></div> */
.seventies {
  position: relative;
  top: 10px;
  width: 120px;
  height: 120px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-radial-gradient(red, yellow 10%, sienna 15%);
  border-radius: 50%;
}

@keyframes radiate { from { top: 10px; }
 50% { top: 40px}
 to {top: 100px;  background-image: repeating-radial-gradient(red, gold 10%, chocolate 15%); } }
 
.seventies{animation: radiate 2s linear infinite alternate;}

/* HTML: <div class="nineties"></div> */

#myDIV {
  height:300px;
  background-color:#FFFFFF;
  background-image: linear-gradient(yellow, skyblue, azure );
}
#blueDIV {
  position:relative;
  width:100px;
  background:lightblue;
  text-align:center;
  padding:10px;
  clip-path: circle(40%);
}
#blueDIV {animation: marquee2 50s linear infinite;}

@keyframes marquee2 {
  from {left: 0px;}
  to {left: 1120px;}
}
.grabzone {
  height:350px;
  background-color:#FFFFFF;
}
.bargain {
  width: 200px;
  height: 300px;
  position: absolute; 
  font-size: 24px;
  animation-name: move1, move2;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: calc(-0.4s * var(--num));
}
#skybright {
  height:300px;
  background-color:#FFFFFF;
  background-image: linear-gradient(red, magenta, purple);
  text-align:center;
  font-weight:bold;
  text-shadow: 2px 2px white;  
}
.my-class {
  width: 200px;
  height: 600px;
  position: absolute; 
  font-size: 24px;
  animation-name: move1, move2;
  animation-duration: 120s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: calc(-0.4s * var(--num));
}

@keyframes move1 {
  to { transform: translateX(256px); }
}
@keyframes move2 {
  to { transform: translateY(256px); }
}
.vista {
    background-color:#FFFFFF;
} 
 
 @keyframes marquee3 {
  from {left: 0px;}
  to {left: 120px;}
}
 
 /* HTML: <div class="nebular"></div> */
.nebular {
  height:300px;
  background-color:#000;
}

.whitedot {
  position:relative;
  width:100px;
  background:#fff;
  text-align:center;
  padding:10px;
  clip-path: circle(20%);
}
.whitedot {animation: marquee3 3s linear infinite alternate;}  

 /* HTML: <div class="heart"></div> */

.niveau {
  height: 200px;
  background-color: #000;
  padding-top: 20px;
  padding-left: 10px;
}

.redyellow {
  height: 440px;
  background-color: red;
  background-image: linear-gradient(yellow,red);
  padding-top: 0px;
  padding-left: 0px;
  text-align:center;
  font-weight:bold;
  text-shadow: 2px 2px white;
}
.redyellow2 {
  height: 350px;
  background-color: red;
  background-image: linear-gradient(yellow,red);
  padding-top: 0px;
  padding-left: 0px;
  text-align:center;
  font-weight:bold;
  text-shadow: 2px 2px white;
}

.seaofgreen {
  height: 350px;
  background-color: green;
  background-image: linear-gradient(aquamarine,green);
  padding-top: 20px;
  padding-left: 10px;
  text-align:center;
  font-weight:bold;
  text-shadow: 2px 2px white;
}

.submarine {
  offset-path: path(
    "M-200 -180 L -90 -175 L 200 -180"
  );
  animation: sail 6000ms linear;
  animation-iteration-count: 4;
  animation-delay: 50s;
}

@keyframes sail {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

#heart {
  position: relative;
  width: 200px;  
  height: 180px;
}

#heart:before,
#heart:after {
  position: absolute;
  content: "";
  left: 100px;
  top: 0;
  width: 100px;
  height: 160px;
  background-image: url("glass300x300.jpg");
  border-radius: 100px 100px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

#heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
} 

 /* HTML: <div class="sun"></div> */
.sun{
  margin:50px 50%;
  border-radius:50%;
  width: 70px;
  height:70px;
  background-color: orange;
  box-shadow: 0 0 35px 5px yellow,0 0 25px 10px yellow inset;
}   
  
.nebular {
  height:300px;
  background-color:#000;
}

.twilight {
  height: 200px;
  background-color: rgba(28, 40, 51 ,100);
  padding-top: 20px;
  padding-left: 10px; 
  font-weight:bold;
  text-shadow: 2px 2px white;
}

@keyframes eclipse { from { top: 10px; }
 50% { top: 40px}
 to {top: 100px;  background-image: repeating-radial-gradient(black, black 10%, black 15%); } }
 
 .sun {animation: eclipse 5s linear infinite;}

.nebular2 {
  height:150px;
  background-color:#000;
}
.goodvibrations div:hover img{
  margin-left: 0px;
  cursor: pointer;
  animation:vibrate 0.01s linear 0s infinite ;
}

@keyframes vibrate{
  0%   {margin-left: 0px;}
  25%  {margin-left: -6px;}
  50%  {margin-left: 0px;}
  75%  {margin-left: 6px;}
  100% {margin-left: 0px;}
}

.beatles {
  -webkit-mask-image: url(Beatles108Mono.png);	
  mask-image: url(Beatles108Mono.png);
  mask-repeat: no-repeat;
}

.mmt {
  height:250px;
  background-color:#FFFFFF;
  background-image: linear-gradient(cornflowerblue,springgreen,yellow,red,magenta);
}
.beatlesque {
  mask-image: url("Beatles108Mono.png");
}

.euro {
  -webkit-mask-image: url(Europop96Mono.png);		
  mask-image: url(Europop96Mono.png);
  mask-repeat: no-repeat;
}

.europop {
  height:250px;
  background-color:#003399;
}

.whitestar {
  -webkit-mask-image: url(Hot100Futura96e.png);	
  mask-image: url(Hot100Futura96e.png);
  mask-repeat: no-repeat;
}

.billboard {
  height:390px;
  background-image: repeating-linear-gradient(#B31942,#B31942 30px,#FFFFFF 30px,#FFFFFF 60px);
  max-width: 1000px;  
}

.motown2 {
}
.lingrad {
  height:100px;
  background-image: linear-gradient(OrangeRed,Orange,Yellow,GreenYellow,Green);
  -webkit-mask-image: url(MotownAvanteGarde96d.png);  
  mask-image: url(MotownAvanteGarde96d.png);
  mask-repeat: no-repeat;
}

.smashhits1 {
  height:155px;
  background-color: #79BBC9;  
}

.roundel {
  height:200px;
  width:200px;
  background-image: repeating-radial-gradient(#CF142B,#CF142B 30px,#FFFFFF 30px,#FFFFFF 70px, #00247D 70px, #00247D);
  border-radius:50%
}
.roundel2 {
  height:150px;
  width:150px;
  background-image: repeating-radial-gradient(#CF142B,#CF142B 25px,#FFFFFF 25px,#FFFFFF 50px, #00247D 50px, #00247D);
  border-radius:50%
}

.roundel2:hover {
  transform: scale(1.2);
}

.plunk {
  height:125px;
  background-image: linear-gradient(to right,red 40%,yellow 40% 60%,blue 60%);
}
.loudmusic {
  height:250px;
}  
.punkmusic {
  height:250px;
  background-image: linear-gradient(to right,red 50%, blue 50%);
}

.bot {
  height:200px;
  background-color:#FFFFFF;
  background-image: linear-gradient(magenta,red,yellow,springgreen,cornflowerblue);
}

 /* HTML: <div class="disco"></div> */
.disco{
}  
 /* HTML: <div class="cisco"></div> */
.cisco{
  height:250px;
  min-width:500px;
  background-image: linear-gradient(to right,#FF802B 20%,#F9E105 20% 40%,#34C7A5 40% 60%,#FD50CE 60% 80%,#A414D9 80%);
}  
.heavylogo{
  height:350px;
}
.logor{
  height:350px;
  background-image: linear-gradient(to right,#807981 20%,#333431 20% 40%,#C7C1C3 40% 60%,#908086 60% 80%,#463936 80%);
}

.reggae{
  height:200px;
  background-image: linear-gradient(to right,#E13335 34%,#296330 34% 67%,#F6C81D 67%);
} 

.michigan{
  height:250px;
  background-color: lightskyblue;
  max-width: 1000px;
} 
.redstar{
 } 
  
.star85 {
  width: 150px;  
  text-align: center;
  font-size: 1.4rem;
  font-weight:bold;
  text-shadow: 2px 2px white;
  aspect-ratio: 1;
  background-color: #39FF14;
  clip-path: polygon(50% 0,
    calc(50%*(1 + sin(.4turn))) calc(50%*(1 - cos(.4turn))),
    calc(50%*(1 - sin(.2turn))) calc(50%*(1 - cos(.2turn))),
    calc(50%*(1 + sin(.2turn))) calc(50%*(1 - cos(.2turn))),
    calc(50%*(1 - sin(.4turn))) calc(50%*(1 - cos(.4turn))) 
   ); 
  /* or more simple
  clip-path: polygon(50% 0,79% 90%,2% 35%,98% 35%,21% 90%); 
   */
   animation: neoneon 10s;
   animation-iteration-count: 10;
}
@keyframes neoneon {
  0%   { background-color: #39FF14; }
  25%  { background-color: #CFFF04; }
  50%  { background-color: #FF10F0; }
  75%  { background-color: #FF5F1F; }
  100%  { background-color: #4D4DFF; }	
}

 /* HTML: <div class="vinyla"></div> */
 .vinyla {
  position: relative;
  top: 10px;
  width: 180px;
  height: 180px;
  background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .45) 40%) no-repeat 100% 0, linear-gradient(60deg, rgba(42, 41, 40, .45) 60%, transparent 60%) no-repeat 0 100%, repeating-radial-gradient(black, black 19px, #2a2928 19px, #2a2928 22px);
  border-radius: 50%;
}  

.vinyla{animation: spinna 12s linear infinite;}

.vinyla:after {
  position: absolute;
  top: 50%; left: 50%;
  margin: -35px;
  border: solid 1px #d9a388;
  width: 68px; height: 68px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #ff8000,
    inset 0 0 0 27px #ff8000;
  background: #b5ac9a;
  content: '';
}

#bell {
  transform-origin: 0 -45px;
}

svg:hover #bell {
  fill:pink;
  animation-duration: 0.5s;
  animation-delay: -0.25s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-name: ring;
}

@keyframes ring {
  from {
    transform: rotate(-20deg);
  }
  to {
    transform: rotate(20deg);
  }
}

#wizardhat1 {
  transform-origin: 0 -45px;
}

svg:hover #wizardhat1,
svg:hover #flower {
  animation-duration: 0.5s;
  animation-delay: -0.25s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-name: swing;
}

@keyframes swing {
  from {
    transform: rotate(-20deg);
  }
  to {
    transform: rotate(20deg);
  }
}

#modroundel {
  transform-origin: 1;
}

svg:hover #modroundel {
  animation-duration: 2s;
  animation-delay: -0.25s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-name: grow;
}

@keyframes grow {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(2);
  }
}

.limb {
  stroke: black;
  stroke-width:4;
}

.slot {
  stroke: #cd803d;
  stroke-width: 10px;
  stroke-linecap: round;
}

.glitterball {
  offset-path: path(
    "M-400 0 L 400 0"
  );
  animation: roller-coaster 40000ms infinite linear;
  animation-delay: 25s;
}

@keyframes roller-coaster {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

text {
  font-weight: bold;
  stroke-width: 2;
}

.pinball {
  offset-path: path(
    "M160 400 L 160 100 A -20 20 0 1 0 -70 100 Q -80 80 80 80 L 100 400"
  );
  
animation: pinball-play 6000ms 1 linear;
}

@keyframes pinball-play {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

@font-face {
  font-family: "AHDN";
  src:
    local("AHDN");
}

.ahdn text {
 background-color: yellow;
 stroke: blue;
}
.ahdn {
 background-color: yellow;
 stroke: black;
 stroke-width:4;
}

#bottle {
  cursor: pointer;
}
#greenbottle {
  cursor: pointer;
}

#riser, #downer {
     cursor: pointer;
  }
  
.carousel {
   width:640px;
   height:640px;
 }
 
 .certainlynot  {
   color: white;
}   

.certainlynot text {
  stroke: white;
  fill: white;
}  
.kitchenette {
  stroke: black;
  stroke-width: 2px;
  fill: white;
}
.kitchenette2 {
  stroke: black;
  stroke-width: 2px;
  fill: white;
}

.woodstock:hover ellipse {
  fill: white;
  transition: all ease 0.3s;
}

.woodstock ellipse {
  transition: all ease 0.3s;
}
.blink {
  ry: 1;
  transition: all ease 0.3s;
}


.pyramid:hover ellipse {
  ry: 0;
  transition: all ease 0.3s;
}
.pyramid:hover circle {
  r: 0;
  transition: all ease 0.3s;
}

.pyramid circle {

  transition: all ease 0.3s;
}

.pyramid ellipse {

  transition: all ease 0.3s;
}

.pyramid:hover path {
  stroke: gainsboro;

  transition: all ease 0.3s;
}

.house {
  stroke: black;
  stroke-width: 2px;
  fill: white;
}

.house .roof {
  fill: none;
  stroke: #d1495b;
  stroke-width: 1px;
  stroke-linecap: round;
}

.house .door {
  fill: none;
}

.house .stair {
  fill: none;
}

.house .window {
  fill: none;
}

.house .window-sill {
  fill: none;
  stroke-linecap: round;
}

#bell {
  transform-origin: 0 -45px;
}

svg:hover #bell,
svg:hover #bell-clapper {
  animation-duration: 0.5s;
  animation-delay: -0.25s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-name: ring;
}

@keyframes ring {
  from {
    transform: rotate(-20deg);
  }
  to {
    transform: rotate(20deg);
  }
}