1 files changed, 164 insertions, 0 deletions
diff --git a/public/css/style.css b/public/css/style.css
new file mode 100644
index 0000000..fcd956c
--- /dev/null
+++ b/public/css/style.css
@@ -0,0 +1,164 @@
+@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;
+}
+
+
+.homepage-header {
+	margin-bottom: 1em;
+	text-align: center;
+	color: white;
+	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
+}
+
+a {
+	text-decoration: none;
+}
+
+body {
+	background: linear-gradient(45deg, #C9409060, #0350C660);
+	padding: 10px;
+	min-height: 101vh;
+}
+
+.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-wrap: wrap;
+	justify-content: space-around;
+}
+
+
+.card {
+	min-width: 360px;
+	min-height: 290px;
+	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 {
+	display: grid;
+	grid-template-rows: 1fr 1fr 1fr;
+	grid-template-columns: 3fr 4fr 3fr;
+	margin-left: 5px;
+	margin-right: 5px;
+}
+
+.name {
+	color: #ffffff;
+	font-size: 24px;
+	text-shadow: 1px 1px 5px black;
+	grid-row: 1/2;
+	grid-column: 1/4;
+}
+
+.gen-name {
+	color: #ffffff;
+	text-shadow: 1px 1px 2px black;
+	grid-column: 1/4;
+	grid-row: 2/3;
+}
+
+.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;
+	grid-row: 3/4;
+	grid-column: 2/3;
+}
+
+.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;
+
+}