* {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 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;}

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;margin:140px;}
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 1em 0;margin:1em auto;background:rgba(210,210,210,0.5);width:100%;font-size:1.4em;}