/*
 * CSS-based skins.
 * Each class below implements a "css_class" kind Skin (see apps/cosmetics/models.py).
 * The class name must match the Skin.css_class field exactly and is applied
 * directly on the skin's orb/swatch element (see cosmetics/_skin_orb.html).
 */

.skin-galaxy {
    background: radial-gradient(circle at 30% 30%, #6a3de8, #1b0f3d 70%);
}

.skin-neon {
    background: linear-gradient(135deg, #00f5d4, #00bbf9);
    box-shadow: 0 0 0.75rem #00f5d4;
}

.skin-sunset {
    background: linear-gradient(160deg, #ff9a3c, #ff3caa 60%, #7d2ae8);
}

.skin-spinner {
  animation: spin 1s linear infinite;
  background-image: url("/static/cosmetics/skins/wheel.8207dbae1f4b.jpg");
  background-size:110% 110%;
  background-position:55% 55%;

}
.skin-record{
  animation: spin 1s linear infinite;
  background-image: url("/static/cosmetics/skins/record.74cc843788d1.png");
  background-size:110% 110%;
  background-position:55% 55%;
  
}

.skin-threeD {
  transform-style: preserve-3d;
  transform: perspective(100px) rotateX(45deg);
  animation: spin3d 2s linear infinite;

}
.skin-threeD::before {
  content:"";
  display:block;
  position: absolute;
  width:100%;
  height:100%;
  background-color:green;
  transform: rotateX(90deg);
  border-radius: 50%;
}

.skin-threeD::after {
  content:"";
  position: absolute;
  display:block;
  width:100%;
  height:100%;
  background-color:blue;
  transform: rotate(90deg) rotateX(90deg);
  border-radius: 50%;
}

.skin-regnbage{
  background-color:red;
  animation: rainbow 2s linear infinite;
}

.skin-matte-geniuz{
  background-image: url("/static/cosmetics/skins/genius.21d7da1e3c14.jpg");
  background-size: 120% 120%;
  background-position: 10px 0px; 

}
.skin-matte-geniuz::before{
  font-size:8px;
  animation: wobble 1s infinite;
  color: red;
  content:"Diskret matte Geniuz";
}


@keyframes rainbow{
  0%{filter: hue-rotate(0deg)}
  100%{filter: hue-rotate(360deg)}
}

@keyframes wobble{
  0%{transform: rotate(-10deg)}
  50%{transform: rotate(10deg)}
  100%{transform: rotate(-10deg)}
  
}

@keyframes spin3d{
  0%{transform: rotateY(40deg) rotateX(0deg) rotate(40deg)}
  100%{transform: rotateY(40deg) rotateX(360deg) rotate(40deg)}
}

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