1 files changed, 157 insertions, 0 deletions
diff --git a/static/css/style.css b/static/css/style.css
new file mode 100644
index 0000000..36aa446
--- /dev/null
+++ b/static/css/style.css
@@ -0,0 +1,157 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
+
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	font-family: 'Poppins', sans-serif;
+}
+
+a {
+	text-decoration: none;
+}
+
+body {
+	background: linear-gradient(45deg, #C9409060, #0350C660);
+	padding: 10px;
+
+	min-height: 100vh;
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	flex-direction: column;
+}
+
+
+.catagory {
+	border-bottom: 3px solid gray;
+	border-radius: 2px;
+	margin-bottom: 10px;
+
+	text-align: left;
+}
+
+.catagory-name {
+	color: rgb(50, 50, 50);
+	padding-left: 5px;
+	text-shadow: 1px 1px 2px #0350C660;
+}
+
+
+.app-container {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+
+
+.card {
+	width: 24vw;
+	height: 30vh;
+	margin: 5px;
+	border-radius: 10px;
+
+	background: linear-gradient(45deg, #C9409030, #0350C6);
+	box-shadow: 1px 2px 3px #000000;
+
+	display: flex;
+}
+
+.info {
+	width: 100%;
+	text-align: center;
+	border-radius: 5px 0 0 5px;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+.card:has(> .image) .info {
+	width: 70%;
+}
+
+.icon img {
+	width: 40%;
+	filter: drop-shadow(0px 1px 2px black);
+	margin: 20px;
+}
+
+.title {
+	flex-direction: row;
+	display: grid;
+	grid-template-rows: 40% 40% 20%;
+	grid-template-columns: 20% 20% 20% 20% 20%;
+}
+
+.name {
+	color: #ffffff;
+	font-size: 24px;
+	text-shadow: 1px 1px 5px black;
+}
+
+.gen-name {
+	color: #ffffff;
+	text-shadow: 1px 1px 2px black;
+}
+
+.ins-btn {
+	color: #e4e3e3;
+	background-color: #0350C6;
+	border: 1px solid #ffffff80;
+	border-radius: 10px;
+	box-shadow: 1px 1px 2px #00000070;
+
+	/* margin-top: 40px; */
+	padding: 7px 25px;
+
+	font-weight: 700;
+
+	transition: all 200ms ease-in-out;
+}
+
+.ins-btn:hover {
+	color: #ffffff;
+	background-color: #2866c1;
+	cursor: pointer;
+}
+
+.ins-btn > a:visited {
+	color: #ffffff80 !important;
+}
+
+
+.image {
+	width: 30%;
+	border-radius: 0 10px 10px 0;
+	overflow: hidden;
+}
+
+.image img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.image img:hover {
+	cursor: pointer;
+}
+
+.overlay {
+	width: 80%;
+	background-color: gray;
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.full-size img {
+	width: 100%;
+	height: auto;
+	object-fit: cover;
+
+}