Template:Infobox person/infobox.css

/* Infobox styling */

.portable-infobox {
    width: 100%;
    margin: auto;
      box-shadow: -4px 4px 8px 0px rgba(0, 0, 0, 0.2);
    margin-bottom: 25px;
        border-radius:15px;
;
}
@media all and ( min-width: 720px ) {
  .portable-infobox { 
  width: 33%; 
  float: right; 
      box-shadow: -4px 4px 8px 0px rgba(0, 0, 0, 0.2);
    margin-bottom: 25px; 
    margin-left:5%;
    margin-right:0;
  	    border-radius:15px;

  }
}

.portable-infobox .pi-title {
   font-size: 21px;
   width: 100%;
   padding:25%;
   box-sizing: border-box;
   text-align: center;
   font-weight: bold;
   background-color: #98b946;
   color: black;
   margin-right: 0px;
    margin-left:0px;
       border-bottom:4px solid #d3e1b1;
       border-radius:15px 15px 0 0;
}
 
.pi-image {
	width: 150%;
	height: auto;
         display: block;
         margin-top: 25px;
         padding: 0;
}

.pi-item[data-source=caption] {
text-align: center;
font-weight: bold;
font-size: 12px;
border:none;
padding: 0px 25px;

}

.pi-item[data-source=attribution]{
text-align: center;
font-style: italic;
font-size: 10px;
padding: 0px 25px;

}

.portable-infobox.pi-background {
   background-color: #ecf7f0;
}

.portable-infobox .pi-secondary-background {
   background-color: #98b946;
width: 100%;
   padding:25%;
   box-sizing: border-box;
   margin-bottom: 5px;
          border-bottom:4px solid #d3e1b1;

}

.portable-infobox .pi-border-color {
   border-color: #d3e1b1;
   border-width:2px;
}

.portable-infobox .pi-item-spacing {
   padding: 10px 20px;
}

.portable-infobox .pi-data-label {
   flex-basis: 165px;
}

.portable-infobox .pi-header {
	color:white;
	font-weight: bold;
}

/* person infobox dark mode*/
html.skin-theme-clientpref-night .pi-background {
  background: #73C491;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .pi-background {
    background: #73C491;
  }
}

html.skin-theme-clientpref-night .pi-secondary-background {
  background: #378353;
  border-bottom: 4px solid #285e3b;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .pi-secondary-background {
    background: #378353;
    border-bottom: 4px solid #285e3b;
  }
}

html.skin-theme-clientpref-night .pi-title {
  background: #285e3b; 
  border-bottom: 4px solid #378353;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .pi-title {
    background: #285e3b; 
    border-bottom: 4px solid #378353;
  }
}

html.skin-theme-clientpref-night .portable-infobox { 
  box-shadow: -4px 4px 8px 0px rgba(225, 225, 225, 0.1);
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .portable-infobox { 
    box-shadow: -4px 4px 8px 0px rgba(225, 225, 225, 0.1);
  }
}

html.skin-theme-clientpref-night .portable-infobox .pi-border-color {
  border-color: #285e3b;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .portable-infobox .pi-border-color {
    border-color: #285e3b;
  }
}

html.skin-theme-clientpref-night .pi-data-label.pi-secondary-font {
  color: white;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .pi-data-label.pi-secondary-font {
    color: white;
  }
}

html.skin-theme-clientpref-night .pi-data-value.pi-font {
  color: black;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .pi-data-value.pi-font {
    color: black;
  }
}

html.skin-theme-clientpref-night .pi-data-value.pi-font a {
  color: black;
  text-decoration-line: underline;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .pi-data-value.pi-font a {
    color: black;
    text-decoration-line: underline;
  }
}

.portable-infobox ul {
    padding-left: 10px;
    margin: 0;
}