:root{
    --border: 1px solid black;
}
body{ background: #FCC439; background: linear-gradient(180deg, rgba(252, 196, 57, 1) 0%, rgba(250, 146, 51, 1) 50%, rgba(215, 77, 49, 1) 100%); }
.flex{display: flex;background-color: darkslategray; color: white;}
.primaryflex{flex:80%;}
.secondaryflex{flex:20%;}

.mainbox{border-top:var(--border);}
.column{flex-direction: column;}

.ruin-header{
    background: #662a9b;
    background: url("https://www.snugglyburrow.xyz/images/pixel/cloudsR4C.png"),url(https://www.snugglyburrow.xyz/Download/stars2.gif), linear-gradient(90deg, rgb(102, 42, 155) 0%, rgb(199, 182, 87) 70%, rgb(230, 165, 60) 85%, rgb(255, 13, 13) 100%);
    background-position: bottom;
    background-repeat: repeat-x;
    padding: 10px;
    background-blend-mode: color-burn,overlay;
    font-family: courier;

}
h1,h2,h3,p{ margin: 0px; }
h1{color:burlywood}
h2{color:wheat;font-family:courier ;}
h3{display: inline-block; text-decoration: inherit;}
.cattitle{display: block;}


.ruin{ border: var(--border); }


main{padding:20px;}
#leftcolumn{text-align: center; border-right:var(--border);}
#leftcolumn div{padding:20px}
#itemtitle{background-color: #ffffff1a;border-bottom:var(--border)}
#ruin-footer{border-top: var(--border);text-align: center;}
#ruin-footer p{padding: 20px;}
#ruin-navbar{border-left: var(--border)}

#itemtitle h2{color:#000037}
main h2{color:#FFCF34; text-align: center;margin: revert;}
main h1{color:#FFCF34; text-align: center;font-family: mono;}
main p{color:#c9e1c9;}

.gb{color: #fdd;}    /* GrazerBun */
.nj{color: #ffa42f;} /* Nijkstral */
.njgb, .gbnj{
    background: linear-gradient(to top, #fdd, #ffa42f);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

i{
    color: aliceblue; 
    cursor: help;
    text-decoration-line: underline;
    text-decoration-style: dotted;
}

.nav-links{padding:5px;}
nav{padding: 20px;}
nav h2{color: #00FD33;padding:10px;text-align: center;}
nav a{color:#79FF94;}

hr, .secondaryflex, .primaryflex{
    box-shadow: -1px -1px 0px 0px inset #00000040,1px 1px 0px 0px inset #82eabe40,2px 1px 0px 0px #0000;
}
hr{
    border: var(--border);
    border-bottom: 1px solid transparent;
    margin: 20px;
}

.sitetitle{
    padding: 10px;
}
.sitelist{
    color:white;
}

#furryopt{color:#ffcf34; display:ruby}
#activityopt{color:#ccd834; display:ruby}
#excplicitopt{color:#99e134; display:ruby}
#purposeopt{color:#66eb33; display:ruby}
#otheropt{color:#33f433; display:ruby}
#fandomopt{color:#00fd33; display:ruby}

td{border-right: 5px solid transparent;}

label{
    padding: 1px;
    margin: 2px;
}

label:has(input:checked) , input:user-valid{ 
    border-color: #00FD33; 
    background-color: #1f8c45;
}

#opt input:checked + label{ 
    font-weight: bold;
    border-color: inherit; 
    background-color: inherit;
}

input:invalid {
    border-color: #ffa42f;
    background-color: #786d44;
}


input {
    border: 1px solid #777;
    color:white;
    background-color: #485d5d;
}

input[type='checkbox'], input[type='radio']  { 
    margin:0px;
    margin-right: 2px;
}

a{ color:#79FF94; }
.r1 a{ color: #FFDE79 }


.star,.seelater{
    position: relative;
    top: 4px;
    padding-right: 5px;
    cursor: pointer; 
filter: grayscale(100%);
    filter: brightness(1.3);
}

.star.off,.seelater.off { filter: grayscale(100%) !important; }

.star:hover,.seelater:hover { filter: none; }

.star{
    padding: 0px;
}

section.site {
    padding: 10px;
    padding-top: 5px;
}

#ru{list-style-image:url("images/ruin.png")}
#li{list-style-image:url("images/list.png")}
#as{list-style-image:url("images/addsite.gif")}
#st{list-style-image:url("images/star.png")}
#sl{list-style-image:url("images/seelater.png")}

.nav-links img{padding-right: 5px;}