/* --- SWITCH BIRD TO BUTTERFLY --- */

#melonGuild-7 .melonGuild-links img {
    display: none;
}

#melonGuild-7 .melonGuild-links a:first-child::after {
    display: inline-block ;
    content: '' ;
    background: url('https://pixelsea.neocities.org/icons/butterfly-0110.gif') ;
    background-size: cover ;
    margin: -5px 0rem -2px 4px ;
    width: 34px ;
    height: 34px ;
    vertical-align: middle ;
    image-rendering: pixelated ;
}

#melonGuild-7 .melonGuild-links a:first-child {
    padding-top: 4px;
    text-wrap: nowrap;
}

/* --- SIZING & RESPONSIVENESS --- */

#melonGuild-7.melonGuild {
    width: 360px ;
    max-width: calc(100% - 12px);
    margin: 10px auto;
    flex-flow: row;
    word-break: normal ;
    gap: 5px;
    justify-content: center;
    container-type: inline-size;
    container-name: natureguild;
}

@container natureguild (width < 315px) {
    #melonGuild-7 .melonGuild-info b,
    #melonGuild-7 .melonGuild-info a,
    #melonGuild-7 .melonGuild-prev,
    #melonGuild-7 .melonGuild-next {
        font-size: 12px;
    }
    #melonGuild-7 .melonGuild-links a:first-child::after {
        width: 21px;
        height: 17px;
    }
    #melonGuild-7 .melonGuild-links a:first-child {
        padding-top: 0;
    }
    #melonGuild-7 .melonGuild-links a:first-child::after {
        margin: -5px 0 0 0.5rem;
    }
}

/* --- CHANGING DISPLAY TEXT --- */

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

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

/* --- BIG ARROWS --- */

#melonGuild-7 .melonGuild-prev,
#melonGuild-7 .melonGuild-next {
    font-size: 0;
    text-decoration: none;
}

#melonGuild-7 .melonGuild-prev::before,
#melonGuild-7 .melonGuild-next::after {
    font-size: 3.50rem ; 
}

#melonGuild-7 .melonGuild-prev::before {
    content: '\2665' ;
    margin-right: 0;
    rotate: z 90deg;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

#melonGuild-7 .melonGuild-next::after {
  content: '\2665' ;
  margin-left: 0;
  rotate: z -90deg;
  writing-mode: vertical-lr;
    text-orientation: mixed;
}

/* --- STYLE FOR TITLE --- */

#melonGuild-7 .melonGuild-info b {
    margin-bottom: 2px; 
    letter-spacing: 1px;
    font-style: italic;
}

/* --- COLORS --- */

#melonGuild-7.melonGuild {
    border: 2px solid darkorchid ;
    background-image: url("https://textures.neocities.org/textures/plants/flowr2.jpg") ;
    background-size: 150px;
    padding: 5px;
    font-family: Times New Roman, serif;
    color: indigo;
    border-radius: 10px ;
}

#melonGuild-7 .melonGuild-info {
    background: #ffe0b3 ;
    padding: 5px 7px;
    border: 3px dashed orange ;
    font-size: 16px;
    border-radius: 10px;
}

#melonGuild-7 .melonGuild-links a {
    color: indigo ; 
}

#melonGuild-7 .melonGuild-prev,
#melonGuild-7 .melonGuild-next {
    color: #ffe0b3 ;
}

#melonGuild-7 .melonGuild-links a:hover,
#melonGuild-7 .melonGuild-links a:focus {
    color: purple; 
    text-decoration-thickness: 2px;
    text-decoration-color: orange ;
}

#melonGuild-7 .melonGuild-prev:hover,
#melonGuild-7 .melonGuild-prev:focus,
#melonGuild-7 .melonGuild-next:hover,
#melonGuild-7 .melonGuild-next:focus {
    color: orange ;
}


/* Coded by Semper with help from loren's Bird and Fish webring CSS */