w3.css modernized (version 2)

w3css-modernized-2.css

:root {
  /* font families */
  --font-body: Verdana,sans-serif;
  --font-heading: "Segoe UI",Arial,sans-serif;
  /* Colors */
  --color-amber: #ffc107;
  --color-aqua: #00ffff;
  --color-blue: #2196F3;
  --color-light-blue: #87CEEB;
  --color-brown: #795548;
  --color-cyan: #00bcd4;
  --color-blue-gray: #607d8b;
  --color-green: #4CAF50;
  --color-light-green: #8bc34a;
  --color-indigo: #3f51b5;
  --color-khaki: #f0e68c;
  --color-lime: #cddc39;
  --color-orange: #ff9800;
  --color-deep-orange: #ff5722;
  --color-pink: #e91e63;
  --color-purple: #9c27b0;
  --color-deep-purple: #673ab7;
  --color-red: #f44336;
  --color-sand: #fdf5e6;
  --color-teal: #009688;
  --color-yellow: #ffeb3b;
  --color-white: #fff;
  --color-black: #000;
  --color-gray: #9e9e9e;
  --color-light-gray: #f1f1f1;
  --color-dark-gray: #616161;
  /* Text Color Contrasts */
  --text-light: #fff;
  --text-dark: #000;
  /* Default Border */
  --bar-border-size: 6px;
  --bar-border-color: #ccc;
}


html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent}a:active,a:hover{outline-width:0}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{outline-offset:-2px}
[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* End extract */

html, body {
  font-family: var(--font-body);
  line-height: 1.5;
}

:where(h1,h2,h4,h5,h6) {
  font-family: var(--font-heading);
  font-weight: 400;
  margin: 10px 0;
}
h1 { font-size: 2.4rem; } /* 36px */
h2 { font-size: 2rem; } /* 30px */
h3 { font-size: 1.6rem; } /* 24px */
h4 { font-size: 1.3333rem; } /* 20px */
h5 { font-size: 1.2rem; } /* 18px */
h6 { font-size: 1.06rem; } /* 16px */

hr {
  border:0;
  border-top:1px solid #eee;
  margin:20px 0;
}

.w3-serif{font-family:serif}
.w3-sans-serif{font-family:sans-serif}
.w3-cursive{font-family:cursive}
.w3-monospace{font-family:monospace}

.w3-tiny{ font-size:0.6rem } /* 10px */
.w3-small{ font-size:0.8rem } /* 12px */
.w3-medium{ font-size:1rem } /* 15px */
.w3-large{ font-size:1.2rem } /* 18px */
.w3-xlarge{ font-size:1.6rem } /* 24px */
.w3-xxlarge{ font-size:2.4rem } /* 36px */
.w3-xxxlarge{ font-size:3.2rem } /* 48px */
.w3-jumbo{ font-size:4.2rem } /* 64px */

.w3-center { text-align:center; }

.w3-container, .w3-panel {
  padding: 0.01em 16px;
}

.w3-panel {
  margin-block: 16px;
}

:where(.w3-btn, .w3-button) {
  border:none;
  display:inline-block;
  padding:8px 16px;
  vertical-align:middle;
  overflow:hidden;
  text-decoration:none;
  text-align:center;
  cursor:pointer;
  white-space:nowrap
}

.w3-button:hover {
  color: var(--hover-color, #000);
  background-color: var(--hover-background, #ccc);
}

.w3-btn:hover{
  box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)
}

.w3-bar { 
  display: flex; 
}
.w3-bar-item {
  padding: 8px 16px;
}

.w3-card, .w3-card-2 {
  box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
}
.w3-card-4, .w3-hover-shadow:hover {
  box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)
}

.w3-table {
  border-collapse:collapse;
  border-spacing:0;
  width:100%;
}

.w3-table :where(td, th) {
  padding:8px 8px;
  text-align:left;
  vertical-align:top;
}

.w3-table :where(td, th):first-child {
  padding-left:16px;
}

.w3-striped tbody tr:nth-child(even) {
  background-color: var(--table-stripe-color, #f1f1f1);
}

.w3-border-0{border:none}
.w3-border{border: var(--border-size, 1px) solid var(--border-color, #ccc)}
.w3-border-top{border-top: var(--border-size, 1px) solid var(--border-color, #ccc)}
.w3-border-bottom{border-bottom: var(--border-size, 1px) solid var(--border-color, #ccc)}
.w3-border-left{border-left: var(--border-size, 1px) solid var(--border-color, #ccc)}
.w3-border-right{border-right: var(--border-size, 1px) solid var(--border-color, #ccc)}

.w3-topbar{border-top: var(--bar-border-size) solid var(--bar-border-color) }
.w3-bottombar{border-bottom: var(--bar-border-size) solid var(--bar-border-color) }
.w3-leftbar{border-left: var(--bar-border-size) solid var(--bar-border-color) }
.w3-rightbar{border-right: var(--bar-border-size) solid var(--bar-border-color) }

.w3-round-small{border-radius:2px}
.w3-round,.w3-round-medium{border-radius:4px}
.w3-round-large{border-radius:8px}
.w3-round-xlarge{border-radius:16px}
.w3-round-xxlarge{border-radius:32px}

/* Colors */

.w3-amber,.w3-hover-amber:hover{color:var(--text-dark);background-color:var(--color-amber)}
.w3-aqua,.w3-hover-aqua:hover{color:var(--text-dark);background-color:var(--color-aqua)}
.w3-blue,.w3-hover-blue:hover{color:var(--text-light);background-color:var(--color-blue)}
.w3-light-blue,.w3-hover-light-blue:hover{color:var(--text-dark);background-color:var(--color-light-blue)}
.w3-brown,.w3-hover-brown:hover{color:var(--text-light);background-color:var(--color-brown)}
.w3-cyan,.w3-hover-cyan:hover{color:var(--text-dark);background-color:var(--color-cyan)}
.w3-blue-grey,.w3-hover-blue-grey:hover,.w3-blue-gray,.w3-hover-blue-gray:hover{color:var(--text-light);background-color:var(--color-blue-gray)}
.w3-green,.w3-hover-green:hover{color:var(--text-light);background-color:var(--color-green)}
.w3-light-green,.w3-hover-light-green:hover{color:var(--text-dark);background-color:var(--color-light-green)}
.w3-indigo,.w3-hover-indigo:hover{color:var(--text-light);background-color:var(--color-indigo)}
.w3-khaki,.w3-hover-khaki:hover{color:var(--text-dark);background-color:var(--color-khaki)}
.w3-lime,.w3-hover-lime:hover{color:var(--text-dark);background-color:var(--color-lime)}
.w3-orange,.w3-hover-orange:hover{color:var(--text-dark);background-color:var(--color-orange)}
.w3-deep-orange,.w3-hover-deep-orange:hover{color:var(--text-light);background-color:var(--color-deep-orange)}
.w3-pink,.w3-hover-pink:hover{color:var(--text-light);background-color:var(--color-pink)}
.w3-purple,.w3-hover-purple:hover{color:var(--text-light);background-color:var(--color-purple)}
.w3-deep-purple,.w3-hover-deep-purple:hover{color:var(--text-light);background-color:var(--color-deep-purple)}
.w3-red,.w3-hover-red:hover{color:var(--text-light);background-color:var(--color-red)}
.w3-sand,.w3-hover-sand:hover{color:var(--text-dark);background-color:var(--color-sand)}
.w3-teal,.w3-hover-teal:hover{color:var(--text-light);background-color:var(--color-teal)}
.w3-yellow,.w3-hover-yellow:hover{color:var(--text-dark);background-color:var(--color-yellow)}
.w3-white,.w3-hover-white:hover{color:var(--text-dark);background-color:var(--color-white)}
.w3-black,.w3-hover-black:hover{color:var(--text-light);background-color:var(--color-black)}
.w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:var(--text-dark);background-color:var(--color-gray)}
.w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:var(--text-dark);background-color:var(--color-light-gray)}
.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:var(--text-light);background-color:var(--color-dark-gray)}


.w3-border-amber,.w3-hover-border-amber:hover{--border-color: var(--color-amber); --bar-border-color:var(--color-amber)}
.w3-border-aqua,.w3-hover-border-aqua:hover{--border-color: var(--color-aqua); --bar-border-color:var(--color-aqua)}
.w3-border-blue,.w3-hover-border-blue:hover{--border-color: var(--color-blue); --bar-border-color:var(--color-blue)}
.w3-border-light-blue,.w3-hover-border-light-blue:hover{--border-color: var(--color-light-blue); --bar-border-color: var(--color-light-blue)}
.w3-border-brown,.w3-hover-border-brown:hover{--border-color: var(--color-brown); --bar-border-color:var(--color-brown)}
.w3-border-cyan,.w3-hover-border-cyan:hover{--border-color: var(--color-cyan); --bar-border-color:var(--color-cyan)}
.w3-border-blue-grey,.w3-hover-border-blue-grey:hover,.w3-border-blue-gray,.w3-hover-border-blue-gray:hover{--border-color: var(--color-blue-gray); --bar-border-color: var(--color-blue-gray)}
.w3-border-green,.w3-hover-border-green:hover{--border-color: var(--color-green); --bar-border-color:var(--color-green)}
.w3-border-light-green,.w3-hover-border-light-green:hover{--border-color: var(--color-light-green); --bar-border-color: var(--color-light-green)}
.w3-border-indigo,.w3-hover-border-indigo:hover{--border-color: var(--color-indigo); --bar-border-color:var(--color-indigo)}
.w3-border-khaki,.w3-hover-border-khaki:hover{--border-color: var(--color-khaki); --bar-border-color:var(--color-khaki)}
.w3-border-lime,.w3-hover-border-lime:hover{--border-color: var(--color-lime); --bar-border-color:var(--color-lime)}
.w3-border-orange,.w3-hover-border-orange:hover{--border-color: var(--color-orange); --bar-border-color:var(--color-orange)}
.w3-border-deep-orange,.w3-hover-border-deep-orange:hover{--border-color: var(--color-deep-orange); --bar-border-color: var(--color-deep-orange)}
.w3-border-pink,.w3-hover-border-pink:hover{--border-color: var(--color-pink); --bar-border-color:var(--color-pink)}
.w3-border-purple,.w3-hover-border-purple:hover{--border-color: var(--color-purple); --bar-border-color:var(--color-purple)}
.w3-border-deep-purple,.w3-hover-border-deep-purple:hover{--border-color: var(--color-deep-purple); --bar-border-color: var(--color-deep-purple)}
.w3-border-red,.w3-hover-border-red:hover{--border-color: var(--color-red); --bar-border-color:var(--color-red)}
.w3-border-sand,.w3-hover-border-sand:hover{--border-color: var(--color-sand); --bar-border-color:var(--color-sand)}
.w3-border-teal,.w3-hover-border-teal:hover{--border-color: var(--color-teal); --bar-border-color:var(--color-teal)}
.w3-border-yellow,.w3-hover-border-yellow:hover{--border-color: var(--color-yellow); --bar-border-color:var(--color-yellow)}
.w3-border-white,.w3-hover-border-white:hover{--border-color: var(--color-white); --bar-border-color:var(--color-white)}
.w3-border-black,.w3-hover-border-black:hover{--border-color: var(--color-black); --bar-border-color:var(--color-black)}
.w3-border-grey,.w3-hover-border-grey:hover,.w3-border-gray,.w3-hover-border-gray:hover{--border-color: var(--color-gray); --bar-border-color:var(--color-gray)}
.w3-border-light-grey,.w3-hover-border-light-grey:hover,.w3-border-light-gray,.w3-hover-border-light-gray:hover{--border-color: var(--color-light-gray); --bar-border-color: var(--color-light-gray)}
.w3-border-dark-grey,.w3-hover-border-dark-grey:hover,.w3-border-dark-gray,.w3-hover-border-dark-gray:hover{--border-color: var(--color-dark-gray); --bar-border-color: var(--color-dark-gray)}