/* 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 */
@font-face{
    font-family: silver-font;
    src: url(https://file.garden/aDPcQJ9BNFHMB5Ij/Sillver.ttf);
}

.PixelArt {
    /* from 'https://stackoverflow.com/questions/14068103/disable-antialising-when-scaling-images' */
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated;                 /* Universal support since 2021   */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
  }

#gmkring * {
  padding: 0;
  color: black;
}


#gmkring {
   margin: 0 auto;
    width: 100%;
    max-width: 275px;
    --scale-factor: 0.85;
    font-size: 1.1em;
  font-family: silver-font;
}

#gmkring.medium {
    --scale-factor: 0.85;
    max-width: calc(275px * 0.85);
}

#gmkring.large {
    --scale-factor: 1;
    max-width: calc(320px * 1.2);
}


#gmkring-wrapper {
  width: calc(275px * var(--scale-factor));
  height: calc(275px * var(--scale-factor));
  margin: 0 auto; /* centers the widget */
  text-align: center;
  justify-content: center;
  align-content: center;
  padding: calc(5px * var(--scale-factor));
  border-radius: calc(20px * var(--scale-factor));
  margin-bottom: calc(10px * var(--scale-factor));
  border: solid #97003F calc(2px * var(--scale-factor));
  background-image: url(https://file.garden/aDPcQJ9BNFHMB5Ij/gimmikowebring/widbg);
  overflow: hidden;
}

#gmkring-notadded {
  width: calc(275px * var(--scale-factor));
  height: calc(200px * var(--scale-factor));
  margin: 0 auto; /* centers the widget */
  text-align: center;
  justify-content: center;
  align-content: center;
  padding: calc(5px * var(--scale-factor));
  border-radius: calc(20px * var(--scale-factor));
  margin-bottom: calc(10px * var(--scale-factor));
  border: solid #97003F calc(2px * var(--scale-factor));
  background-image: url(https://file.garden/aDPcQJ9BNFHMB5Ij/gimmikowebring/widbg);
  overflow: hidden;
  color: white;
}

#gmkring-wrapper a {
  font-family: silver-font;
  text-shadow: -1px -1px 0 #000, 2px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 
  color: white;
}

#gmkring .webring-logo {
  width: 175px;
}


#gmkring .webring-icon {
  width: calc(150px * var(--scale-factor));
  overflow: hidden;
  margin: auto;
  position: relative;
  top: calc(-25px * var(--scale-factor));
  left: calc(5.5px * var(--scale-factor));
}

#gmkring .webring-icon img {
  width: 100%;
  height: auto;
}

#gmkring .webring-index {
  font-size: 25px;
  position: relative;
  top: -40px;
  left: -20px;
  
}

#gmkring .webring-info {
  text-align: center;
}

#gmkring .webring-prev {
  float: left;
  position: relative;
  top: calc(-150px * var(--scale-factor));
}

#gmkring .webring-next {
  float: right;
  position: relative;
  top: calc(-185px * var(--scale-factor));
}