/* onionring.js is made up of four files - onionring-widget.js, onionring-index.js, onionring-variables.js and onionring.css (this one!)
// it's licensed under the cooperative non-violent license (CNPL) v4+ (https://thufie.lain.haus/NPL.html)
// it was originally made by joey + mord of allium house, last updated 2020-10-24 */

/* === ONIONRING.CSS === */
/* this file affects the style of the widget. remember to replace all instances of #webringid with whatever value you have for ringID in the onionring-widget.js file. make sure it still has the # at the front, though! probably easiest to use find+replace to do it */

@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&family=Concert+One&family=Pixelify+Sans:wght@600&display=swap');

#katamaring {
  margin: 0 auto !important;
  padding: 25px !important;
  width: 100% !important;
  text-align:center !important;
  line-height: 19px !important;
  height: 100% !important;
  max-width: 100px !important;
  max-height: 100px !important;
   background-image: url(https://katamaring.neocities.org/0JnqQMq.jpeg);
   background-size: cover !important;
   background-position: center !important;
   border: 1px dotted rgb(162, 197, 41) !important;
  
  border-radius: 25px !important;/* creates some space around the widget */
}

#katamaring .ring a, #katamaring .webring-links a {
  padding: 0 !important;
  background-color: transparent !important;
}

#katamaring .katabox {
  background: rgb(235, 245, 244, 0.25) !important;
  background-size: 25px !important;
   background-position: center !important;
   border: 1px dotted rgb(56, 137, 216, 0.8) !important;
   box-shadow: 0px 0px 11px 3px rgba(0,0,0,0.1) !important;
     background-image: url(https://katamaring.neocities.org/kataboxbgc.png);
  margin: auto !important;
  position: relative !important;
  top: -16.5px !important;
  width: 100% !important;
  max-width: 100px !important;
  padding-left: 17px !important;
  padding-top: 8px !important;
  left: -17.5px !important;
  padding-right: 17px !important;
  border-radius: 10px !important;
}

#katamaring table {
  margin: 0 auto !important; /* centers the widget */
  width: 100% !important;
  max-width: 100px !important; 
  margin-bottom: -5px !important;
}

#katamaring .katatop {
  text-align:center !important;
  font-family: Concert One !important;
  font-size: 11pt !important;
  color: #F4DE55 !important;
   text-shadow: -1px -1px 0 #328EDB, 1px -1px 0 #328EDB, -1px 1px 0 #328EDB, 1px 1px 0 #328EDB !important;
  margin-bottom: -8px !important;
  
}

#katamaring table tr td {
  padding: 2px !important; /* creates some space between the links and text inside the widget */
  margin: auto !important;
  top: 2px !important;
  position: relative !important;
  left: -15px !important;
}

#katamaring .webring-prev, #katamaring .webring-prev a {
  text-align:right !important;
  background: rgb(154, 191, 16, 0.8) !important;
  padding: 6px !important;
  font-size: 0.5em !important;
  height: fit-content !important;
  border-radius: 50px !important;
  transition: 0.2s !important;
  border: 1px dotted rgb(36, 83, 163) !important;
   box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  color: #F4DE55 !important;
}

#katamaring .webring-prev:hover, #katamaring .webring-prev a:hover {
 
  background: rgb(90, 170, 229, 0.8) !important;
  transition: 0.2s !important;
  border: 1px dotted rgb(245, 80, 166, 0.8) !important;
  border-radius: 999px !important;
}

#katamaring .ring {
  text-shadow: -1px -1px 0 #F2DD4E, 1px -1px 0 #F2DD4E, -1px 1px 0 #F2DD4E, 1px 1px 0 #F2DD4E !important;
  font-family: Cherry Bomb One !important;
  font-size: 22px !important;
  white-space: nowrap !important;
  position: relative !important;
  text-align: center !important;
  left: -8px !important;
  margin-top: 5px;
}

#katamaring .ring a {
  text-decoration: none !important;
}

#katamaring .c1 {
  color: #E2516E;
}

#katamaring .c2 {
  color: #F18C56;
}

#katamaring .c3 {
  color: #9ABF10;
}

#katamaring .c4 {
  color: #3F7AA4;
}

#katamaring .c5 {
  color: #7E4D9E;
}


#katamaring .webring-info {
   text-align:center !important;
   width: 100% !important;
   max-width: 100px !important;
}

#katamaring .webring-next {
  text-align:left;
   background: rgb(154, 191, 16, 0.8);
  padding: 6px;
  height: fit-content;
   font-size: 0.5em;
  border-radius: 50px;
  transition: 0.2s;
  border: 1px dotted rgb(36, 83, 163);
   box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);
  text-decoration: none;
  font-weight: 600;
  color: #F4DE55;
}

#katamaring .webring-next:hover, #katamaring .webring-next a:hover {
 
  background: rgb(90, 170, 229, 0.8);
  transition: 0.2s;
  border: 1px dotted rgb(245, 80, 166, 0.8);
  border-radius: 999px;
}

#katamaring .webring-links a {
  width: 100% !important;
  max-width: 100px !important;
  font-family: Pixelify Sans;
  font-size: 0.65em;
  color: #2262B7;
  font-weight: 400;
}

#katamaring .cousin {
  width: 35px;
  opacity: 0.9;
  filter: drop-shadow(1px 0 0 #145ABC) drop-shadow(0 1px 0 #51A1E6) drop-shadow(-1px 0 0 #97BD10) drop-shadow(0 -1px 0 #53B335);
  margin: 0 auto;
}

#katamaring .katamari-classic {
  width: 35px;
  opacity: 0.9;
  animation: roll 25s infinite linear;
  filter: drop-shadow(0.5px 0 0 #145ABC) drop-shadow(0 0.5px 0 #51A1E6) drop-shadow(-0.5px 0 0 #97BD10) drop-shadow(0 -0.5px 0 #53B335);
}

#katamaring .katamari-rainbow {
  display: none !important;
}

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