Renamed api to clippable-svc to be more clear

clippable-svc/static/css/style.css

@@ -0,0 +1,100 @@
+html, body, div, tag {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    vertical-align: baseline;
+    background: #212121;
+    text-align: center;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+h1 {
+	text-transform: capitalize;
+}
+
+a {
+	text-decoration: none;
+	color: whitesmoke;
+   text-shadow:
+		3px 3px 0   #191818,
+		-1px -1px 0 #191818,  
+		1px -1px 0  #191818,
+		-1px 1px 0  #191818,
+		1px 1px 0   #191818;
+
+}
+a:hover {
+	text-decoration: none;
+	color: white;
+}
+
+.content {
+    margin: 0 auto;
+    padding: 0 2em;
+    line-height: 1.6em;
+    color: whitesmoke;
+	max-width: 80%;
+}
+.video-gallery {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.video-block {
+	display: block;
+    padding: 1em;
+    width: 400px;
+    line-height: 1em;
+	margin-right: 1em;
+	margin-bottom: 1em;
+	border-radius: 1em;
+
+	background: linear-gradient(#191818,#191818,50%,#00ffcc,50%,#00ffcc);
+	background-size: 100% 200%;
+	transition: all 0.2s ease;
+	animation: 0.4s ease;
+}
+.video-block:hover {
+	background-position: 100% 100%;
+	animation: 0.4s ease;
+}
+
+video {
+	max-width: 100%;
+	max-height: 80vh;
+}
+
+.pure-form {
+    text-align: center;
+}
+.pure-img {
+	border-radius: 0.5em;
+}
+
+.login-form {
+	max-width: 500px;
+	margin: 0 auto;
+}
+#video-meta {
+	text-align: left;
+}
+
+.admin-video-li {
+	color: black;
+	text-shadow: none;
+	padding-right: 1em;
+}
+
+.admin-video-li:hover {
+	color: #0a58ca;
+	text-shadow: none;
+}
+
+.align-left {
+	text-align: left;
+}