MediaWiki:Common.css: Difference between revisions

From RosieSoCrossing
← Older editNewer edit →
mNo edit summary
mNo edit summary
Line 1,187: Line 1,187:
}
}


.mw-body-content a > img, .mw-body-content .floatnone > img {
.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 */
   /*max-width: calc(100% - 10px) !important;1.5em */
   border-radius: 6px;
   border-radius: 6px;
Line 1,300: Line 1,301:
}
}


.mw-body-content a > img, .mw-body-content .floatnone > img {
.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; */
   /*max-width: calc(100% - 10px) !important; */
   border-radius: 6px;
   border-radius: 6px;
Line 1,411: Line 1,413:
}
}


.mw-body-content a > img, .mw-body-content .floatnone > img {
.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; */
   /*max-width: calc(100% - 10px) !important; */
   border-radius: 6px;
   border-radius: 6px;
Line 1,524: Line 1,527:
}
}


.mw-body-content a > img, .mw-body-content .floatnone > img {
.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; */
   /*max-width: calc(100% - 10px) !important; */
   border-radius: 6px;
   border-radius: 6px;
Line 1,588: Line 1,592:
}
}


.mw-body-content a > img, .mw-body-content .floatnone > img {
.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; */
   /*max-width: calc(100% - 10px) !important; */
   border-radius: 6px;
   border-radius: 6px;
Line 1,749: Line 1,754:
}
}


.mw-body-content a > img, .mw-body-content .floatnone > img {
.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; */
   /*max-width: calc(100% - 10px) !important; */
   border-radius: 6px;
   border-radius: 6px;

Revision as of 15:43, 3 May 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-optical-sizing: auto;
    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-optical-sizing: auto;
    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;
}

.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-optical-sizing: auto;
    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-optical-sizing: auto;
    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-optical-sizing: auto;
    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: 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: none;
    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: none;
    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: none;
    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;
}

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

.frontpage h3 {
  margin: 0 0 10px;
}

.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) {

.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 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) {

#mw-content {
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-teal.png);
}

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

}

/* Min 1600px */

@media (max-width: 1919px) {

#mw-content {
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-red.png);
}

}

/* Min 1440px */

@media (max-width: 1599px) {

#mw-content {
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-dteal.png);
}

}

/* Min 1280px */

@media (max-width: 1439px) {

#mw-content {
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-burgundy.png);
}

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

.fronthi, .frontsocials, .frontbdays, .frontevents, .frontscreen, .frontnews, .frontart, .frontisles, .frontislestardust, .frontislemaplegrove, .frontislemiffyisle, .frontislesakurabay, .frontislesnw, .frontislecosycove, .frontisleheatherbay, .frontisleleviland, .frontisleleviland2, .frontislequinnland {
  grid-area: unset;
}

}

/* Min 1080px */

@media (max-width: 1279px) {

#mw-content {
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-orange.png);
}

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

.fronthi, .frontsocials, .frontbdays, .frontevents, .frontscreen, .frontnews, .frontart, .frontisles, .frontislestardust, .frontislemaplegrove, .frontislemiffyisle, .frontislesakurabay, .frontislesnw, .frontislecosycove, .frontisleheatherbay, .frontisleleviland, .frontisleleviland2, .frontislequinnland {
  grid-area: unset;
}

}

/* Min 1024px */

@media (max-width: 1079px) {

#mw-content {
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-teal.png);
}

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

.fronthi, .frontsocials, .frontbdays, .frontevents, .frontscreen, .frontnews, .frontart, .frontisles, .frontislestardust, .frontislemaplegrove, .frontislemiffyisle, .frontislesakurabay, .frontislesnw, .frontislecosycove, .frontisleheatherbay, .frontisleleviland, .frontisleleviland2, .frontislequinnland {
  grid-area: unset;
}

}

/* */

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

#mw-content {
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-purple.png);
}

  #mw-content {
    padding: 0;
}

}

/* Min 820px */

@media (max-width: 1023px) {

#mw-content {
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-green.png);
}

.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;
}

}

/* Min 810px */

@media (max-width: 819px) {

#mw-content {
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-worange.png);
}

.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;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;
}

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

}

/* Min 800px */

@media (max-width: 809px) {

#mw-content {
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-olive.png);
}

.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;
}

}

/* Min 720px */

@media (max-width: 799px) {

#mw-content {
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-ochre.png);
}

.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: 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: 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;
}

}

/* Min 640px */

@media (max-width: 719px) {

#mw-content {
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-seafoam.png);
}

.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: 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: 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;
  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;
}

}

/* Mobile max 640px */

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

#mw-content {
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-mutedgreen.png);
}

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

.fronthi, .frontsocials, .frontbdays, .frontevents, .frontscreen, .frontnews, .frontart, .frontisles, .frontislestardust, .frontislemaplegrove, .frontislemiffyisle, .frontislesakurabay, .frontislesnw, .frontislecosycove, .frontisleheatherbay, .frontisleleviland, .frontisleleviland2, .frontislequinnland {
  grid-area: unset;
}

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;
}

}

.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");
}

.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%;
}


.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;
}
Retrieved from "https://rosiesocrossing.com/index.php?title=MediaWiki:Common.css&oldid=1970"