body { font-family: Helvetica,sans-serif; background-color: lightblue; margin: 0; } .font-awesome { font-family: FontAwesome; font-style: normal; } nav { background-color: whitesmoke; border-bottom: 1px solid darkgray; display: flex; } nav span { color: dimgrey; cursor: pointer; transition: 0.1s; padding: 0.5em; margin-left: 0.5em; margin-right: 0.5em; } nav span:hover { background-color: lightgray; } #devices { padding: 5%; display: flex; flex-wrap: wrap; justify-content: center; } .device { border: 2px solid darkgray; border-radius: 0.5em; padding: 3em; margin: 3em; display: flex; flex-direction: column; align-items: center; background-color: whitesmoke; } .ip_address { font-size: 0.8em; font-style: italic; color: darkgray; margin: 0.2em; } .sub_devices { display: flex; } .sub_device { border: 2px solid darkgray; border-radius: 0.5em; padding: 1em; margin: 1em; display: flex; flex-direction: column; align-items: center; } .outlet_image { width: 5em; height: 5em; } @font-face { font-family: FontAwesome; src: url("/static/fontawesome-webfont.woff2"); } .edit, .save, .lock, .unlock { font-size: 0.8em; color: dimgrey; } .edit:hover, .save:hover, .lock:hover, .unlock:hover { color: red; cursor: pointer; }