/* 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: 'Windows Regular';
  src: url(../Windows\ Regular.ttf);
}

@font-face {
  font-family: VT323-Regular;
  src: url("../fonts/VT323-Regular.ttf");
}

@font-face {
  font-family: VeniceClassic;
  src: url("../fonts/VeniceClassic.ttf");
}

#fujoringout table {
  width: 150px;
  background-color: #d6d6d6;
  text-align: center;
  padding: 5px;
  border: outset 3px #b5b5b5;
  margin: auto;
}

#fujoringout {
  margin: 0 auto;
  font-family: 'VT323-Regular', monospace;
}

#fujoringout-wrapper {
  width: fit-content;
  height: fit-content;
  background-color: #d6d6d6; /* makes the background pure white */
  margin: 0 auto; /* centers the widget */
  border: outset 3px #b5b5b5;
  display: grid;
  grid-template-columns: auto auto 30 auto auto;
  grid-template-rows: auto auto auto auto;
  text-align: center;
  justify-content: center;
  align-content: center;
  padding: 5px 15px;
  color: black;
}

#fujoringout-wrapper a {
  color: black;
}

#fujoringout .webring-otp {
  font-family: 'VT323-Regular';
  margin: 0px;
  padding: 0px;
  grid-row: 1;
  grid-column: 1/6;
  color: black;
  font-size: 16px;
  margin-bottom: 0px;
  -webkit-text-stroke: 0px;
  text-shadow: none;
}

#fujoringout h2 {
  font-family: 'VT323-Regular';
  margin: 0px;
  padding: 0px;
  grid-row: 1;
  grid-column: 1/6;
  color: black;
  font-size: 16px;
  margin-bottom: 0px;
  text-decoration: none;
}

#fujoringout .webring-otp1 {
  width: 50px;
  height: 50px;
  border: inset 2px;
  grid-row: 3;
  grid-column: 2;
  padding: 0px;
  overflow: hidden;
  margin: auto;
}

#fujoringout .webring-otp1 img {
  width: 100%;
  height: auto;
}

#fujoringout .webring-heart {
  grid-column: 3;
  grid-row: 3;
  width: 30px;
  height: 100%;
  display: flex;
  align-content: center;
}

#fujoringout .webring-heart img {
  width: 20px;
  height: 20px;
  margin: auto;
}

#fujoringout .webring-otp2 {
  width: 50px;
  height: 50px;
  border: inset 2px;
  grid-row: 3;
  grid-column: 4;
  padding: 0px;
  overflow: hidden;
  margin: auto;
}

#fujoringout .webring-otp2 img {
  width: 100%;
  height: auto;
}

#fujoringout .webring-title {
  grid-row: 2;
  grid-column: 1/6;
  font-size: 20px;
  text-align: center;
  padding: 0px;
  margin: 0;
  margin-bottom: 5px;
  line-height: 25px;
}

#fujoringout .webring-title h1 {
  margin: 0;
  font-family: 'VeniceClassic';
  font-size: 20px;
  filter: none;
  color: black;
}

#fujoringout .webring-title a {
  font-size: 24px;
  color: black;
  font-weight: 1000;
  text-decoration-color: black;
}

#fujoringout .webring-title a:hover {
  text-decoration: underline;
}

#fujoringout .webring-info {
  grid-row: 4;
  grid-column: 1/6;
  text-align: center;
}

#fujoringout .webring-prev {
  text-align:center;
  grid-row: 5;
  grid-column: 2;
  margin: auto;
}

#fujoringout .webring-next {
  text-align:center;
  grid-row: 5;
  grid-column: 4;
  margin: auto;
}

#members img {
  width: 88px;
}

#fujoringout h1 {
  text-align: center;
  margin: 15px 5px;
  font-size: 24px;
}

#fujoringout h1::before {
  content: "";
}

#fujoringout p {
  font-size: 20px;
  margin: 0px;
  margin-bottom: 10px;
  text-indent: 20px;
}

#fujoringout a {
  font-size: 20px;
  margin: 0px;
  margin-bottom: 10px;
  text-indent: 20px;
}