MediaWiki:Common.css: Difference between revisions

From RosieSoCrossing
← Older editNewer edit →
No edit summary
No edit summary
Line 3,122: Line 3,122:
}
}


.bpocketcampclubgalleryheader {
.pocketcampclubgalleryheader {
   color: #FFF;
   color: #FFF;
   padding: 5px;
   padding: 5px;

Revision as of 16:23, 3 December 2024

@import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@700&family=Short+Stack&family=Open+Sans:ital,wght@0,700;1,700&family=Comfortaa:wght@300..700&family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://rosiesocosy.com/ext/fonts.css'); 

@import url('https://rosiesocosy.com/ext/fonts.css?family=ACWebFont'); 

/* Skin Custom CSS */

body {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
    color: #5D3C34;
    background-color: #f9b993;
    background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-brown.png);
    background-repeat: repeat;
    font-size: 1em;
}

#mw-content {
    background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-cream.png");
    background-color: #fff5eb;
    border: none;
    box-shadow: 0 1px 2px 1px rgba(0,0,0,0.02);
}

#mw-content-block {
  background: none;
}

strong {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}

#p-logo-text a.long {
    padding: 0.1em 0.75em 0 0;
    font-size: 2em;
}

#p-logo-text a {
    font-variant: normal;
}

#p-logo-text a {
    color: #E5977F;
    /*font-family: 'Banana Days', Helvetica, Verdana, sans-serif;*/
    font-family: "ACWebFont", "Mountains of Christmas", Verdana, Helvetica, sans-serif;
    font-weight: 400;
    font-style: normal;
}

a, a:link, a:active, a:visited, .mw-parser-output a.extiw:visited, .mw-parser-output a.extiw:active:visited, .mw-parser-output a.external:visited, .mw-parser-output a.extiw, .mw-parser-output a.extiw:active, .mw-parser-output a.external {
    color: #C37F3A;
    text-decoration: none;
    transition: all 0.5s ease;
}

a:hover, a:visited:hover, .mw-parser-output a.extiw:visited:hover, .mw-parser-output a.extiw:active:visited:hover, .mw-parser-output a.external:visited:hover, .mw-parser-output a.extiw:hover, .mw-parser-output a.extiw:active:hover, .mw-parser-output a.external:hover {
    color: #b55905;
    text-decoration: none;
    transition: all 0.5s ease;
}

a.new, .new a, a.new:visited, .new a:visited {
    color: #B83823;
    text-decoration: none;
    transition: all 0.5s ease;
}

a.new:hover, .new a:hover {
    color: #ED563D;
    text-decoration: none;
}

.mw-parser-output a.external, .link-mailto, .link-ftp, .link-irc, .link-audio, .link-video, .link-document {
    background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/icon-extlink.png");
}

.mw-footer-container a, .mw-footer-container a:link, .mw-footer-container a:active, .mw-footer-container a:visited {
    color: #C37F3A;
}

.mw-footer-container a:hover {
    color: #b55905;
}

#mw-content-container {
    background-color: #F5BA9A;
    background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-ac-nacho-pink.png");
    background-repeat: repeat;
    border-bottom: solid 4px #e5977f;
}

.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6, .mw-body dt {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}

#mw-site-navigation .sidebar-chunk label, #mw-site-navigation .sidebar-chunk h3 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}

#mw-related-navigation .sidebar-chunk label, #mw-related-navigation .sidebar-chunk h3 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}

hr {
    border-width: 3px;
    border-color: #a2553f36;
    border-style: dotted none none none;
    margin: 0.5em 0;
}

/* Media */

figure {
    box-shadow: none;
    border-radius: 6px;
    background-color: transparent;
    background-image: none;
    border: none;
    margin: 0 auto 20px;
}

figure[typeof~="mw:File/Thumb"] {
    box-shadow: 2px 4px 0 3px rgba(0,0,0,0.05) /*4px 4px 0 2px rgba(0,0,0,0.1)*/;
    border-radius: 6px;
    background-color: #FFF;
    background-image: none;
    border: none /*1px solid #E0CA91*/;
}

figure[typeof~="mw:File/Thumb"] img {
  max-width: 100% !important;
  width: 100%;
}

figure[typeof~="mw:File/Frame"] {
    box-shadow: 2px 4px 0 3px rgba(0,0,0,0.05) /*4px 4px 0 2px rgba(0,0,0,0.1)*/;
    border-radius: 6px;
    background-color: #FFF;
    background-image: none;
    border: none /*1px solid #E0CA91*/;
}

figure[typeof~="mw:File/Frame"] img {
  max-width: 100% !important;
  width: 100%;
}

figure[typeof~="mw:File/Frameless"] {
    box-shadow: 2px 4px 0 3px rgba(0,0,0,0.05) /*4px 4px 0 2px rgba(0,0,0,0)*/;
    border-radius: 6px;
    background-color: transparent;
    background-image: none;
    border: none;
}

figure[typeof~="mw:File/Frameless"] img {
  max-width: 100% !important;
  width: 100%;
}

.frontpage figure {
    background-color: #F8F0E1;
    background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-diag-lcream.png");
    border: 1px solid #E0CA91;
}

.frontpage figure[typeof~="mw:File/Thumb"] {
    background-color: #F8F0E1;
    background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-diag-lcream.png");
    border: 1px solid #E0CA91;
}

.frontpage figure[typeof~="mw:File/Frame"] {
    background-color: #F8F0E1;
    background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-diag-lcream.png");
    border: 1px solid #E0CA91;
}

.frontpage figure[typeof~="mw:File/Frameless"] {
    background-color: transparent;
    background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-diag-lcream.png");
    border: 1px solid #E0CA91;
}

figure[typeof~="mw:File/Thumb"], figure[typeof~="mw:File/Frame"] {
    display: grid;
}

figure[typeof~="mw:File/Thumb"] > figcaption, figure[typeof~="mw:File/Frame"] > figcaption {
    border: none;
    box-shadow: none;
    background: none;
}

#mw-header-container {
    background-color: #4C312C;
    background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-brown.png");
    background-repeat: repeat;
}

.color-middle {
    background: #4C312C;
}

.color-left {
    background: #62332B;
}

.color-right {
    background: #62332B;
}

.mw-footer-container {
    color: #8A6B5A;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.25);
}

#mw-site-navigation .sidebar-chunk .mw-portlet > div, #mw-site-navigation .sidebar-chunk .mw-portlet-body {
    margin-bottom: 1em;
}

#mw-site-navigation .sidebar-chunk {
    background: none;
    border: 0;
    padding: 1.25em 1.75em;
    padding: 1.5em 1.5em 0.5em;
    margin: 1em 0;
    line-height: 1;
    font-size: 0.95em;
    border-radius: 6px;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
    background-color: #fff5eb;
    background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-sakura-cream-r.png");
    background-repeat: repeat;
}

#mw-site-navigation #site-navigation {
    background-position: right top;
}

#mw-site-navigation #site-tools {
    background-position: right bottom;
}

#mw-related-navigation .sidebar-chunk {
    background: none;
    border: 0;
    padding: 1.25em 1.75em;
    padding: 1.5em 1.5em 0.5em;
    margin: 1em 0;
    line-height: 1;
    font-size: 0.95em;
    border-radius: 6px;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
    background-color: #fff5eb;
    background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-sakura-cream-r.png");
    background-repeat: repeat;
}

#mw-related-navigation #page-tools {
    background-position: right bottom;
}

#mw-site-navigation .sidebar-chunk label, #mw-site-navigation .sidebar-chunk h3, #mw-related-navigation .sidebar-chunk label, #mw-related-navigation .sidebar-chunk h3 {
    font-size: 2em;
    margin: -10px -10px 10px;
    padding: 5px 10px;
    border-bottom: 0;
    display: block;
    background-color: #5D3C34;
    border-radius: 6px;
    color: #E5977F;
    letter-spacing: 0em;
    text-transform: capitalize;
    font-variant: petite-caps;
    font-family: "ACWebFont", "Mountains of Christmas", Verdana, Helvetica, sans-serif;
    font-weight: 400;
    font-style: normal;
}

#mw-header-container {
    color: #c37f3a;
}

#personal h2 {
    font-family: "Poppins", sans-serif;
    padding: 0.3em 0 0 25px;
}

code, pre, .mw-code {
    color: #86837c;
    background-color: #47413e;
    border: 5px solid #9a725e;
}

form:not(.oo-ui-layout) textarea, form:not(.oo-ui-layout) input {
    border: solid 2px #9f4a37;
    border-radius: 6px;
    background-color: #f9b993;
    color: #4c312c;
    background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-pink.png");
}

.mw-body h1.firstHeading {
  font-family: "ACWebFont", "Mountains of Christmas",Verdana,Helvetica,sans-serif;
  font-weight: 400;
  font-style: normal;
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-mcm-sparkles-l-red.png);
  border-radius: 6px;
  background-color: #9D4A3C;
  padding: 10px;
  margin: 10px auto 20px;
  text-align: center;
  color: #F9F3E8;
  border: none;
  letter-spacing: 0.05em;
}

.mw-body h2 {
  font-family: "ACWebFont", "Mountains of Christmas",Verdana,Helvetica,sans-serif;
  font-weight: 400;
  font-style: normal;
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-mcm-sparkles-l-red.png);
  border-radius: 6px;
  background-color: #9D4A3C;
  padding: 10px;
  margin: 10px auto 20px;
  text-align: left;
  color: #F9F3E8;
  border: none;
  letter-spacing: 0.05em;
  font-size: 1.4em;
  clear: both;
}

.mw-body h2 a {
  color: #F9F3E8;
}

.mw-body h2 .new, .mw-body h2 .new a, .mw-body h2 a.new:visited, .mw-body h2 .new a:visited {
  color: #F9F3E8;
}

.mw-body h2 a:hover {
  color: #F9F3E8;
}

.mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, .mw-changeslist-legend, .mw-body .mw-search-profile-tabs, .mw-body fieldset#mw-searchoptions, .mw_metadata, .wikitable, .mw-datatable {
    color: #9e4a40;
    background: #f0bb9782;
    border: solid #4993e2;
    border-top-width: medium;
    border-top-color: #f0bb97;
    border-right-width: medium;
    border-right-color: #f0bb97;
    border-bottom-width: medium;
    border-bottom-color: #f0bb97;
    border-left-width: medium;
    border-left-color: #f0bb97;
    border-width: 1px 1px 0.2em;
    padding: 1.25em 1.75em;
    box-shadow: 0 1px 2px 1px rgba(0,0,0,0.02);
    width: 100%;
  }

  .mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, .mw-changeslist-legend, .mw-body .mw-search-profile-tabs, .mw-body fieldset#mw-searchoptions, .mw_metadata, .wikitable, .mw-datatable {
    color: #c87e75;
  }

  .wikitable > tr > th, .wikitable > * > tr > th {
    background-color: #5f3d3a;
    text-align: center;
    color: #F9F3E8;
  }

.mw_metadata > tr > th, .mw-datatable > tr > th, .wikitable > tr > th, .mw_metadata > tr > td, .mw-datatable > tr > td, .wikitable > tr > td, .mw_metadata > * > tr > th, .mw-datatable > * > tr > th, .wikitable > * > tr > th, .mw_metadata > * > tr > td, .mw-datatable > * > tr > td, .wikitable > * > tr > td {
    border: 1px solid #fdf3e3;
    padding: 0.4em 0.5em;
    vertical-align: top;
  }

.wikitable.wikitable-villagers td {
  padding: 25px;
  text-align: center;
}

.wikitable.wikitable-villagers td img {
  margin-bottom: 15px;
}

.wikitable.wikitable-villagers td p {
  padding: 0;
  margin: 0;
}

.wikitable.personality-villagers-wikitable td {
  text-align: center;
  padding: 25px;
  width: 25%;
}

.wikitable.personality-villagers-wikitable td .mw-file-element {
  max-width: 100%;
  min-width: 128px;
}

.wikitable.personality-villagers-wikitable td p {
  margin: 0;
  padding: 0;
}

.wikitable.personality-villagers-wikitable td img {

}

.mw-content-ltr figure[typeof~="mw:File/Thumb"].mw-halign-left, 
.mw-content-ltr figure[typeof~="mw:File/Frame"].mw-halign-left {
  margin: 0 20px 20px 0;
}

.mw-content-ltr figure[typeof~="mw:File/Thumb"].mw-halign-left a, 
.mw-content-ltr figure[typeof~="mw:File/Frame"].mw-halign-left a {
  flex: 1 0 100%;
  margin: 0 -10px;
}

.mw-content-ltr figure[typeof~="mw:File/Thumb"].mw-halign-right, 
.mw-content-ltr figure[typeof~="mw:File/Frame"].mw-halign-right {
  margin: 0 0 20px 20px;
}

.mw-content-ltr figure[typeof~="mw:File/Thumb"].mw-halign-right a, 
.mw-content-ltr figure[typeof~="mw:File/Frame"].mw-halign-right a {
  flex: 1 0 100%;
  margin: 0 -10px;
}

.mw-content-ltr figure[typeof~="mw:File"].mw-halign-center, 
.mw-content-ltr figure[typeof~="mw:File/Frameless"].mw-halign-center {
    margin: 0 auto 20px;
}

.mw-content-ltr figure[typeof~="mw:File/Thumb"].mw-halign-center a, 
.mw-content-ltr figure[typeof~="mw:File/Frame"].mw-halign-center a {
  flex: 1 0 100%;
  margin: 0 -10px;
}

#mw-content-text h1 {
  font-family: "ACWebFont", "Mountains of Christmas",Verdana,Helvetica,sans-serif;
  font-weight: 400;
  font-style: normal;
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-mcm-sparkles-l-brown.png);
  border-radius: 6px;
  background-color: #f9b993;
  padding: 10px;
  margin: 10px auto 20px;
  text-align: left;
  color: #F9F3E8;
  border: none;
  letter-spacing: 0.05em;
  font-size: 2em;
  clear: both;
}

#mw-content-text h1 a {
  color: #F9F3E8;
}

#mw-content-text h1 .new, #mw-content-text h1 .new a, #mw-content-text h1 a.new:visited, #mw-content-text h1 .new a:visited {
  color: #F9F3E8;
}

#mw-content-text h1 a:hover {
  color: #F9F3E8;
}

/*.rainbow {
  background: #FF0000;
  background: linear-gradient(to right, #FF0000 0%, #FF8C00 17%, #FFD001 34%, #60E600 50%, #00FFD0 66%, #00D9FF 83%, #D900FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}*/

@keyframes wiggle {
 50% {
  transform:rotate(-4deg) scale(1.1);
 }
}

.rainbow.wiggle:nth-child(20n+1),
.rainbow.wiggle:nth-child(20n+13) {
  color:#AD4132;
}

.rainbow.wiggle:nth-child(20n+2),
.rainbow.wiggle:nth-child(20n+14) {
  color:#C05D2B;
}

.rainbow.wiggle:nth-child(20n+3),
.rainbow.wiggle:nth-child(20n+15) {
  color:#CD8C38;
}

.rainbow.wiggle:nth-child(20n+4),
.rainbow.wiggle:nth-child(20n+16) {
  color:#E0AF28;
}

.rainbow.wiggle:nth-child(20n+5),
.rainbow.wiggle:nth-child(20n+17) {
  color:#C2B63F;
}

.rainbow.wiggle:nth-child(20n+6),
.rainbow.wiggle:nth-child(20n+18) {
  color:#81A572;
}

.rainbow.wiggle:nth-child(20n+7),
.rainbow.wiggle:nth-child(20n+19) {
  color:#4CAB98;
}

.rainbow.wiggle:nth-child(20n+8),
.rainbow.wiggle:nth-child(20n) {
  color:#6AB3C4;
}

.rainbow.wiggle:nth-child(20n+9) {
  color:#A19FBE;
}

.rainbow.wiggle:nth-child(20n+10) {
  color:#D3A1BA;
}

.rainbow.wiggle:nth-child(20n+11) {
  color:#E88DAE;
}

.rainbow.wiggle:nth-child(20n+12) {
  color:#CB6770;
}

.wiggle {
  animation-name:wiggle;
  animation-duration:.5s;
}

.wiggle {
  animation: wiggle 0.75s infinite;
  display: inline-block;
}

.wiggle:nth-child(20n+1) {
  animation-delay:0s;
}

.wiggle:nth-child(20n+2) {
  animation-delay:-.1s;
}

.wiggle:nth-child(20n+3) {
  animation-delay:-.2s;
}

.wiggle:nth-child(20n+4) {
  animation-delay:-.3s;
}

.wiggle:nth-child(20n+5) {
  animation-delay:-.4s;
}

.wiggle:nth-child(20n+6) {
  animation-delay:-.5s;
}

.wiggle:nth-child(20n+7) {
  animation-delay:-.6s;
}

.wiggle:nth-child(20n+8) {
  animation-delay:-.7s;
}

.wiggle:nth-child(20n+9) {
  animation-delay:-.8s;
}

.wiggle:nth-child(20n+10) {
  animation-delay:-.9s;
}

.wiggle:nth-child(20n+11) {
  animation-delay:-1s;
}

.wiggle:nth-child(20n+12) {
  animation-delay:-1.1s;
}

.wiggle:nth-child(20n+13) {
  animation-delay:-1.2s;
}

.wiggle:nth-child(20n+14) {
  animation-delay:-1.3s;
}

.wiggle:nth-child(20n+15) {
  animation-delay:-1.4s;
}

.wiggle:nth-child(20n+16) {
  animation-delay:-1.5s;
}

.wiggle:nth-child(20n+17) {
  animation-delay:-1.6s;
}

.wiggle:nth-child(20n+18) {
  animation-delay:-1.7s;
}

.wiggle:nth-child(20n+19) {
  animation-delay:-1.8s;
}

.wiggle:nth-child(20n) {
  animation-delay:-1.9s;
}

.wellhellothere {
  font-family: "ACWebFont", "Mountains of Christmas", Verdana, Helvetica, sans-serif;
  font-size: 20pt;
}

.center {
  text-align: center;
}

.date {
  font-size: 0.85em;
  font-style: italic;
  color: #984e3e85;
}

.date p {
  margin: 0 0 10px;
}

.source {
  font-size: 0.85em;
  font-style: italic;
  color: #984e3e85;
}

.mw-body-content table a > img, .mw-body-content table .floatnone > img {
  height: auto;
  max-width: 100% !important;
}

.frontpage {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: auto;
grid-column-gap: 20px;
grid-row-gap: 20px;
}

.mw-content-ltr .frontpage figure[typeof~="mw:File/Thumb"], 
.mw-content-ltr .frontpage figure[typeof~="mw:File/Frame"] {
  margin: 0 0 10px;
}

.mw-content-ltr .frontpage figure[typeof~="mw:File/Thumb"].mw-halign-left, 
.mw-content-ltr .frontpage figure[typeof~="mw:File/Frame"].mw-halign-left {
  margin: 0 10px 10px 0;
}

.mw-content-ltr .frontpage figure[typeof~="mw:File/Thumb"].mw-halign-right, 
.mw-content-ltr .frontpage figure[typeof~="mw:File/Frame"].mw-halign-right {
  margin: 0 0 10px 10px;
}

.frontpage h2 {
  margin: 0 0 10px;
  text-align: center;
}

.frontpage h3 {
  font-family: "ACWebFont","Mountains of Christmas",Verdana,Helvetica,sans-serif;
  font-weight: 400;
  font-style: normal;
  background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-villagers-color-03.png");
  border-radius: 6px;
  background-color: #9D4A3C;
  padding: 10px;
  margin: 10px auto 10px;
  text-align: left;
  color: #9C4A38;
  letter-spacing: 0.05em;
  font-size: 1.4em;
  clear: both;
  background-position: 0 18px;
  background-size: 256px;
  border: 2px solid #D88E767A;
  text-shadow: 2px 2px 0 rgba(159, 73, 53, 0.29);
}

.frontpage .frontevents h3:nth-of-type(1) {
  background-position: center -16px;
}

.frontpage .frontevents h3:nth-of-type(2) {
  background-position: center 24px;
}

.frontpage .frontevents h3:nth-of-type(3) {
  background-position: center 63px;
}

.frontpage .frontevents h3:nth-of-type(4) {
  background-position: center 102px;
}

.frontpage .frontevents h3:nth-of-type(5) {
  background-position: center 142px;
}

.frontpage .frontevents h3:nth-of-type(6) {
  background-position: center 180px;
}

.frontpage ul, .frontpage ol, .mw-content-ltr .frontpage ul, .mw-content-rtl .mw-content-ltr .frontpage ul, .mw-content-ltr .frontpage ol, .mw-content-rtl .mw-content-ltr .frontpage ol {
  margin-bottom: 10px;
}

.frontbdays ol {
  margin: 0 0 0 35px;
}

.fronthi { grid-area: 1 / 1 / 2 / 5; }
.frontsocials { grid-area: 1 / 5 / 2 / 6; }
.frontbdays { grid-area: 2 / 1 / 4 / 2; }
.frontevents { grid-area: 2 / 2 / 3 / 4; }
.frontscreen { grid-area: 3 / 2 / 4 / 4; }
.frontnews { grid-area: 2 / 4 / 4 / 6; }
.frontart { grid-area: 4 / 1 / 5 / 6; }
.frontisles { grid-area: 5 / 1 / 6 / 6; }

.frontsocials p {
  padding: 0;
  margin: 0;
}

.frontsocials p {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: auto;
  gap: 10px;
  width: calc(100% - 30px);
}

.artwork-grid {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: auto;
  gap: 20px;
  width: calc(100% - 80px);
}

.islands-grid {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: auto;
  gap: 20px;
  width: calc(100% - 80px);
}

.artwork-grid p, islands-grid p {
  margin: 0;
  padding: 0;
}

.artwork-grid .artwork img {
  border-radius: 6px;
  box-shadow: 6px 6px 0 0 rgba(0,0,0,0.05);
  padding: 0;
}

.frontpage > div {
  background-color: #fbd6c0;
  background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-l-pink2.png");
}

.frontpage > div:last-child {
  margin-bottom: 20px;
}

.frontpage > div, .frontpage .frontisles .islands-grid > div {
  border-radius: 6px;
  box-shadow: 6px 6px 0 0 rgba(0,0,0,0.05);
  padding: 10px;
}

.frontislestardust p, .frontislemaplegrove p, .frontislemiffyisle p, .frontislesakurabay p, .frontislesnw p, .frontislecosycove p, .frontisleheatherbay p, .frontisleleviland p, .frontisleleviland2 p, .frontislequinnland p {
  padding: 0;
  margin: 0;
}

.frontpage > div.frontislestardust, .frontpage .frontisles .islands-grid > div.frontislestardust {
  background-color: #FFF;
  background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-mcm-sparkles-l-worange.png");
}

.frontpage > div.frontislemaplegrove, .frontpage .frontisles .islands-grid > div.frontislemaplegrove {
  background-color: #FFF;
  background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-leaves-l-burgundy.png");
}

.frontpage > div.frontislemiffyisle, .frontpage .frontisles .islands-grid > div.frontislemiffyisle {
  background-color: #FFF;
  background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-miffy-isle-plaid-miffy-mini.png");
}

.frontpage > div.frontislesakurabay, .frontpage .frontisles .islands-grid > div.frontislesakurabay {
  background-color: #FFF;
  background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-sakura-l-red.png");
}

.frontpage > div.frontislesnw, .frontpage .frontisles .islands-grid > div.frontislesnw {
  background-color: #FFF;
  background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-sgyroids-l-green.png");
}

.frontpage > div.frontislecosycove, .frontpage .frontisles .islands-grid > div.frontislecosycove {
  background-color: #FFF;
  background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-xmas-knitted-brown.png");
}

.frontpage > div.frontisleheatherbay, .frontpage .frontisles .islands-grid > div.frontisleheatherbay {
  background-color: #FFF;
  background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-ac-leaves-mint.png");
  background-size: 75%;
}

.frontpage > div.frontisleleviland, .frontpage .frontisles .islands-grid > div.frontisleleviland {
  background-color: #FFF;
  background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-mcm-sparkles-l-dblue.png");
}

.frontpage > div.frontisleleviland2, .frontpage .frontisles .islands-grid > div.frontisleleviland2 {
  background-color: #FFF;
  background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-ac-triangles-purple.png");
}

.frontpage > div.frontislequinnland, .frontpage .frontisles .islands-grid > div.frontislequinnland {
  background-color: #FFF;
  background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-villagers-color-03.png");
}

.frontpage .mw-editsection {
  position: absolute;
}


/* Min 2560px */

@media (min-width: 2560px) {

.frontpage {
  display: grid;
  grid-template-columns: repeat(8,1fr);
  grid-template-rows: auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.fronthi { grid-area: 1 / 1 / 2 / 6; }
.frontsocials { grid-area: 2 / 1 / 3 / 6; }
.frontbdays { grid-area: 3 / 1 / 4 / 6; }
.frontevents { grid-area: 4 / 3 / 5 / 6; }
.frontscreen { grid-area: 4 / 1 / 5 / 3; }
.frontnews { grid-area: 1 / 6 / 4 / 9; }
.frontart { grid-area: 4 / 6 / 5 / 9; }
.frontisles { grid-area: 5 / 1 / 6 / 9; }

.frontsocials p {
  display: grid;
  grid-template-columns: 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25%;
  grid-template-rows: auto;
  gap: 10px;
  width: calc(100% - 150px);
}

.frontbdays ol {
  -moz-column-count: 3;
  -moz-column-gap: 30px;
  -webkit-column-count: 3;
  -webkit-column-gap: 30px;
  column-count: 3;
  column-gap: 30px;
  font-size: 100%;
  margin: 0 0 0 25px;
}

.artwork-grid {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto;
  gap: 10px;
  width: calc(100% - 10px);
}

.artwork-grid .artwork5 {
  display: none;
}

.islands-grid {
  display: grid;
  grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%auto;
  grid-template-rows: auto;
  gap: 10px;
  width: calc(100% - 90px);
}

}

/* Min 2048px */

@media (max-width: 2559px) {

.fronthi { grid-area: 1 / 1 / 2 / 5; }
.frontsocials { grid-area: 1 / 5 / 2 / 6; }
.frontbdays { grid-area: 2 / 1 / 4 / 2; }
.frontevents { grid-area: 2 / 2 / 3 / 4; }
.frontscreen { grid-area: 3 / 2 / 4 / 4; }
.frontnews { grid-area: 2 / 4 / 4 / 6; }
.frontart { grid-area: 4 / 1 / 5 / 6; }
.frontisles { grid-area: 5 / 1 / 6 / 6; }

}

/* Min 1920px */

@media (max-width: 2047px) {

.frontpage {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  grid-template-rows: auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.fronthi { grid-area: 1 / 1 / 2 / 6; }
.frontsocials { grid-area: 1 / 6 / 2 / 8; }
.frontbdays { grid-area: 2 / 1 / 4 / 3; }
.frontevents { grid-area: 2 / 3 / 3 / 5; }
.frontscreen { grid-area: 3 / 3 / 4 / 5; }
.frontnews { grid-area: 2 / 5 / 4 / 8; }
.frontart { grid-area: 4 / 1 / 5 / 8; }
.frontisles { grid-area: 5 / 1 / 6 / 8; }

}

/* Min 1600px */

@media (max-width: 1919px) {

.frontpage {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  grid-template-rows: auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.fronthi { grid-area: 1 / 1 / 2 / 6; }
.frontsocials { grid-area: 1 / 6 / 2 / 8; }
.frontbdays { grid-area: 2 / 1 / 4 / 3; }
.frontevents { grid-area: 2 / 3 / 3 / 5; }
.frontscreen { grid-area: 3 / 3 / 4 / 5; }
.frontnews { grid-area: 2 / 5 / 4 / 8; }
.frontart { grid-area: 4 / 1 / 5 / 8; }
.frontisles { grid-area: 5 / 1 / 6 / 8; }

}

/* Min 1440px */

@media (max-width: 1599px) {

.frontpage {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  grid-template-rows: auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.fronthi { grid-area: 1 / 1 / 2 / 5; }
.frontsocials { grid-area: 2 / 1 / 3 / 5; }
.frontbdays { grid-area: 3 / 5 / 5 / 8; }
.frontevents { grid-area: 3 / 1 / 4 / 5; }
.frontscreen { grid-area: 4 / 1 / 5 / 5; }
.frontnews { grid-area: 1 / 5 / 3 / 8; }
.frontart { grid-area: 5 / 1 / 6 / 8; }
.frontisles { grid-area: 6 / 1 / 7 / 8; } 

.frontsocials p {
  display: grid;
  grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%;
  grid-template-rows: auto;
  gap: 10px;
  width: calc(100% - 70px);
}

}

/* Min 1280px */

@media (max-width: 1439px) {

.frontpage {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  grid-template-rows: auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.fronthi { grid-area: 1 / 1 / 2 / 5; }
.frontsocials { grid-area: 2 / 1 / 3 / 5; }
.frontbdays { grid-area: 3 / 5 / 5 / 8; }
.frontevents { grid-area: 3 / 1 / 4 / 5; }
.frontscreen { grid-area: 4 / 1 / 5 / 5; }
.frontnews { grid-area: 1 / 5 / 3 / 8; }
.frontart { grid-area: 5 / 1 / 6 / 8; }
.frontisles { grid-area: 6 / 1 / 7 / 8; } 

.frontsocials p {
  display: grid;
  grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%;
  grid-template-rows: auto;
  gap: 10px;
  width: calc(100% - 70px);
}

}


/* Min 1152px */

@media (max-width: 1279px) {

.frontpage {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  grid-template-rows: auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.fronthi { grid-area: 1 / 1 / 2 / 5; }
.frontsocials { grid-area: 3 / 1 / 4 / 5; }
.frontbdays { grid-area: 4 / 1 / 5 / 5; }
.frontevents { grid-area: 3 / 5 / 5 / 8; }
.frontscreen { grid-area: 2 / 1 / 3 / 5; }
.frontnews { grid-area: 1 / 5 / 3 / 8; }
.frontart { grid-area: 5 / 1 / 6 / 8; }
.frontisles { grid-area: 6 / 1 / 7 / 8; } 

.frontsocials p {
    display: grid;
    grid-template-columns: 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25%auto;
    grid-template-rows: auto;
    gap: 10px;
    width: calc(100% - 150px);
}

.frontbdays ol {
  -moz-column-count: 3;
  -moz-column-gap: 30px;
  -webkit-column-count: 3;
  -webkit-column-gap: 30px;
  column-count: 3;
  column-gap: 30px;
  font-size: 100%;
  margin: 0 0 0 25px;
}

}

/* Min 1080px */

@media (max-width: 1151px) {

.frontpage {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  grid-template-rows: auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.fronthi { grid-area: 1 / 1 / 2 / 5; }
.frontsocials { grid-area: 3 / 1 / 4 / 5; }
.frontbdays { grid-area: 4 / 1 / 5 / 5; }
.frontevents { grid-area: 3 / 5 / 5 / 8; }
.frontscreen { grid-area: 2 / 1 / 3 / 5; }
.frontnews { grid-area: 1 / 5 / 3 / 8; }
.frontart { grid-area: 5 / 1 / 6 / 8; }
.frontisles { grid-area: 6 / 1 / 7 / 8; } 

.frontsocials p {
    display: grid;
    grid-template-columns: 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25%auto;
    grid-template-rows: auto;
    gap: 10px;
    width: calc(100% - 150px);
}

.frontbdays ol {
  -moz-column-count: 3;
  -moz-column-gap: 30px;
  -webkit-column-count: 3;
  -webkit-column-gap: 30px;
  column-count: 3;
  column-gap: 30px;
  font-size: 100%;
  margin: 0 0 0 25px;
}

#mw-header-nav-hack {
    border-top: none;
    display: block;
    position: absolute;
    z-index: 198;
    background: #e5977f;
    background-image: none;
    width: 100%;
    background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-dbrown.png");
    font-family: "Poppins",sans-serif;
    font-weight: 400;
}

#mw-site-navigation h2, #mw-related-navigation h2 {
  font-family: "Poppins",sans-serif;
  font-weight: 400;
  color: #954a34;
}

#mw-site-navigation .sidebar-chunk, 
#mw-related-navigation .sidebar-chunk {
  background-image: none;
  background-color: transparent;
  margin: 0 0 20px;
  padding: 0 0 20px;
  box-shadow: none;
  display: inline-block;
}

}

/* Min 1024px */

@media (max-width: 1079px) {

.frontpage {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  grid-template-rows: auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.fronthi { grid-area: 1 / 1 / 2 / 5; }
.frontsocials { grid-area: 2 / 1 / 3 / 5; }
.frontbdays { grid-area: 3 / 5 / 5 / 8; }
.frontevents { grid-area: 3 / 1 / 4 / 5; }
.frontscreen { grid-area: 4 / 1 / 5 / 5; }
.frontnews { grid-area: 1 / 5 / 3 / 8; }
.frontart { grid-area: 5 / 1 / 6 / 8; }
.frontisles { grid-area: 6 / 1 / 7 / 8; } 

.frontsocials p {
  display: grid;
  grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%;
  grid-template-rows: auto;
  gap: 10px;
  width: calc(100% - 70px);
}

#mw-header-nav-hack {
    border-top: none;
    display: block;
    position: absolute;
    z-index: 198;
    background: #e5977f;
    background-image: none;
    width: 100%;
    background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-dbrown.png");
    font-family: "Poppins",sans-serif;
    font-weight: 400;
}

#mw-site-navigation h2, #mw-related-navigation h2 {
  font-family: "Poppins",sans-serif;
  font-weight: 400;
  color: #954a34;
}

#mw-site-navigation .sidebar-chunk, 
#mw-related-navigation .sidebar-chunk {
  background-image: none;
  background-color: transparent;
  margin: 0 0 20px;
  padding: 0 0 20px;
  box-shadow: none;
  display: inline-block;
}

#content-bottom-stuff {
   background-color: #9a916b;
   background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-sgyroids-l-mutedgreen.png");
   color: #5D3C34;
}

#mw-normal-catlinks a, #mw-normal-catlinks a:link, #mw-normal-catlinks a:active, #mw-normal-catlinks a:visited, #mw-normal-catlinks a.extiw:visited, #mw-normal-catlinks a.extiw:active:visited, #mw-normal-catlinks a.external:visited, #mw-normal-catlinks a.extiw, #mw-normal-catlinks a.extiw:active, #mw-normal-catlinks a.external {
   color: #5D3C34;
}

#mw-normal-catlinks a:hover {
   color: #5D3C34;
}

#mw-normal-catlinks a.new, #mw-normal-catlinks .new a, #mw-normal-catlinks a.new:visited, #mw-normal-catlinks .new a:visited {
   color: #8A3131;
}

#mw-normal-catlinks a.new:hover, #mw-normal-catlinks .new a:hover, #mw-normal-catlinks a.new:visited:hover, #mw-normal-catlinks .new a:visited:hover {
   color: #8A3131;
}

}

/* Min 851px */

@media (max-width: 1023px) {

.frontpage {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    grid-template-rows: auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.fronthi {
  grid-area: 2 / 1 / 3 / 7;
}

.fronthi figure[typeof~="mw:File/Thumb"], .fronthi figure[typeof~="mw:File/Frame"] {
  width: 31% !important;
  float: right !important;
  margin: 0 0 10px 10px !important;
  box-sizing: border-box;
}

.frontsocials {
  grid-area: 4 / 1 / 5 / 5;
  text-align: center;
}

.frontsocials p {
  display: grid;
  grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%;
  grid-template-rows: auto;
  gap: 10px;
  width: calc(100% - 70px);
}

.frontbdays {
  grid-area: 3 / 5 / 5 / 7;
}

.frontevents {
  grid-area: 1 / 5 / 2 / 7;
}

.frontscreen {
  grid-area: 3 / 1 / 4 / 5;
}

.frontnews {
  grid-area: 1 / 1 / 2 / 5;
}

.frontart {
  grid-area: 5 / 1 / 6 / 7;
}

.frontisles {
  grid-area: 6 / 1 / 7 / 7;
}

div.villager-infobox {
    width: calc(50% - 20px);
}

.artwork-grid {
  gap: 10px;
  width: calc(100% - 40px);
}

.islands-grid {
  gap: 10px;
  width: calc(100% - 40px);
}

.frontpage .mw-editsection {
  position: relative;
}

.mw-content-ltr figure[typeof~="mw:File/Thumb"], 
.mw-content-ltr figure[typeof~="mw:File/Frame"] {
  margin: 0 0 1.5em 0;
}

.mw-body-content a > img, .mw-body-content .floatnone > img,
.mw-body-content span img, .mw-body-content .floatnone span img {
  /*max-width: calc(100% - 10px) !important;*/
  border-radius: 6px;
}

.mw-body-content .frontpage a > img, .mw-body-content .frontpage .floatnone > img {
  max-width: 100% !important;
}

.mw-body h1.firstHeading {
  border-radius: 0;
}

#bodyContent {
  padding: 0 20px 20px;
}

#mw-header-nav-hack {
    border-top: none;
    display: block;
    position: absolute;
    z-index: 198;
    background: #e5977f;
    background-image: none;
    width: 100%;
    background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-dbrown.png");
    font-family: "Poppins",sans-serif;
    font-weight: 400;
}

#mw-site-navigation h2, #mw-related-navigation h2 {
  font-family: "Poppins",sans-serif;
  font-weight: 400;
  color: #954a34;
}

#mw-site-navigation .sidebar-chunk, 
#mw-related-navigation .sidebar-chunk {
  background-image: none;
  background-color: transparent;
  margin: 0 0 20px;
  padding: 0 0 20px;
  box-shadow: none;
  display: inline-block;
}

#content-bottom-stuff {
   background-color: #9a916b;
   background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-sgyroids-l-mutedgreen.png");
   color: #5D3C34;
}

#mw-normal-catlinks a, #mw-normal-catlinks a:link, #mw-normal-catlinks a:active, #mw-normal-catlinks a:visited, #mw-normal-catlinks a.extiw:visited, #mw-normal-catlinks a.extiw:active:visited, #mw-normal-catlinks a.external:visited, #mw-normal-catlinks a.extiw, #mw-normal-catlinks a.extiw:active, #mw-normal-catlinks a.external {
   color: #5D3C34;
}

#mw-normal-catlinks a:hover {
   color: #5D3C34;
}

#mw-normal-catlinks a.new, #mw-normal-catlinks .new a, #mw-normal-catlinks a.new:visited, #mw-normal-catlinks .new a:visited {
   color: #8A3131;
}

#mw-normal-catlinks a.new:hover, #mw-normal-catlinks .new a:hover, #mw-normal-catlinks a.new:visited:hover, #mw-normal-catlinks .new a:visited:hover {
   color: #8A3131;
}

}

/* Min 820px */

@media screen and (max-width: 850px) {

#mw-content {
    padding: 0;
}

#mw-header-nav-hack {
    border-top: none;
    display: block;
    position: absolute;
    z-index: 198;
    background: #e5977f;
    background-image: none;
    width: 100%;
    background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-dbrown.png");
    font-family: "Poppins",sans-serif;
    font-weight: 400;
}

#mw-site-navigation h2, #mw-related-navigation h2 {
  font-family: "Poppins",sans-serif;
  font-weight: 400;
  color: #954a34;
}

#mw-site-navigation .sidebar-chunk, 
#mw-related-navigation .sidebar-chunk {
  background-image: none;
  background-color: transparent;
  margin: 0 0 20px;
  padding: 0 0 20px;
  box-shadow: none;
  display: inline-block;
}

#content-bottom-stuff {
   background-color: #9a916b;
   background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-sgyroids-l-mutedgreen.png");
   color: #5D3C34;
}

#mw-normal-catlinks a, #mw-normal-catlinks a:link, #mw-normal-catlinks a:active, #mw-normal-catlinks a:visited, #mw-normal-catlinks a.extiw:visited, #mw-normal-catlinks a.extiw:active:visited, #mw-normal-catlinks a.external:visited, #mw-normal-catlinks a.extiw, #mw-normal-catlinks a.extiw:active, #mw-normal-catlinks a.external {
   color: #5D3C34;
}

#mw-normal-catlinks a:hover {
   color: #5D3C34;
}

#mw-normal-catlinks a.new, #mw-normal-catlinks .new a, #mw-normal-catlinks a.new:visited, #mw-normal-catlinks .new a:visited {
   color: #8A3131;
}

#mw-normal-catlinks a.new:hover, #mw-normal-catlinks .new a:hover, #mw-normal-catlinks a.new:visited:hover, #mw-normal-catlinks .new a:visited:hover {
   color: #8A3131;
}

}

/* Min 810px */

@media (max-width: 819px) {

.frontpage {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    grid-template-rows: auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.fronthi {
  grid-area: 4 / 1 / 5 / 8;
}

.fronthi figure[typeof~="mw:File/Thumb"], .fronthi figure[typeof~="mw:File/Frame"] {
  width: 31% !important;
  float: right !important;
  margin: 0 0 10px 10px !important;
  box-sizing: border-box;
}

.frontsocials {
  grid-area: 2 / 5 / 3 / 8;
  text-align: center;
}

.frontsocials p {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: auto;
  gap: 10px;
  width: calc(100% - 30px);
}

.frontbdays { grid-area:  3 / 3 / 4 / 8; }
.frontevents { grid-area: 1 / 5 / 2 / 8; }
.frontscreen { grid-area: 3 / 1 / 4 / 3; }
.frontnews { grid-area: 1 / 1 / 3 / 5; }
.frontart { grid-area: 5 / 1 / 6 / 8; }
.frontisles { grid-area: 6 / 1 / 7 / 8; }

.frontbdays ol {
    -moz-column-count: 3;
    -moz-column-gap: 30px;
    -webkit-column-count: 3;
    -webkit-column-gap: 30px;
    column-count: 3;
    column-gap: 30px;
    font-size: 100%;
    margin: 0 0 0 25px;
}

div.villager-infobox {
    width: calc(50% - 20px);
}

.artwork-grid {
  gap: 10px;
  width: calc(100% - 40px);
}

.islands-grid {
  gap: 10px;
  width: calc(100% - 40px);
}

.frontpage .mw-editsection {
  position: relative;
}

.mw-content-ltr figure[typeof~="mw:File/Thumb"], 
.mw-content-ltr figure[typeof~="mw:File/Frame"] {
  margin: 0 0 1.5em 0;
}

.mw-body-content a > img, .mw-body-content .floatnone > img,
.mw-body-content span img, .mw-body-content .floatnone span img {
  /*max-width: calc(100% - 10px) !important;1.5em */
  border-radius: 6px;
}

.mw-body-content .frontpage a > img, .mw-body-content .frontpage .floatnone > img {
  max-width: 100% !important;
}

.mw-body h1.firstHeading {
  border-radius: 0;
}

#bodyContent {
  padding: 0 20px 20px;
}

#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk {
  background: none;
  margin: 0;
  padding: 0;
}

#mw-header-nav-hack {
    border-top: none;
    display: block;
    position: absolute;
    z-index: 198;
    background: #e5977f;
    background-image: none;
    width: 100%;
    background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-dbrown.png");
    font-family: "Poppins",sans-serif;
    font-weight: 400;
}

#mw-site-navigation h2, #mw-related-navigation h2 {
  font-family: "Poppins",sans-serif;
  font-weight: 400;
  color: #954a34;
}

#mw-site-navigation .sidebar-chunk, 
#mw-related-navigation .sidebar-chunk {
  background-image: none;
  background-color: transparent;
  margin: 0 0 20px;
  padding: 0 0 20px;
  box-shadow: none;
  display: inline-block;
}

#content-bottom-stuff {
   background-color: #9a916b;
   background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-sgyroids-l-mutedgreen.png");
   color: #5D3C34;
}

#mw-normal-catlinks a, #mw-normal-catlinks a:link, #mw-normal-catlinks a:active, #mw-normal-catlinks a:visited, #mw-normal-catlinks a.extiw:visited, #mw-normal-catlinks a.extiw:active:visited, #mw-normal-catlinks a.external:visited, #mw-normal-catlinks a.extiw, #mw-normal-catlinks a.extiw:active, #mw-normal-catlinks a.external {
   color: #5D3C34;
}

#mw-normal-catlinks a:hover {
   color: #5D3C34;
}

#mw-normal-catlinks a.new, #mw-normal-catlinks .new a, #mw-normal-catlinks a.new:visited, #mw-normal-catlinks .new a:visited {
   color: #8A3131;
}

#mw-normal-catlinks a.new:hover, #mw-normal-catlinks .new a:hover, #mw-normal-catlinks a.new:visited:hover, #mw-normal-catlinks .new a:visited:hover {
   color: #8A3131;
}

}

/* Min 800px */

@media (max-width: 809px) {

.frontpage {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    grid-template-rows: auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.fronthi {
  grid-area: 2 / 1 / 3 / 7;
}

.fronthi figure[typeof~="mw:File/Thumb"], .fronthi figure[typeof~="mw:File/Frame"] {
  width: 31% !important;
  float: right !important;
  margin: 0 0 10px 10px !important;
  box-sizing: border-box;
}

.frontsocials {
  grid-area: 4 / 1 / 5 / 5;
  text-align: center;
}

.frontsocials p {
  display: grid;
  grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%;
  grid-template-rows: auto;
  gap: 10px;
  width: calc(100% - 70px);
}

.frontbdays { grid-area: 3 / 5 / 5 / 7; }
.frontevents { grid-area: 1 / 5 / 2 / 7; }
.frontscreen { grid-area: 3 / 1 / 4 / 5; }
.frontnews { grid-area: 1 / 1 / 2 / 5; }
.frontart { grid-area: 5 / 1 / 6 / 7; }
.frontisles { grid-area: 6 / 1 / 7 / 7; }

div.villager-infobox {
    width: calc(50% - 20px);
}

.artwork-grid {
  gap: 10px;
  width: calc(100% - 40px);
}

.islands-grid {
  gap: 10px;
  width: calc(100% - 40px);
}

.frontpage .mw-editsection {
  position: relative;
}

.mw-content-ltr figure[typeof~="mw:File/Thumb"], 
.mw-content-ltr figure[typeof~="mw:File/Frame"] {
  margin: 0 0 1.5em 0;
}

.mw-body-content a > img, .mw-body-content .floatnone > img,
.mw-body-content span img, .mw-body-content .floatnone span img {
  /*max-width: calc(100% - 10px) !important; */
  border-radius: 6px;
}

.mw-body-content .frontpage a > img, .mw-body-content .frontpage .floatnone > img {
  max-width: 100% !important;
}

.mw-body h1.firstHeading {
  border-radius: 0;
}

#bodyContent {
  padding: 0 20px 20px;
}

#mw-header-nav-hack {
    border-top: none;
    display: block;
    position: absolute;
    z-index: 198;
    background: #e5977f;
    background-image: none;
    width: 100%;
    background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-dbrown.png");
    font-family: "Poppins",sans-serif;
    font-weight: 400;
}

#mw-site-navigation h2, #mw-related-navigation h2 {
  font-family: "Poppins",sans-serif;
  font-weight: 400;
  color: #954a34;
}

#mw-site-navigation .sidebar-chunk, 
#mw-related-navigation .sidebar-chunk {
  background-image: none;
  background-color: transparent;
  margin: 0 0 20px;
  padding: 0 0 20px;
  box-shadow: none;
  display: inline-block;
}

#content-bottom-stuff {
   background-color: #9a916b;
   background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-sgyroids-l-mutedgreen.png");
   color: #5D3C34;
}

#mw-normal-catlinks a, #mw-normal-catlinks a:link, #mw-normal-catlinks a:active, #mw-normal-catlinks a:visited, #mw-normal-catlinks a.extiw:visited, #mw-normal-catlinks a.extiw:active:visited, #mw-normal-catlinks a.external:visited, #mw-normal-catlinks a.extiw, #mw-normal-catlinks a.extiw:active, #mw-normal-catlinks a.external {
   color: #5D3C34;
}

#mw-normal-catlinks a:hover {
   color: #5D3C34;
}

#mw-normal-catlinks a.new, #mw-normal-catlinks .new a, #mw-normal-catlinks a.new:visited, #mw-normal-catlinks .new a:visited {
   color: #8A3131;
}

#mw-normal-catlinks a.new:hover, #mw-normal-catlinks .new a:hover, #mw-normal-catlinks a.new:visited:hover, #mw-normal-catlinks .new a:visited:hover {
   color: #8A3131;
}

}

/* Min 720px */

@media (max-width: 799px) {

.frontpage {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    grid-template-rows: auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.fronthi { grid-area: 2 / 1 / 3 / 7; }
.frontbdays { grid-area: 3 / 4 / 5 / 7; }
.frontevents { grid-area: 1 / 4 / 2 / 7; }
.frontscreen { grid-area: 3 / 1 / 4 / 4; }
.frontnews { grid-area: 1 / 1 / 2 / 4; }
.frontart { grid-area: 5 / 1 / 6 / 7; }
.frontisles { grid-area: 6 / 1 / 7 / 7; } 

.fronthi figure[typeof~="mw:File/Thumb"], .fronthi figure[typeof~="mw:File/Frame"] {
  width: 31% !important;
  float: right !important;
  margin: 0 0 10px 10px !important;
  box-sizing: border-box;
}

.frontsocials {
  grid-area: 4 / 1 / 5 / 4;    
  text-align: center;
}

.frontsocials p {
    display: grid;
    grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%;
    grid-template-rows: auto;
    gap: 10px;
    width: calc(100% - 70px);
}

.mw-body-content .frontsocials a > img, .mw-body-content .frontsocials .floatnone > img {
  min-width: 100% !important;
  max-width: 100% !important;
}

.frontbdays ol {
  -moz-column-count: 2;
  -moz-column-gap: 20px;
  -webkit-column-count: 2;
  -webkit-column-gap: 20px;
  column-count: 2;
  column-gap: 5px;
}

div.villager-infobox {
    width: calc(50% - 20px);
}

.artwork-grid {
  gap: 10px;
  width: calc(100% - 40px);
}

.islands-grid {
  gap: 10px;
  width: calc(100% - 40px);
}

.frontpage .mw-editsection {
  position: relative;
}

.mw-content-ltr figure[typeof~="mw:File/Thumb"], 
.mw-content-ltr figure[typeof~="mw:File/Frame"] {
  margin: 0 0 1.5em 0;
}

.mw-body-content a > img, .mw-body-content .floatnone > img,
.mw-body-content span img, .mw-body-content .floatnone span img {
  /*max-width: calc(100% - 10px) !important; */
  border-radius: 6px;
}

.mw-body-content .frontpage a > img, .mw-body-content .frontpage .floatnone > img {
  max-width: 100% !important;
}

.mw-body h1.firstHeading {
  border-radius: 0;
}

#bodyContent {
  padding: 0 20px 20px;
}

#mw-header-nav-hack {
    border-top: none;
    display: block;
    position: absolute;
    z-index: 198;
    background: #e5977f;
    background-image: none;
    width: 100%;
    background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-dbrown.png");
    font-family: "Poppins",sans-serif;
    font-weight: 400;
}

#mw-site-navigation h2, #mw-related-navigation h2 {
  font-family: "Poppins",sans-serif;
  font-weight: 400;
  color: #954a34;
}

#mw-site-navigation .sidebar-chunk, 
#mw-related-navigation .sidebar-chunk {
  background-image: none;
  background-color: transparent;
  margin: 0 0 20px;
  padding: 0 0 20px;
  box-shadow: none;
  display: inline-block;
}

#content-bottom-stuff {
   background-color: #9a916b;
   background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-sgyroids-l-mutedgreen.png");
   color: #5D3C34;
}

#mw-normal-catlinks a, #mw-normal-catlinks a:link, #mw-normal-catlinks a:active, #mw-normal-catlinks a:visited, #mw-normal-catlinks a.extiw:visited, #mw-normal-catlinks a.extiw:active:visited, #mw-normal-catlinks a.external:visited, #mw-normal-catlinks a.extiw, #mw-normal-catlinks a.extiw:active, #mw-normal-catlinks a.external {
   color: #5D3C34;
}

#mw-normal-catlinks a:hover {
   color: #5D3C34;
}

#mw-normal-catlinks a.new, #mw-normal-catlinks .new a, #mw-normal-catlinks a.new:visited, #mw-normal-catlinks .new a:visited {
   color: #8A3131;
}

#mw-normal-catlinks a.new:hover, #mw-normal-catlinks .new a:hover, #mw-normal-catlinks a.new:visited:hover, #mw-normal-catlinks .new a:visited:hover {
   color: #8A3131;
}

}

/* Min 640px */

@media (max-width: 719px) {

.frontpage {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    grid-template-rows: auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.fronthi {
  grid-area: 3 / 1 / 4 / 7;
}

.fronthi figure[typeof~="mw:File/Thumb"], .fronthi figure[typeof~="mw:File/Frame"] {
  width: 31% !important;
  float: right !important;
  margin: 0 0 10px 10px !important;
  box-sizing: border-box;
}

.frontsocials {
  grid-area: 4 / 5 / 5 / 7;
  text-align: center;
}

.frontsocials p {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: auto;
  gap: 10px;
  width: calc(100% - 30px);
}

.mw-body-content .frontsocials a > img, .mw-body-content .frontsocials .floatnone > img {
  min-width: 100% !important;
  max-width: 100% !important;
}

.frontbdays { grid-area: 2 / 1 / 3 / 7; }
.frontscreen { grid-area: 4 / 1 / 5 / 5; }
.frontart { grid-area: 5 / 1 / 6 / 7; }
.frontisles { grid-area: 6 / 1 / 7 / 7; }
.frontnews { grid-area: 1 / 1 / 2 / 5; }
.frontevents { grid-area: 1 / 5 / 2 / 7; } 

.frontbdays ol {
  -moz-column-count: 3;
  -moz-column-gap: 30px;
  -webkit-column-count: 3;
  -webkit-column-gap: 30px;
  column-count: 3;
  column-gap: 30px;
  font-size: 100%;
  margin: 0 0 0 25px;
}

div.villager-infobox {
    width: calc(50% - 20px);
}

.artwork-grid {
  gap: 10px;
  grid-template-columns: 33.3% 33.3% 33.3%;
  width: calc(100% - 20px);
}

.islands-grid {
  gap: 10px;
  grid-template-columns: 33.3% 33.3% 33.3%;
  width: calc(100% - 20px);
}

.frontpage .mw-editsection {
  position: relative;
}

.mw-content-ltr figure[typeof~="mw:File/Thumb"], 
.mw-content-ltr figure[typeof~="mw:File/Frame"] {
  margin: 0 0 1.5em 0;
}

.mw-body-content a > img, .mw-body-content .floatnone > img,
.mw-body-content span img, .mw-body-content .floatnone span img {
  /*max-width: calc(100% - 10px) !important; */
  border-radius: 6px;
}

.mw-body-content .frontpage a > img, .mw-body-content .frontpage .floatnone > img {
  max-width: 100% !important;
}

.mw-body h1.firstHeading {
  border-radius: 0;
}

#bodyContent {
  padding: 0 20px 20px;
}

#mw-header-nav-hack {
    border-top: none;
    display: block;
    position: absolute;
    z-index: 198;
    background: #e5977f;
    background-image: none;
    width: 100%;
    background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-dbrown.png");
    font-family: "Poppins",sans-serif;
    font-weight: 400;
}

#mw-site-navigation h2, #mw-related-navigation h2 {
  font-family: "Poppins",sans-serif;
  font-weight: 400;
  color: #954a34;
}

#mw-site-navigation .sidebar-chunk, 
#mw-related-navigation .sidebar-chunk {
  background-image: none;
  background-color: transparent;
  margin: 0 0 20px;
  padding: 0 0 20px;
  box-shadow: none;
  display: inline-block;
}

#content-bottom-stuff {
   background-color: #9a916b;
   background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-sgyroids-l-mutedgreen.png");
   color: #5D3C34;
}

#mw-normal-catlinks a, #mw-normal-catlinks a:link, #mw-normal-catlinks a:active, #mw-normal-catlinks a:visited, #mw-normal-catlinks a.extiw:visited, #mw-normal-catlinks a.extiw:active:visited, #mw-normal-catlinks a.external:visited, #mw-normal-catlinks a.extiw, #mw-normal-catlinks a.extiw:active, #mw-normal-catlinks a.external {
   color: #5D3C34;
}

#mw-normal-catlinks a:hover {
   color: #5D3C34;
}

#mw-normal-catlinks a.new, #mw-normal-catlinks .new a, #mw-normal-catlinks a.new:visited, #mw-normal-catlinks .new a:visited {
   color: #8A3131;
}

#mw-normal-catlinks a.new:hover, #mw-normal-catlinks .new a:hover, #mw-normal-catlinks a.new:visited:hover, #mw-normal-catlinks .new a:visited:hover {
   color: #8A3131;
}

}

/* Mobile max 640px */

@media only screen and (max-width: 639px) {

.frontpage {
    display: grid;
    grid-template-columns: repeat(7, 1fr); 
    grid-template-rows: auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.fronthi { grid-area: 3 / 1 / 4 / 8; }
.frontsocials { grid-area: 4 / 1 / 5 / 8; }
.frontnews { grid-area: 1 / 1 / 2 / 8; }
.frontbdays { grid-area: 2 / 5 / 3 / 8; }
.frontevents { grid-area: 2 / 1 / 3 / 5; }
.frontscreen { grid-area: 5 / 1 / 6 / 8; }
.frontart { grid-area: 6 / 1 / 7 / 8; }
.frontisles { grid-area: 7 / 1 / 8 / 8; } 

.frontsocials p {
    display: grid;
    grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%;
    grid-template-rows: auto;
    gap: 10px;
    width: calc(100% - 70px);
}

.frontbdays ol {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 30px;
    font-size: 90%;
    margin: 0 0 0 25px;
}

div.villager-infobox {
    width: calc(100% - 20px);
}

.artwork-grid {
  grid-template-columns: 50% 50%;
  gap: 10px;
  width: calc(100% - 10px);
}

.islands-grid {
  grid-template-columns: 50% 50%;
  gap: 10px;
  width: calc(100% - 10px);
}

.frontpage .mw-editsection {
  position: relative;
}

.mw-content-ltr figure[typeof~="mw:File/Thumb"], 
.mw-content-ltr figure[typeof~="mw:File/Frame"] {
  margin: 0 0 1.5em 0;
}

.mw-body-content a > img, .mw-body-content .floatnone > img,
.mw-body-content span img, .mw-body-content .floatnone span img {
  /*max-width: calc(100% - 10px) !important; */
  border-radius: 6px;
}

.mw-body-content .frontpage a > img, .mw-body-content .frontpage .floatnone > img {
  max-width: 100% !important;
}

.mw-body h1.firstHeading {
  border-radius: 0;
}

#bodyContent {
  padding: 0 20px 20px;
}

#mw-header-nav-hack {
    border-top: none;
    display: block;
    position: absolute;
    z-index: 198;
    background: #e5977f;
    background-image: none;
    width: 100%;
    background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-dbrown.png");
    font-family: "Poppins",sans-serif;
    font-weight: 400;
}

#mw-site-navigation h2, #mw-related-navigation h2 {
  font-family: "Poppins",sans-serif;
  font-weight: 400;
  color: #954a34;
}

#mw-site-navigation .sidebar-chunk, 
#mw-related-navigation .sidebar-chunk {
  background-image: none;
  background-color: transparent;
  margin: 0 0 20px;
  padding: 0 0 20px;
  box-shadow: none;
  display: inline-block;
}

#content-bottom-stuff {
   background-color: #9a916b;
   background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-sgyroids-l-mutedgreen.png");
   color: #5D3C34;
}

#mw-normal-catlinks a, #mw-normal-catlinks a:link, #mw-normal-catlinks a:active, #mw-normal-catlinks a:visited, #mw-normal-catlinks a.extiw:visited, #mw-normal-catlinks a.extiw:active:visited, #mw-normal-catlinks a.external:visited, #mw-normal-catlinks a.extiw, #mw-normal-catlinks a.extiw:active, #mw-normal-catlinks a.external {
   color: #5D3C34;
}

#mw-normal-catlinks a:hover {
   color: #5D3C34;
}

#mw-normal-catlinks a.new, #mw-normal-catlinks .new a, #mw-normal-catlinks a.new:visited, #mw-normal-catlinks .new a:visited {
   color: #8A3131;
}

#mw-normal-catlinks a.new:hover, #mw-normal-catlinks .new a:hover, #mw-normal-catlinks a.new:visited:hover, #mw-normal-catlinks .new a:visited:hover {
   color: #8A3131;
}

}

/* Mobile */

@media only screen and (max-width: 499px) {

#mw-content #bodyContent {
    padding: 0;
}

.frontpage {
    display: grid;
    grid-template-columns: auto; 
    grid-template-rows: auto;
    grid-column-gap: 0;
    grid-row-gap: 0;
}

.fronthi{ grid-area: 4 / 1 / 5 / 8; }
.frontsocials{ grid-area: 5 / 1 / 6 / 8; }
.frontbdays { grid-area: 3 / 1 / 4 / 8; }
.frontevents { grid-area: 2 / 1 / 3 / 8; }
.frontscreen { grid-area: 6 / 1 / 7 / 8; }
.frontnews { grid-area: 1 / 1 / 2 / 8; }
.frontart { grid-area: 7 / 1 / 8 / 8; }
.frontisles  { grid-area: 8 / 1 / 9 / 8; } 

.frontsocials p {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: auto;
    gap: 10px;
    width: calc(100% - 30px);
}

.frontbdays ol {
  -moz-column-count: 2;
  -moz-column-gap: 20px;
  -webkit-column-count: 2;
  -webkit-column-gap: 20px;
  column-count: 2;
  column-gap: 30px;
  font-size: 100%;
  margin: 0 0 0 25px;
}

.frontpage > div, .frontpage .frontisles .islands-grid > div {
  border-radius: 0;
  box-shadow: none;
  padding: 10px;
  border: none;
}

.fronthi figure[typeof~="mw:File/Thumb"], .fronthi figure[typeof~="mw:File/Frame"] {
  width: 100% !important;
  float: none !IMPORTANT;
  margin: 0 0 10px 0 !important;
  box-sizing: border-box;
}

figure[typeof~="mw:File/Thumb"] > :not(figcaption) .mw-file-element, figure[typeof~="mw:File/Frame"] > :not(figcaption) .mw-file-element {
  max-width: calc(100% - 20px) !important;
  margin: 10px 0;
  border: none;
  min-width: calc(100% - 40px);
}

figure[typeof~="mw:File/Thumb"] .mw-file-description, figure[typeof~="mw:File/Frame"] .mw-file-description {
  margin: 0;
}

div.villager-infobox {
    width: calc(100% - 20px);
}

.artwork-grid {
  grid-template-columns: 50% 50%;
  gap: 10px;
  width: calc(100% - 10px);
}

.islands-grid {
  grid-template-columns: 50% 50%;
  gap: 10px;
  width: calc(100% - 10px);
}

.frontpage .mw-editsection {
  position: relative;
}

.mw-content-ltr figure[typeof~="mw:File/Thumb"], 
.mw-content-ltr figure[typeof~="mw:File/Frame"] {
  margin: 0 0 1.5em 0;
}

.mw-body-content a > img, .mw-body-content .floatnone > img,
.mw-body-content span img, .mw-body-content .floatnone span img {
  /*max-width: calc(100% - 10px) !important; */
  border-radius: 6px;
}

.mw-body-content .frontpage a > img, .mw-body-content .frontpage .floatnone > img {
  max-width: 100% !important;
}

.mw-body h1.firstHeading {
  border-radius: 0;
}

#bodyContent {
  padding: 0 20px;
}

#mw-header-nav-hack {
    border-top: none;
    display: block;
    position: absolute;
    z-index: 198;
    background: #e5977f;
    background-image: none;
    width: 100%;
    background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-dbrown.png");
    font-family: "Poppins",sans-serif;
    font-weight: 400;
}

#mw-site-navigation h2, #mw-related-navigation h2 {
  font-family: "Poppins",sans-serif;
  font-weight: 400;
  color: #954a34;
}

#mw-site-navigation .sidebar-chunk, 
#mw-related-navigation .sidebar-chunk {
  background-image: none;
  background-color: transparent;
  margin: 0 0 20px;
  padding: 0 0 20px;
  box-shadow: none;
  display: inline-block;
}

#content-bottom-stuff {
   background-color: #9a916b;
   background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-sgyroids-l-mutedgreen.png");
   color: #5D3C34;
}

#mw-normal-catlinks a, #mw-normal-catlinks a:link, #mw-normal-catlinks a:active, #mw-normal-catlinks a:visited, #mw-normal-catlinks a.extiw:visited, #mw-normal-catlinks a.extiw:active:visited, #mw-normal-catlinks a.external:visited, #mw-normal-catlinks a.extiw, #mw-normal-catlinks a.extiw:active, #mw-normal-catlinks a.external {
   color: #5D3C34;
}

#mw-normal-catlinks a:hover {
   color: #5D3C34;
}

#mw-normal-catlinks a.new, #mw-normal-catlinks .new a, #mw-normal-catlinks a.new:visited, #mw-normal-catlinks .new a:visited {
   color: #8A3131;
}

#mw-normal-catlinks a.new:hover, #mw-normal-catlinks .new a:hover, #mw-normal-catlinks a.new:visited:hover, #mw-normal-catlinks .new a:visited:hover {
   color: #8A3131;
}

}

.merch {
  text-align: center;
}

.merch span {
  border-radius: 6px;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.1);
  margin: 0 10px 10px 0;
  background-color: white;
  display: inline-block;
}

.merch span img {
  padding: 15px;
}

.navbox {
  background-color: #f7eec6;
  padding: 10px;
  margin: 0 0 10px;
  border-radius: 6px;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.1);
  text-align: center;
  background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-sakura-l-vlpink.png");
  clear: both;
}

.navbox .navboxheader {
  font-family: "ACWebFont","Mountains of Christmas",Verdana,Helvetica,sans-serif;
  font-weight: 400;
  font-style: normal;
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-mcm-sparkles-l-red.png);
  border-radius: 6px;
  background-color: #9D4A3C;
  padding: 10px;
  margin: 0 auto 20px;
  color: #F9F3E8;
  border: none;
  letter-spacing: 0.05em;
  font-size: 1.4em;
  clear: both;
  text-align: center;
  line-height: 1.125;
}

.villager-infobox {
  float: right;
  background-color: #4C312C;
  padding: 10px;
  margin: 0 0 10px;
  background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-dots-brown.png");
  border-radius: 6px;
  width: calc(40% - 20px);
  box-shadow: 3px 3px 0 0 rgba(0,0,0,0.05);
} 

.infobox-section {
  background-color: #f8e7cf;
  padding: 2px 5px;
  border-radius: 6px;
  background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-sakura-l-vlpink.png");
  margin: 0 0 5px;
  display: block;
}

.infobox-section:last-child {
  margin: 0;
}

.infobox-section p {
  padding: 0;
  margin: 0;
}

.infobox-name {
  font-size: 20pt;
  background-color: #f6e3c9;
  padding: 2px 5px;
  border-radius: 6px;
  background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-mcm-sparkles-l-pink.png");
  margin: 0 0 5px;
  font-family: "ACWebFont","Mountains of Christmas",Verdana,Helvetica,sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  color: #9F4F3C;
  letter-spacing: 0.05em;
}

.infobox-pic {
  background-position: 0 0;
  padding: 10px;
  text-align: center;
}

.infobox-pic img {
  max-width: 100%;
  height: auto;
}

.infobox-species {
  background-position: 45%;
}

.infobox-personality {
  background-position: 80%;
}

.infobox-gender {
  background-position: 20%;
}

.infobox-birthday {
  background-position: 50%;
}

.infobox-sign {
  background-position: 15%;
}

.infobox-favsaying {
  background-position: 70%;
}

.infobox-catchphrase {
  background-position: 10%;
}

.infobox-languages {
  display: grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
  grid-template-rows: auto;
  gap: 0 10px;
  width: calc(100% - 10px);
  background-position: 60%;
}

/* Villager NH Infobox */

.villager-infobox-nh {
  background-color: #4C312C;
  background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-dots-brown.png");
  border-radius: 6px;
  box-shadow: 3px 3px 0 0 rgba(0,0,0,0.05);
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto;
  gap: 0;
  width: 100%;
  padding: 5px;
} 

.villager-infobox-nh-left {
  padding: 5px;
}

.villager-infobox-nh-left .mw-file-description {
  padding: 10px;
}

.villager-infobox-nh-left .mw-file-element {
  margin: 0 auto;
  display: block;
}

.villager-infobox-nh-right {
  padding: 5px;
}

.mw-body-content .villager-infobox-nh-right a > img, 
.mw-body-content .villager-infobox-nh-right .floatnone > img,
.mw-body-content .villager-infobox-nh-right span img, 
.mw-body-content .villager-infobox-nh-right .floatnone span img {
  border-radius: 0;
}

.villager-nh-section {
  background-color: none;
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-ac-triangles-mint.png);
  padding: 2px 5px;
  border-radius: 6px;
  margin: 0 0 5px;
  display: block;
}

.villager-nh-icon,
.villager-nh-photo, 
.villager-nh-render {
  margin: 0 0 10px;
}

.villager-nh-photo .mw-file-element {
  margin: 0 auto;
  display: block;
  box-shadow: 4px 4px 0 0 rgba(0,0,0,0.05);
}

.villager-nh-wear .villager-nh-section,
.villager-nh-favourites .villager-nh-section,
.villager-nh-handheld .villager-nh-section,
.villager-nh-houseinterior .villager-nh-section,
.villager-nh-houseexterior .villager-nh-section {
  background-color: #ffffff69;
  background-image: none;
  padding: 2px 5px;
  border-radius: 6px;
  margin: 0 0 5px;
  display: block;
}

.villager-nh-section:last-child {
  margin: 0;
}

.villager-nh-section p {
  padding: 0;
  margin: 0;
}

.villager-nh-wear {
  background-color: none;
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-ac-triangles-mint.png);
  padding: 2px 5px;
  border-radius: 6px;
  margin: 0 0 10px;
  display: block;
}

.villager-nh-favourites {
  background-color: none;
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-ac-triangles-mint.png);
  padding: 2px 5px;
  border-radius: 6px;
  margin: 0 0 10px;
  display: block;
}

.villager-nh-handheld {
  background-color: none;
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-ac-triangles-mint.png);
  padding: 2px 5px;
  border-radius: 6px;
  margin: 0 0 10px;
  display: block;
}

.villager-nh-houseinterior {
  background-color: none;
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-ac-triangles-mint.png);
  padding: 2px 5px;
  border-radius: 6px;
  margin: 0 0 10px;
  display: block;
}

.villager-nh-houseexterior {
  background-color: none;
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-ac-triangles-mint.png);
  padding: 2px 5px;
  border-radius: 6px;
  margin: 0 0 10px;
  display: block;
}

.villager-nh-section h3 {
  margin: 5px 5px 10px;
  text-align: left;
}

.villager-nh-handheld .infobox-name {
  font-size: 20pt;
  background-color: #f6e3c9;
  padding: 2px 5px;
  border-radius: 6px;
  background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-mcm-sparkles-l-pink.png");
  margin: 0 0 5px;
  font-family: "ACWebFont","Mountains of Christmas",Verdana,Helvetica,sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  color: #9F4F3C;
  letter-spacing: 0.05em;
}

.villager-nh-handheld .infobox-pic {
  background-position: 0 0;
  padding: 10px;
  text-align: center;
}

.villager-nh-handheld .infobox-pic img {
  max-width: 100%;
  height: auto;
}

.villager-nh-handheld .infobox-languages {
  display: grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
  grid-template-rows: auto;
  gap: 0 10px;
  width: calc(100% - 10px);
  background-position: 60%;
}



.mw-content-ltr figure[typeof~="mw:File/Thumb"], 
.mw-content-ltr figure[typeof~="mw:File/Frame"] {
  margin: 0 0 1.5em 0;
}

.mw-body-content a > img, .mw-body-content .floatnone > img,
.mw-body-content span img, .mw-body-content .floatnone span img {
  /*max-width: calc(100% - 10px) !important; */
  border-radius: 6px;
  height: auto !important;
  max-width: 100% !important;
  width: auto;
}

.mw-content-ltr figure[typeof~="mw:File/Thumb"] > figcaption, .mw-content-ltr figure[typeof~="mw:File/Frame"] > figcaption {
  text-align: center;
  color: #AE422882;
}

figure[typeof~="mw:File/Thumb"] > :not(figcaption) .mw-file-element, 
figure[typeof~="mw:File/Frame"] > :not(figcaption) .mw-file-element {
  max-width: calc(100% - 40px) !important;
  margin: 10px 0;
  border: none;
}

/* Fix figure polaroid */

figure {
  display: flex;
  flex-wrap: wrap;
}

figure[typeof~="mw:File/Thumb"], figure[typeof~="mw:File/Frame"] {
  display: flex;
  flex-wrap: wrap;
}

figcaption {
  width: min-content;
  flex: 1;
}

figure[typeof~="mw:File/Thumb"] .mw-file-description, 
figure[typeof~="mw:File/Frame"] .mw-file-description {
  flex: 1 0 100%;
  margin: 0 -10px;
}

figure[typeof~="mw:File/Frame"] > figcaption:empty {
  padding-bottom: 0;
}

.social-links p {
  margin: 0;
  padding: 0;
}

.social-links a {
  padding: 5px;
  display: inline-block;
}

.social-links span {
  display: inline-block;
}

.mw-body-content .social-links a > img, .mw-body-content .social-links .floatnone > img {
  max-width: 100% !important;
}


.mw-content-ltr figure[typeof~="mw:File/Thumb"] > .mw-file-description::after, 
.mw-content-ltr figure[typeof~="mw:File/Thumb"] > .mw-file-magnify::after {
  display: none;
background-color: white;
}

figure[typeof~="mw:File/Thumb"] > figcaption::before {
  display: none;
}

figure[typeof~="mw:File/Thumb"].mw-halign-left span,
figure[typeof~="mw:File/Frame"].mw-halign-left span,
figure[typeof~="mw:File/Thumb"].mw-halign-center span,
figure[typeof~="mw:File/Frame"].mw-halign-center span,
figure[typeof~="mw:File/Thumb"].mw-halign-right span,
figure[typeof~="mw:File/Frame"].mw-halign-right span {
  flex: 1 0 100%;
  margin: 0 -10px;
}

.mw-body h2:nth-of-type(1), .mw-body h2:nth-of-type(21) {
  background-position: 0 0;
}

.mw-body h2:nth-of-type(2), .mw-body h2:nth-of-type(22) {
  background-position: 30px 70px;
}

.mw-body h2:nth-of-type(3), .mw-body h2:nth-of-type(23) {
  background-position: 10px 140px;
}

.mw-body h2:nth-of-type(4), .mw-body h2:nth-of-type(24) {
  background-position: 5px 45px;
}

.mw-body h2:nth-of-type(5), .mw-body h2:nth-of-type(25) {
  background-position: 70px 10px;
}

.mw-body h2:nth-of-type(6), .mw-body h2:nth-of-type(26) {
  background-position: 0 50px;
}

.mw-body h2:nth-of-type(7), .mw-body h2:nth-of-type(27) {
  background-position: 10px 100px;
}

.mw-body h2:nth-of-type(8), .mw-body h2:nth-of-type(28) {
  background-position: 90px 200px;
}

.mw-body h2:nth-of-type(9), .mw-body h2:nth-of-type(29) {
  background-position: 45px 35px;
}

.mw-body h2:nth-of-type(10), .mw-body h2:nth-of-type(30) {
  background-position: 120px 140px;
}

.mw-body h2:nth-of-type(11), .mw-body h2:nth-of-type(31) {
  background-position: 200px 90px;
}

.mw-body h2:nth-of-type(12), .mw-body h2:nth-of-type(32) {
  background-position: 70px 30px;
}

.mw-body h2:nth-of-type(13), .mw-body h2:nth-of-type(33) {
  background-position: 140px 10px;
}

.mw-body h2:nth-of-type(14), .mw-body h2:nth-of-type(34) {
  background-position: 45px 5px;
}

.mw-body h2:nth-of-type(15), .mw-body h2:nth-of-type(35) {
  background-position: 10px 70px;
}

.mw-body h2:nth-of-type(16), .mw-body h2:nth-of-type(36) {
  background-position: 50px 0;
}

.mw-body h2:nth-of-type(17), .mw-body h2:nth-of-type(37) {
  background-position: 100px 10px;
}

.mw-body h2:nth-of-type(18), .mw-body h2:nth-of-type(38) {
  background-position: 200px 90px;
}

.mw-body h2:nth-of-type(19), .mw-body h2:nth-of-type(39) {
  background-position: 35px 45px;
}

.mw-body h2:nth-of-type(20), .mw-body h2:nth-of-type(40) {
  background-position: 140px 120px;
}

.mw-body .snw h2 {
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-wood-snw.png);
  background-color: #ECD5AC;
  color: #F9F3E8;
  text-shadow: 2px 2px 0 rgba(81, 45, 12, 0.64);
}

.mw-body .sakurabay h2 {
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-wood-sakurabay.png);
  background-color: #ECD5AC;
  color: #F9F3E8;
  text-shadow: 2px 2px 0 rgba(81, 45, 12, 0.64);
}

.mw-body .miffyisle h2 {
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-miffy-isle-plaid-small2.png);
  background-color: #D6AB8A;
  color: #F9F3E8;
  text-shadow: 2px 2px 0 rgba(120, 69, 22, 0.33);
  background-position: center center !important;
}

.mw-body .maplegrove h2 {
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-wood-maplegrove.png);
  background-color: #D6AB8A;
  color: #F9F3E8;
  text-shadow: 2px 2px 0 rgba(120, 69, 22, 0.33);
}

.mw-body .stardust h2 {
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-wood-stardust.png);
  background-color: #D6AB8A;
  color: #E7A854;
  text-shadow: 2px 2px 0 rgba(1, 0, 0, 0.63);
}

.mw-body .cosycove h2 {
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-wood-cosycove.png);
  background-color: #D6AB8A;
  color: #F9F3E8;
  text-shadow: 2px 2px 0 rgb(13, 56, 46);
}

.mw-body .belmont h2 {
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-wood-belmont.png);
  background-color: #D6AB8A;
  color: #F9F3E8;
  text-shadow: 2px 2px 0 rgba(54, 29, 7, 0.82);
}

.mw-body .starlevilandstar h2 {
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-wood-leviland.png);
  background-color: #ECD5AC;
  color: #F9F3E8;
  text-shadow: 2px 2px 0 rgba(81, 45, 12, 0.64);
}

.mw-body .leviland h2 {
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-wood-leviland.png);
  background-color: #ECD5AC;
  color: #F9F3E8;
  text-shadow: 2px 2px 0 rgba(81, 45, 12, 0.64);
}

.mw-body .quinnland h2 {
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-wood-quinnland.png);
  background-color: #ECD5AC;
  color: #F9F3E8;
  text-shadow: 2px 2px 0 rgba(189, 116, 48, 0.52);
}

.mw-body .heatherbay h2 {
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-wood-heatherbay.png);
  background-color: #ECD5AC;
  color: #F9F3E8;
  text-shadow: 2px 2px 0 rgba(189, 116, 48, 0.52);
}

.toc {
  line-height: 1;
  border-radius: 6px;
  border: none;
  background-color: #ffffffbf;
  box-shadow: 2px 2px 0 4px rgba(0,0,0,0.05);
}

.mw-body .toctitle {
  border-bottom: dotted 1px #5d3c34;
  text-align: unset;
}

#mw-toc-heading {
  background-image: none;
  background-color: transparent;
  color: #5D3C34;
  font-weight: 700;
  text-shadow: none;
}

.toctogglelabel {
   color: #5d3c34;
}

.cyruswrapper .cyrusimg {
  float: left;
  width: calc(30% - 10px);
  margin-right: 10px;
}

.cyruswrapper .cyrustext {
  width: 70%;
  float: left;
  font-size: 30pt;
  text-align: center;
  font-weight: bold;
}

.clear {
  clear: both;
}

.cyrusssketchbookwrapper {
  border-radius: 10px;
  padding: 5px;
  font-size: 14pt;
  margin: 0 0 10px;
}

.cyrusssketchbookheader {
  color: #FFF;
  padding: 5px;
  text-align: center;
}

.cyrusssketchbooktext {
  background-color: #FFF;
  border-radius: 0 0 5px 5px;
  padding: 10px;
}

.daringdecorwrapper {
  border-radius: 10px;
  padding: 5px;
  font-size: 14pt;
  margin: 0 0 10px;
}

.daringdecorheader {
  color: #FFF;
  padding: 5px;
  text-align: center;
}

.daringdecortext {
  background-color: #FFF;
  border-radius: 0 0 5px 5px;
  padding: 10px;
}

.pictureperfectdesignswrapper {
  border-radius: 10px;
  padding: 5px;
  font-size: 14pt;
  margin: 0 0 10px;
}

.pictureperfectdesignsheader {
  color: #FFF;
  padding: 5px;
  text-align: center;
}

.pictureperfectdesignstext {
  background-color: #FFF;
  border-radius: 0 0 5px 5px;
  padding: 10px;
}

.furniturequizwrapper {
  border-radius: 10px;
  padding: 5px;
  font-size: 14pt;
  margin: 0 0 10px;
}

.furniturequizheader {
  color: #FFF;
  padding: 5px;
  text-align: center;
}

.furniturequiztext {
  background-color: #FFF;
  border-radius: 0 0 5px 5px;
  padding: 10px;
}

.adayinthelifewrapper {
  border-radius: 10px;
  padding: 5px;
  font-size: 14pt;
  margin: 0 0 10px;
}

.adayinthelifeheader {
  color: #FFF;
  padding: 5px;
  text-align: center;
}

.adayinthelifetext {
  background-color: #FFF;
  border-radius: 0 0 5px 5px;
  padding: 10px;
}

.birthdayanimalwrapper {
  border-radius: 10px;
  padding: 5px;
  font-size: 14pt;
  margin: 0 0 10px;
}

.birthdayanimalheader {
  color: #FFF;
  padding: 5px;
  text-align: center;
}

.birthdayanimaltext {
  background-color: #FFF;
  border-radius: 0 0 5px 5px;
  padding: 10px;
}

.pocketcampclubpollwrapper {
  border-radius: 10px;
  padding: 5px;
  font-size: 14pt;
  margin: 0 0 10px;
}

.pocketcampclubpollheader {
  color: #FFF;
  padding: 5px;
  text-align: center;
}

.pocketcampclubpolltext {
  background-color: #FFF;
  border-radius: 0 0 5px 5px;
  padding: 10px;
}

.pocketcampclubgallerywrapper {
  border-radius: 10px;
  padding: 5px;
  font-size: 14pt;
  margin: 0 0 10px;
}

.pocketcampclubgalleryheader {
  color: #FFF;
  padding: 5px;
  text-align: center;
}

.pocketcampclubgallerytext {
  background-color: #FFF;
  border-radius: 0 0 5px 5px;
  padding: 10px;
}

.ablesisterssketchbookwrapper {
  border-radius: 10px;
  padding: 5px;
  font-size: 14pt;
  margin: 0 0 10px;
}

.ablesisterssketchbookheader {
  color: #FFF;
  padding: 5px;
  text-align: center;
}

.ablesisterssketchbooktext {
  background-color: #FFF;
  border-radius: 0 0 5px 5px;
  padding: 10px;
}

.pinkwrapper {
  background-color: #ff82af;
}

.orangewrapper {
  background-color: #ff9b55;
}

.orange2wrapper {
  background-color: #e06d40;
}

.bluewrapper {
  background-color: #5abeff;
}

.tealwrapper {
  background-color: #41c8aa;
}

.greenwrapper {
  background-color: #526a39;
}

.redwrapper {
  background-color: #ff594b;
}

.yellowwrapper {
  background-color: #e5bf0d;
}
Retrieved from "https://rosiesocrossing.com/index.php?title=MediaWiki:Common.css&oldid=2795"