/* some details are from nature guild css */

#melonGuild-30.melonGuild {
 max-width: 600px;
 margin: 0 auto;
 flex-flow: row wrap;
 word-break: break-word;
 gap: 5px 20px;
 justify-content: center;
 container-type: inline-size;
 container-name: tesguild;
 font-size: 1em;
 font-family: Georgia, sans-sherif;
}

#melonGuild-30 .melonGuild-prev,
#melonGuild-30 .melonGuild-next {
 width: 20%;
}

@container tesguild (width < 600px) {
 #melonGuild-30 .melonGuild-info {
  width: 100%;
  font-size: 0.9em;
 }

 #melonGuild-30 .melonGuild-prev {
  order: 2;
  text-align: right;
 }

 #melonGuild-30 .melonGuild-next {
  order: 3;
  text-align: left;
 }

 #melonGuild-30 .melonGuild-prev,
 #melonGuild-30 .melonGuild-next {
  width: calc(50% - 10px);
  font-size: 0.9em;
 }
}

@container tesguild (width < 300px) {
 #melonGuild-30 .melonGuild-info {
  font-size: 0.8em;
 }

 #melonGuild-30 {
  line-height: 1;
 }

 #melonGuild-30 .melonGuild-prev,
 #melonGuild-30 .melonGuild-next {
  font-size: 0.8em;
 }
}

#melonGuild-30 .melonGuild-info span {
 display: none;
}

#melonGuild-30 .melonGuild-info b::after {
 content: ' Webring';
}

#melonGuild-30 .melonGuild-prev::before {
 content: '☚  ';
 margin-right: 0;
}

#melonGuild-30 .melonGuild-next::after {
 content: '  ☛';
 margin-left: 0;
}

#melonGuild-30 .melonGuild-info b {
 margin-bottom: 5px;
}