body
{
  background: gray;
  background: linear-gradient(90deg,rgba(156, 0, 18, 1) 0%, rgba(255, 100, 0, 1) 20%, rgba(214, 189, 0, 1) 40%, rgba(0, 196, 126, 1) 60%, rgba(0, 145, 205, 1) 80%, rgba(109, 41, 163, 1) 100%);
}

header, section, footer, #skip
{
  border:double 6px; padding:20px; margin:6px;
}
#skip
{
 position:absolute;
 left: -600px;
}
#skip:focus
{
	position:static;
  width:auto;
  height:auto;
  border:black;
  background:white;
}
h1, h2
{
  color:#12398E;
}

header
{
  background:white;
  text-align:center;
}
section, footer
{
  background:#D7D1BD;
}
li{margin-bottom:12pt}
#colorbox a {
  display:flex;
  text-align:center;
  outline: double black 6px;
  padding:9px;
  margin: 20px;
  font-weight:bold;
  flex-direction: column;
  justify-content: space-around;
  flex-wrap: wrap;
}
.red{color: white; background: #CC1B41;}
.orange{color: black; background: #FF733F;}
.yellow{color: black; background: #E8D000}
.green{color: white; background: #00875C;}
.blue{color: white; background: #007AB5;}
.purple{color: white; background: #734A94;}
.pink{color: black; background: #EE8CBD;}
.brown{color: white; background: #A0623F;}
.black{color: white; background:#0A0F14;}
.gray{color: white; background: #6C737E;}
.white{color: black; background: white;}

.web-red{color: black; background: red;}
.web-yellow{color: black; background: yellow;}
.web-green{color: black; background: lime;}
.web-cyan{color: black; background: cyan;}
.web-blue{color: white; background: blue;}
.web-magenta{color: black; background: magenta;}
#web-colors
{
}

#web-colors span
{
text-align: center; padding: 9px; margin:6px; outline: double black 6px;
}
@media (max-width: 768px)
  {
    #web-colors span
      {

      display: flex;
      text-align:center;
      justify-content: space-around;  flex-direction: row;
      flex-wrap: wrap;
      text-align: center;
      padding: 9px;
      margin:20px;
      width:30%;
      }
}