Template:ETH Zurich/main css

main {

   background-color: var(--light-background-color);
   color: var(--dark-text-color);
   font-family: var(--cate-sf-font);
   font-size: var(--text-font-size);
   margin: 0 auto;
   max-width: 1280px; /* HD standard */
   padding: 20px 0;
   width: 100%;

}

main address {

   font-size: var(--address-font-size);
   font-style: normal;
   margin: 10px auto;
   padding: 0 20px;

}

main figure {

   /* Refer to: https://codepen.io/sdthornton/pen/wBZdXq */
   box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
   margin: auto;
   max-width: 100%;

}

main dl {

   border: 5px double var(--medium-background-color);
   clear: both;
   display: block;
   margin: 20px auto;
   overflow: auto;
   padding: 0 15px;

}

main dd, dt {

   display: block;
   float: left;
   margin: 5px auto;
   padding: 0;
   line-height: var(--large-line-height);

}

main dt {

   clear: left;
   font-weight: bold;
   text-align: center;
   padding: 0 10px 0 0;

}

main dt::after {

   content: ":";

}

main section {

   clear: both;
   margin: 20px 0;
   padding-bottom: 20px;

}

main section > h1 { /*

   background: linear-gradient(to right, var(--light-background-color), var(--blueish) 100%);

• /

   border-left: 10px solid var(--yellow);
   color: var(--h1-color);
   font-family: var(--h1-font);
   font-weight: bold;
   margin-left: -20px;
   padding: 5px 10px;
   text-transform: uppercase;

}

main h1 {

 color: var(--h1-color);
 font-family: var(--header-font);
 font-size: var(--h1-font-size);
 font-weight: normal;
 padding: 10px;

}

main h2 {

   color: var(--h2-color);
   font-family: var(--header-font);
   font-size: var(--h2-font-size);
   font-weight: normal;
   padding: 10px 20px 0 20px;

}

main p {

   -ms-hyphens: auto;
   -webkit-hyphens: auto;
   hyphens: auto;
   line-height: var(--text-line-height);
   margin: 10px 0;
   padding: 0 20px;
   text-align: justify;

}

main summary {

   cursor: pointer;

}

main img {

   display: block;
   height: auto;
   margin: 0 auto;
   padding: 10px 20px;
   width: calc(100% - 40px);

}

main ul, main ol {

   line-height: var(--text-line-height);
   list-style-image: none;
   list-style-position: outside;
   margin: 10px auto;
   padding: 0 0 0 40px;

}

main ol {

   list-style-type: decimal;

}

main ul {

   list-style-type: disc;

}

main li > p {

   padding-left: 0;

}

.bacterium, .gene {

   font-style: italic;

}

.headline {

   color: var(--headline-color);
   font-size: var(--headline-font-size);
   margin: 0;
   padding: 0;
   text-align: center;

}

.fig-generic {

   margin: 0 auto;
   padding: 10px 20px;
   max-width: 400px;

}

.fig-float { /* DEPRECATED */

   float: right;
   margin: 0 auto;
   padding: 10px 20px;
   max-width: 400px;

}

.fig-float-right {

   float: right;
   margin: 0 auto;
   padding: 10px 20px;
   max-width: 400px;

}

.fig-float-left {

   float: left;
   margin: 0 auto;
   padding: 10px 20px;
   max-width: 400px;

}

main figcaption {

   font-size: var(--caption-font-size);
   margin: 10px auto;

}

.fig-nonfloat {

   margin: 10px auto;
   max-width: 800px;

}

.fig-nonfloat > figcaption {

   padding: 0 20px;

}

.top-fig-single {

   margin: 40px auto;
   max-width: 400px;

}

.top-fig-multi {

   margin: 40px auto;
   max-width: 800px;

}

.first {

   margin-top: 0;

}

.multi-summary {

   display: flex;
   flex-flow: column nowrap;
   justify-content: space-between;
   margin: 0;
   padding: 0;

}

.multi-summary > details {

   display: block;
   flex: 1 1 0;
   margin: 10px 0;
   padding: 0 20px;

}

.multi-summary > details:first-child {

   margin-top: 0;

}

.multi-summary > details:last-child {

   margin-bottom: 0;

}

.multi-summary > details > summary {

   background-color: var(--blue);
   color: var(--light-text-color);
   padding: 10px;

}

.multi-summary > details[open] > summary {

   background-color: var(--very-dark-blue);

}

.references {

   font-size: var(--references-font-size);

}

.pro-contra {

   display: flex;
   flex-flow: row wrap;

}

.pro-contra > div {

   flex: 1 1 0;
   min-width: 250px;

}

.pro > p, .contra > p {

   font-weight: bold;

}

.pro > p {

   color: var(--green);

}

.contra > p {

   color: var(--reddish);

}