Add CSS

public/css/app.css

@@ -0,0 +1,281 @@
+/*!
+STYLE GUIDE
+1. NAV-BAR
+2. Series
+3.
+*/
+
+
+a{
+  color: white;
+  text-decoration: none;
+}
+
+.caps{
+  margin-right: 20px;
+  margin-left: 20px;
+  margin-bottom: 25px;
+}
+
+body {
+  width:auto;
+  margin:auto;
+  padding: 0;
+}
+
+.image{
+  max-width: 220px;
+  max-height: 300px; 
+ 
+}
+/* videoplayer */
+.container{
+  width: 880px;
+  margin-top: 15px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.elementoVideo{
+  color: rgb(255, 255, 255);
+  display:flex;
+  flex-flow:row wrap;
+  flex: 1 1 auto;
+}
+
+
+
+.elemento{
+  color: rgb(255, 255, 255);
+  margin: 10px;
+  width: auto;
+  text-align: center;
+  display:flex;
+  flex-flow:row wrap;
+  justify-content:flex-start;
+  flex: 1 1 auto;
+  align-items: baseline;
+  align-content: flex-start;
+ 
+}
+
+.elementoAnime{
+  color: rgb(255, 255, 255);
+  margin: 10px;
+  width: auto;
+  text-align: center;
+  display:flex;
+  /* height: auto; 
+  flex-basis: auto;*/
+  flex-flow:column wrap;
+  justify-content:flex-start;
+  /* that all encompass 100% 
+  flex-grow:1;*/
+  /*  align-content: center; */
+  flex: 1 1 auto;
+}
+
+.elementoDash{
+  color: rgb(255, 255, 255);
+  margin: 10px;
+  width: auto;
+  text-align: center;
+  display:flex;
+  /* height: auto; 
+  flex-basis: auto;*/
+  flex-flow:column wrap;
+  justify-content:flex-start;
+  /* that all encompass 100% 
+  flex-grow:1;*/
+  /*  align-content: center; */
+  flex: 1 1 auto;
+}
+
+
+* {
+	margin: 0;
+	padding: 0;
+  box-sizing: border-box;
+}
+
+.sada1 {
+  margin-right: 30px;
+  margin-left: 30px;
+}
+.contenedor {
+	background:#212121;
+	width:auto;
+	height:auto;
+  margin:auto;
+	/* Flexbox */
+	display:flex;
+  flex-flow:row wrap;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+header {
+	background:#263238;
+	width:100%;
+	padding:20px;
+	/* Flexbox */
+	display: flex;
+	justify-content:space-between;
+	align-items:center;
+
+	flex-direction:row;
+  flex-wrap:wrap;
+  
+}
+
+header .logo {
+	color:#FFFFFF;
+	font-size:30px;
+}
+
+header .logo img {
+	width:50px;
+	vertical-align: top;
+}
+
+header .logo a {
+	color:#FFFFFF;
+	text-decoration: none;
+	line-height:50px;
+}
+
+header nav {
+	width:50%;
+	/* Flexbox */
+
+	display:flex;
+	flex-wrap:wrap;
+	align-items:center;
+}
+
+header nav a {
+	background:#455A64;
+	color:#FFFFFF;
+	text-align: center;
+	text-decoration: none;
+	padding:10px;
+
+	/* Flexbox */
+	flex-grow:1;
+}
+
+header nav a:hover {
+	background:#78909C;
+}
+
+footer {
+	background:#263238;
+	width: 100%;
+	padding:20px;
+	/* Flexbox */
+	display: flex;
+	flex-wrap:wrap;
+  justify-content:space-between;
+   
+}
+
+footer .links {
+	background:#455A64;
+	display:flex;
+	flex-wrap:wrap;
+}
+
+footer .links a {
+	flex-grow:1;
+
+	color:#FFFFFF;
+	padding:10px;
+	text-align: center;
+	text-decoration:none;
+}
+
+footer .links a:hover {
+	background:#78909C;
+}
+
+footer .social {
+	background:#455A64;
+}
+
+footer .social a {
+	color:#FFFFFF;
+	text-decoration: none;
+	padding:10px;
+	display: inline-block;
+}
+
+@media screen and (max-width: 800px) {
+	.contenedor {
+    flex-direction:column;
+    
+	}
+
+	header {
+		flex-direction:column;
+    padding:0;
+    width:100%;
+    height:100%;
+    margin-left: auto;
+    margin-right: auto;
+	}
+
+	header .logo {
+		margin:20px 0;
+	}
+
+	header nav {
+		width: 100%;
+  }
+  
+}
+
+.pagination{
+  display: flex;
+  flex: 1 1 auto;
+  align-self: center;
+}
+.pagination a {
+  color: #FFFFFF;
+  padding: 8px 16px;
+  text-decoration: none;
+  
+}
+
+.pagination a.active {
+  background-color: #455a64;
+  color: white;
+  border-radius: 5px;
+}
+
+.pagination a:hover:not(.active) {
+  background-color: #78909C;
+  border-radius: 5px;
+}
+
+
+@media screen and (max-width: 700px) {
+	.sada1 {
+    margin-right: auto;
+    margin-left: auto;
+    
+  }
+}
+
+
+@media screen and (max-width: 600px) {
+
+	footer {
+		justify-content:space-around;
+	}
+}
+
+/* Series */
+
+#dash{
+  color: #FFFFFF;
+}