css/styles.css
@font-face {
	font-family: "Product Sans";
	font-style: normal;
	font-weight: 400;
	src: local("Open Sans"), local("OpenSans"),
		url(https://fonts.gstatic.com/s/productsans/v5/HYvgU2fE2nRJvZ5JFAumwegdm0LZdjqr5-oayXSOefg.woff2)
			format("woff2");
}

body {
	font-family: "Product Sans";
	margin: 0;
	background: rgb(236, 236, 236);
}

.v_m {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
}

.cover {
	overflow: hidden;
	max-width: 100vw;
	min-height: 100vh;
	background: #152347;
}

.cover-desc {
	color: #94eafd;
}

.icon {
	width: 38vw;
	max-height: 100%;
}

.btn{
	background: #a457c6;
	color: white;
}

.btn:hover{
	background: #94eafd;
	color: black
}

.title {
	padding: 10px 0 0 10px;
	color: white;
	font-size: 20pt;
}

.buffer {
	height: 30vh;
	background: #68336b;
	color: white
}

.event {
	background: #ffc107;
}

.m-card {
	margin-top: 20px;
	background: white;
	border-radius: 10px;
	padding: 8%;
	overflow-y: auto;
	transition: all 0.2s ease-in-out;
	opacity: 0.7;
}

.mcardStyle{
	background: #152347;
    color: white;
}

.m-card::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
	background-color: #f5f5f5;
}

.m-card::-webkit-scrollbar {
	height: 20%;
	width: 3px;
	background-color: #f5f5f5;
}

.m-card::-webkit-scrollbar-thumb {
	background-color: #000000;
	border: 1px solid #555555;
}

.m-card > .name {
	font-size: 25pt;
	font-weight: bold;
	text-transform: capitalize;
}

.m-card > .msg {
	font-size: 15pt;
	font-style: italic;
}

.m-card > .github {
	padding-top: 10px;
	font-size: 20pt;
}

.m-card:hover {
	transform: scale(1.05);
	opacity: 1;
}

a:link {
	color: grey;
}

a:visited {
	/* Changed color so it remains its original color form*/
	color: #94eafd;
}

a:hover {
	/* Changed the color to orange because it suited the website*/
	color: #ce59ba;
	text-decoration: none;
}

.footer {
	height: 5vh;
	background: rgb(36, 36, 36);
}
#icon {
	color: #ce59ba;
}
hr {
	width: 80%;
}
#fb {
	color: #94eafd;
	margin-top: 6px;
}

.info {
	padding: 2%;
}

@media only screen and (max-width: 600px) {
	.cover {
		min-height: 100vh;
	}

	.icon {
		width: 80vw;
	}

	.cover-desc {
		font-size: 25pt;
	}

	.title {
		padding: 10px 0 0 10px;
		color: white;
		font-size: 12pt;
	}
}
