body {
    font-family: 'Pangolin', 'Arial', sans-serif;
    margin: 0;
    background-size: 65px;
    background-image: url('https://mildlypepper.net/media/site/background_image_small.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    color: #E5D5B0;
}

@font-face{
    font-family: Pangolin;
    src: "https://mildlypepper.net/media/site/fonts/Pangolin-Regular.ttf";
}

/*cursors 4 u style*/
/** {
    cursor: url(https://mildlypepper.net/cursor.cur),
    auto !important;
}*/

a{
  color: #182E46;
}

a:hover{
  color: #4B294C;
}

#containerTextpage{
    padding-top: 16px;
    max-width: 850px;
    margin: 0 auto;
}

#containerAll {
    padding-top: 16px;
    max-width: 1050px;
    margin: 0 auto;
}

#containerGallery {
    max-width: 850px;
    margin: 0 auto;
}

#header {
    max-width: 815px;
    margin: 0 auto;
}

#headerimg {
    width: 100%;
    height: 100px;
    background-image: url('https://mildlypepper.net/media/site/headerImage.png');
    background-size: 100%;
    background-repeat: no-repeat;
}

#utilitiesBox{
    font-size: smaller;
    display: float;
    float: right;
    flex-direction: column;
    width: 120px;
    padding-right: 8px;
    position: fixed;
    top: 0;
    right: 0;
}

#utilitiesBox img{
    float: right;
}

#utilitiesBox table{
    float: right;
}

#utilitiesBox td{
    float: right;
}

#navbar {
    padding-top: 8px;
    height: 80px;
    width: 100%;
    background-image: url('https://mildlypepper.net/media/site/Navbar-img.png');
    background-position: center;
    background-size: 100% 80px;
    background-repeat: no-repeat;
}

#navbar ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
}

#navbar li {
    padding-top: 10px;
}

#navbar li a {
    padding-left: 10px;
    padding-right: 10px;
}

#contentText{
    display: flex;
}

#contentText p{
    padding: 8px;
}

#contentText h3{
    padding: 4px;
}

#contentShrine{
    display: flex;
    flex-direction: column;
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
}

.shrineBox{
    width: 1000px;
    max-height: 2500px;
    margin: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

}

.shrineBox h2{
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

.shrineBox img{
    max-width: 300px;
    padding: 8px;
}

#contentHome {
    display: flex;
    background-image: url('https://mildlypepper.net/media/site/Main-bg-img.png');
    background-size: contain;
    background-repeat: no-repeat;
}

#contentHome a{
    color: #FD8A51;
}

#contentHome a:hover{
    color: #F3E5C0;
}


main {
    flex: 1;
    margin-left: 32px;
    margin-top: 12px;
    padding: 16px;
    order: 1;
    /*float: left;*/
    color: #E5D5B0;
}

#polaroid{
    float: left; 
    padding: 8px; 
    max-width: 130px; 
    rotate: 355deg;"
}

#polaroid:hover{
    transform: rotate(2deg);
}

.tilt:hover{
    transform: rotate(356deg);
}

#listPageColumn{
    max-width: 1250px;
/*    margin-left: 0px;
    margin-top: 0px;*/
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: space-evenly;
}

.listPageRow{
    padding: 4px;
    max-width: 1125px;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
}

.listPageElement {
    max-width: 310px;
    padding-right: 18px;
}

.listPageElement:hover{
    /*transform: scale(110%);
    transition-duration: 0.5s;*/
    transform: rotate(357deg);
}

#listPageContainer{
    display: flex;
    align-items: center;
    text-align: center;
}

.listPageCaption{
    color: #3d010d;
    background-color: #817e77;
    border: 2px solid #3d010d ;
    padding: 18px;
    text-align: left;
}

.listPageCaption h3{
    text-align: center;
}

#rightSidebar {
    order: 2;
    height:1900px;
    margin-left: auto;
    width: 225px;
    padding: 6px;
    font-size: smaller;
}

#rightSidebar a{
    color: #182E46;
}

#leftSideBar{
    display: float;
    float: left;
    flex-direction: column;
    width: 200px;
    padding-left: 4px;
    padding-top: 25px;
}

#leftSideBar img {
    float: left;
    max-width: 160px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-radius: 8px;"
}


footer {
    width: 100%;
    height: 40px;
    padding-bottom: 10px;
    text-align: center;
    color: #F3E5C0;
}

footer p {
    color: #F3E5C0;
}


.box, .shrineBox {
    color: #3d010d;
    background-color: #817e77;
    border: 2px solid #3d010d;
    padding: 2px;
    /*scrollbar-color: #3D010D;*/
}

.gifbox{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 321px;
    justify-content: space-evenly;
    padding-left: 4px;
}



#swatchClock a{
    color: #F3E5C0;
    text-decoration: none;
}

/*ocverse webring*/
/* 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 */

#OCverse {
  margin: 0 auto;
  font-family:'ds font';
  /*padding: 30px; /* creates some space around the widget */*/
}


#OCverse .webring-prev {
  text-align:right;
}

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

#OCverse .webring-next {
  text-align:left;
}

#OCverse .webring-links {
  font-size:small;
}

/*nekowebring*/

#nekowebring {
  margin: 0 auto;
  padding: 15px; /* creates some space around the widget */
}

#nekowebring table {
  background: linear-gradient(#fff2df, #fff2df, #eac3be);
  border: #c09a99 2px solid;
  margin: 0 auto; /* centers the widget */
  padding: 7px;
  border-radius: 10px;
  image-rendering: pixelated;
}

#nekowebring .webring-prev {
  text-align: right;
}

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

#nekowebring .webring-next {
  text-align: left;
}

#nekowebring .webring-links {
  font-size: small;
}


/*status cafe*/


#statuscafe {
    padding: .5em;
    background-color: #A7A4AB;
    border: 2px solid #3d010d;
    padding: 2px;
    color: #3d010d;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}


/*gallery styles*/
/*gallery template created by: https://roguecentaur.itch.io/, modified by me*/

* {
    box-sizing: border-box;
}

/** SECTIONS **/

#wrapper {
    display: flex;
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding-top: 10px;
    justify-content: center;
}


/** ELEMENTS **/
.art {
    width: 650px;
    padding: 2em;
    /** background-color: yellow; **/
}

.navigation {
    display: flex;
    flex-direction: row;
    justify-content: center;
    min-width: 25%;
    max-width: 45%;
    padding: 2em;
    /** background-color: red; **/
}

.navigation .list {
    display: flex;
    flex-direction: column;
}

.navigation .list label {
    padding: 10px 16px;
    margin-bottom: 10px;
    background-color: #817E77;
    color: #3d010d;
    width: 100%;
    writing-mode: vertical-lr;
    text-align: center;
    transform: rotate(180deg);
}

.tabs_radio, .tabs_content {
    display: none;
}

.tabs_content {
    order: 1;
}


.list label:hover {
    background-color: #25717F;
    color: #928F88;
}

.tabs_label {
    order: 0;
}

.tabs_radio:checked+.tabs_content {
    display: initial;
}

.sec {
    padding: 2px;
}

.art .sec {
    max-width: 500px;
    background: none;
}

.art .sec img:hover {
    transform: scale(110%);
    transition-duration: 0.5s;
}

.art_content, .art_radio {
    display: none;
}

.artimg {
    object-fit: scale-down;
    max-width: 400px;
    overflow: auto;
}


.art_radio:checked+.art_content {
    display: initial;
}

.container {
    background-color: #817E77;
    border: 2px solid #182E46;
    padding: 2px;
    height: 100%;
    max-width: 85%;
    overflow: auto;
    padding: 1em;
    margin: 0.5em;
}

.container h2{
    color: #182E46;
}

.art .container {
    border: none;
    background: none;
    padding: 0em;
    margin: 0em;
    overflow: auto;
    text-align: center;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

label img {
    max-width: 80px;
    margin: 2px;
    border: #242321;
    box-shadow: 5px 5px #272727;
    filter: brightness(90%);
    transition-duration: 0.5s;
}

label img:hover {
    transform: scale(115%);
    transition-duration: 0.5s;
}

.photoCaption{
    color: #3d010d;
    background-color: #817e77;
    border: 2px solid #3d010d ;
    padding: 2px;
    text-align: left;
}

.photoCaption ul {
    list-style-type: none;
    padding: 8px;
}

.photoCaption h3{
    text-align: center;

}

/*melonland "ad" banner style*/
.melonLink img { 
    border-radius: 8px; 
    max-height: 31px;
}

/*galactic webring*/

#galactic-box {
width: 190px;
margin: 0 auto !important;
display: flex;
align-items: center;
flex-direction: column;
position: relative;
font-family: MS Gothic;
/*border: 4px solid #0000ff;*/
background: #021637;
/*box-shadow: 0px 0px 8px #0000ff, 1px 1px 4px #0000ff inset, -1px -1px 4px #0000ff inset;*/
color: #F3E5C0;
/*text-shadow: 0px 0px 4px #ffff00;*/
box-sizing: border-box;
padding: 5px;
}   

#galactic-box .gw-logo {
width: 90px;
image-rendering: pixelated;
margin-bottom: 5px;
}

#galactic-box .gw-content-wrapper {
display: flex; 
align-items: center;
justify-content: center;
margin-bottom: 7px;
}

#galactic-box .gw-content-wrapper a {
all: unset;
cursor: pointer;
/*font-size: 35px;*/
}

#galactic-box .spot-container {
display: flex;
width: 100px;
align-items: center;
flex-direction: column;
margin-right: 5px;
}

#galactic-box .spot-image {
width: 130px;
/*image-rendering: pixelated;*/
margin-bottom: 5px;
}

#galactic-box .spot-name {
width: 130px;
text-align: center;
font-size: 12px;
/*font-weight: bold;
transition-duration: 0.5s;*/
}
/*
#galactic-box .spot-name:hover {
font-style: italic;
letter-spacing: 1px;
}
*/
#galactic-box .prevbutton {
margin-right: 5px;
width: 20px;
}

#galactic-box .nextbutton {
width: 20px;
}

#galactic-box .gw-nav-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}

#galactic-box .gw-nav-wrapper .gw-link {
text-align: center;
max-width: 80px;
/*font-weight: bold;*/
text-decoration: underline;
font-size: 12px;
}

#galactic-box .gw-nav-wrapper .gw-link a {
all: unset;
cursor: pointer;
}


/*wild wasteland webring*/
#wasteland {
    width: 190px;
  margin: 0 auto;
  padding: 15px; /* creates some space around the widget */
}

#wasteland table {
    width: 100%;
  background-color: transparent; /* makes the background pure white */
  margin: 0 auto; /* centers the widget */
  color: #108b4c;
border: 2px solid #108b4c;
padding: 1em;
background: linear-gradient(rgba(12, 5, 15, 0) 50%, rgba(0, 0, 0, 0.200) 50%);
background-color: #28fc8d;
z-index: 2;
background-size: 100% 2px, 3px 100%;
}
/*
#wasteland table tr td {
  padding: 15px; /* creates some space between the links and text inside the widget */
}
/**/

#wasteland .webring-prev {
  text-align:right;
}

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

#wasteland .webring-next {
  text-align:left;
}

#wasteland .webring-links {
  font-size:small;
}

/*art page lightbox overlay*/
.lightbox {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.8);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
}

.lightbox img {
max-width: 100%;
max-height: 100%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
border-radius: 10px;
}