.read-wiki {
    --cameo-width: clamp(8rem, 24vw, 21rem);
    .header-element,
    .current-activity-header,
        .small-margin-current-activity
   {
       font-family: 'Open Sans', Arial, sans-serif;
       line-height: 1.6;
   }
   .small-margin-current-activity
   {
       max-width: unset;
       margin-left:3rem;
       margin-right:3rem;
       a:has(img.photo)
       {
           display: block;
           float: right;
           margin: 0.3rem 0 1rem 1.5rem;
           max-width: 38%;
       }
       a:has(img.photo) img.photo
       {
          display: block;
          height: auto;
          width: 100%;
       }
       p:nth-of-type(odd) a:has(img.photo) 
       {
           float: left; 
           margin: 0.3rem 1.5rem 1rem 0;
       }
       h3,
       h2,
       hr
       {
           clear: both;
       }
       .serving a:has(img.photo)
       {
           display: inline;
           float: none;
           margin: 0;
           max-width: none;
       }
       .serving img
       {
           width:80vw;
       }
   }
   li
   {
       list-style-type: square;
   }
        .anchor-button
   {
       border-radius: 5px;
   }
   @media (max-width: 40rem)
   {
       .small-margin-current-activity a:has(img.photo)
       {
           float: none;
           margin: 1rem auto;
           max-width: 100%;
       }
   }
   .header-element,
   .current-activity-header
   {
       min-height: 15rem;
       position: relative;
       width: 100%;
       z-index: 10;
   }
    .mobile .header-element,
        .mobile .current-activity-header
   {
       height: 18rem;
   }
   .cameo img
   {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      width: var(--cameo-width);
      height: 100%;
      object-fit: contain;
      object-position: right bottom;
      z-index: 100;
   }
   .nav
   {
       align-items: center;
       background-color: white;
       display: flex;
       justify-content: center;
       min-height: 3rem;
   }
   .mobile .nav
   {
       height: 4.2rem;
       padding-top:0.6rem;
   }
   .slogan
   {
       align-items: center;
       background-color: darkred;
       color: white;
       display: flex;
       justify-content: center;
       font-family: Brush Script MT, cursive;
       font-size: clamp(1.55rem, 3.571vw, 2.5rem);
       min-height: 3rem;
       text-align: center;
   }
   .mobile .slogan
   {
       font-size: clamp(0.982rem, 2.262vw, 1.5833rem);
       min-height: 4.2rem;
   }
   .full-name
   {
       background-color: white;
       color: darkblue;
       font-family: Arial, sans-serif;
       align-items: center;
       display: flex;
       font-size: clamp(2.067rem, 4.762vw, 3.3333rem);
       font-weight: bold;
       justify-content: center;
       min-height: 11.4rem;
       position: relative;
       text-align: center;
   }
   .mobile .full-name
   {
       font-size: clamp(1.137rem, 2.619vw, 1.8333rem);
       height: unset;
       min-width: unset;
   }
   .campaign
   {
       background-color: darkblue;
       color: white;
       font-family: Verdana, Geneva, sans-serif;
       align-items: center;
       display: flex;
       font-size: clamp(1.55rem, 3.571vw, 2.5rem);
       justify-content: center;
       min-height: 4.8rem;
       position: relative;
       text-align: center;
   }
   .mobile .campaign
   {
       font-size: clamp(0.982rem, 2.262vw, 1.5833rem);
       height: unset;
       min-width: unset;
   }
   /*
    * The row of links takes the width it is given rather than a fixed
    * sixty rem. Five links each asking for twelve rem came to more than
    * that, so the last of them dropped to a row of its own.
    */
    .header-element ul,
        .current-activity-header ul
   {
       align-items: baseline;
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       list-style: none;
       margin-inline: auto;
       max-width: 72rem;
       padding: 0;
       width: 100%;
   }
    .mobile .header-element ul,
        .mobile .current-activity-header ul
   {
       width: unset;
   }
    .header-element ul li,
        .current-activity-header ul li
   {
       white-space: nowrap;
       display: inline-block;
       flex: 0 1 auto;
       min-width: clamp(4rem, 9vw, 12rem);
       padding: 0.3rem 0.5rem;
       text-align: center;
   }
    .mobile .header-element ul li,
        .mobile .current-activity-header ul li
   {
       min-width: 6rem;
       padding: 0 0.2rem;
   }
    .page-lang a,
    .header-element ul li a,
        .current-activity-header ul li a
   {
       font-size: clamp(0.723rem, 1.667vw, 1.1667rem);
       text-decoration: none;
   }
   .page-lang a:hover,
   .header-element ul li a:hover,
   .current-activity-header ul li a:hover
   {
       text-decoration: underline;
   }
   .page-lang
   {
       float:right;
       margin-right: 1.2rem;
       padding: 0.6rem;
   }
   .mobile .page-lang
   {
       margin-right: 3px;
       padding: 0.6rem 0 0 3px;
   }
   .small-margin-current-activity
   {
       padding-top: 1.2rem;
   }
   .mobile .small-margin-current-activity
   {
       top: 26.4rem;
   }
   .statement
   {
       position:relative;
       top: 1.2rem;
   }
   .mobile .statement
   {
       top: unset;
   }
   .small-margin-current-activity p,
   .small-margin-current-activity div
   {
       margin-bottom: 15px;
   }
   .current-activity-footer
   {
       background-color: darkblue;
       clear: both;
       color: white;
       margin-top: 2rem;
       padding: 0.6rem;
       text-align: center;
       width: 100%;
   }
   .mobile .current-activity-footer
   {
       left: 0;
       padding:1%;
       top: 25.8rem;
       width: 100%;
   }
   .event
   {
       border:2px solid black;
       border-radius:10px;
       font-size: clamp(0.93rem, 2.143vw, 1.5rem);
       padding: 10px 10px 0 10px;
       position: relative;
       margin:auto;
       z-index:20;
   }
   .event a
   {
       text-decoration: none;
   }
   event a:hover
   {
       text-decoration: underline;
   }
   .center
   {
       margin:auto;
   }
   .priorities
   {
       clear: both;
   }
   .left-cameo
   {
       float:left;
       height:21rem;
       width:21rem;
   }
   left-cameo img
   {
       border: 2px solid black;
       border-radius: 9rem;
   }
   .mobile .left-cameo
   {
       text-align:center;
       width: 100%;
   }
   .family-photo img
   {
       width:100%;
   }
   mobile input[type=text]
   {
       width: 200px;
   }
   .nav p,
   .full-name h1,
   .campaign h2
   {
       line-height: 1.15;
       margin: 0;
       padding: 0;
   }
   .nav,
   .slogan p,
   .full-name h1,
   .campaign h2
   {
      margin-right: calc(var(--cameo-width));
   }
   .current-activity-header,
   .header-element
   {
       align-items: center;
       display: flex;
       flex-wrap: wrap;
       position: relative;
   }
   .mobile .header-element,
   .mobile .current-activity-header
   {
       height: 18rem;
   }
   .nav
   {
       flex: 1 1 20rem;
       order: 1;
   }
   .page-lang
   {
       flex: 0 1 auto;
       float: none;
       order: 2;
       padding: 0.5rem;
       position: static;
   }
   .slogan
   {
       flex: 0 0 100%;
       order: 3;
   }
   .full-name
   {
       flex: 0 0 100%;
       order: 4;
   }
   .campaign
   {
       flex: 0 0 100%;
       order: 5;
   }
   .header-element ul li,
   .current-activity-header ul li
   {
       align-items: baseline;
       display: flex;
       justify-content: center;
   }
   .education td
   {

      vertical-align:top;
   }
   .education th
   {
      vertical-align:bottom;
   }
   .education ul
   {
      margin-top:0;
   }
}