* {margin: 0;padding: 0;}
  body {color:rgb(100,100,100);background:rgb(252,252,252);overflow-y:scroll;}
  header h1::first-letter {text-transform:uppercase;}
  article ul {display:flex;flex-wrap:wrap;flex-basis:220px;}
  article li img {width:100%;border-radius:10px;}
  #images li {width:220px;margin:0 0.5em 1.5em;border-radius:10px;overflow:hidden;height:220px;position:relative;}
  #categories {margin: 0 0 1rem;}
  #categories li {position:relative;}
  #categories .preview_images {position:absolute;top:0;left:0;width:150px;height:150px;}
  #categories .category_preview_img {float:left;background-size:cover !important;width:100%;height:100%;border-radius:50%;border:1px solid #e4e4e4;filter:grayscale(80%);}
  #categories li .category {position:relative;margin:0 1em 0 0;width:150px;height:150px;border-radius:50%;
  font-weight:bold;text-transform:uppercase;overflow:hidden;
  border:1px solid rgb(250,200,200);text-align:center;}
  #categories li .category:hover {border:1px solid #000;}
  #categories .category a {display:block;position:relative;width:100%;height:100%;color:#fff;}
  #categories .category a span {width:100%;background:rgba(0,0,0,0.5);display:block;line-height:1.2em;vertical-align:middle;position:relative;top:45%;}
  nav {padding:1em 2em;}
  footer nav ol {display:flex;gap:0.5rem}

  ol,ul {list-style-type:none;}
  #site_header {width:100%;background:rgb(245,245,245);z-index:1;}
  #site_header img {float:right;width:110px;margin:1em;}
  #site_header h1 {font-family:sans-serif;font-size:3em;padding: 0.2em 0.5em 0;}
  #site_header p {font-family:sans-serif;color:#282828;padding:0.2em;}
  article {background:rgb(253,253,253);border-radius:10px;padding:1rem;}
  #main {display:grid;}
  article p {padding:0 1em 1em;}
  article header h1{padding:0.5em 1em 1em;}
  a {font-family: 'Open Sans', sans-serif;color: #282828;font-size: 1em;color:#B09173;text-decoration: none;}
  a:hover {color:#5a4a3b;}

  .clear {clear:both;}
  .p {position:absolute;}
  input {}
  input + label {display:block;margin:1em;}
  .button {width:7em;border:none;background:rgba(13,82,255, 0.5);color:#fff;text-decoration:none;padding:0.5em;text-align:center;margin:0 0.5em 0.5em;margin:1em;}
  .button:link {color:#fff;}
  .button:visited {color:#fff;}
  .button:hover {border-color:#fff;background:rgba(0,53,181, 0.5);color:#e4e4e4;cursor:pointer;}
  .button:active {color:#fff;}
  .button:focus {outline:none;}

  #images li .delete, #images li .preview {position:absolute;display:block;top:5px;z-index:20;width:2em;height:2em;background: rgba(0,0,0,0.1);padding:0.2em;border-radius:0.3em;}
  #categories li .delete, #categories li .preview {position:absolute;display:block;bottom:-5px;z-index:20;width:2em;height:2em;background: rgba(0,0,0,0.1);padding:0.2em;border-radius:0.3em;}
  .delete {right:5px;}
  .preview {right:3.2em;}
  .delete img {width:100%;height:100%;}
  .delete img:hover, .preview img:hover {filter:grayscale(100%);}

  .flexbox {display:flex;flex-basis:400px;flex-wrap:wrap;justify-content:center;}
  .column {}
  header .flexbox li {margin:0 0.5em;}
  #action_status_message {padding:1em;margin:1em auto;background:rgba(210,210,210,0.5);width:100%;font-size:1.4em;}