1 files changed, 203 insertions, 0 deletions

diff --git a/showcase/tech/css/main.css b/showcase/tech/css/main.css
new file mode 100644
index 0000000..0335820
--- /dev/null
+++ b/showcase/tech/css/main.css
@@ -0,0 +1,203 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
+
+html{
+	font-family: "Noto Sans", sans-serif;
+	background: radial-gradient(#280048,#300000);
+	background-size: 33%;
+	color: #FFDDCC;
+}
+
+body{
+	margin: auto;
+}
+
+h1,h2,h3{
+	margin: .5em;
+	font-family: "Noto Serif", serif;
+}
+
+p{
+	font-size: .95em;
+	padding-left: 3%;
+	padding-right: 3%;
+}
+
+a{
+	color: #FFC400;
+	text-decoration: none;
+}
+a:hover{
+	color: #FFF400;
+}
+
+img{
+	width: 100%;
+	border-radius: 3px;
+}
+
+hr{
+	color: #AA9988;
+}
+
+header{
+	text-align: center;
+	font-size: .9em;
+}
+header i{
+	font-size: .6em;
+	font-weight: normal;
+	display: none;
+}
+
+nav{
+	text-align: center;
+	color: #998877;
+}
+nav a{
+	font-size: 1.03em;
+	padding-left: 1%;
+	padding-right: 1%;
+}
+nav i{
+	font-size: .85em;
+	color: #FFAA77;
+	padding-left: 1%;
+	display: none;
+}
+
+main{
+	padding-top: 3%;
+	padding-bottom: 5%;
+}
+
+figure{
+	border: 3px solid rgba(0,0,0,.0);
+	max-width: 400px;
+	margin: 5% auto;
+}
+figcaption{
+	text-align: center;
+	background-color: rgba(255,200,200,.2);
+	border-radius: 3px;
+	margin-bottom: 5px;
+	text-shadow: 3px 3px 8px #000000;
+}
+aside{
+	font-size: 1.3em;
+	text-align: center;
+	border-radius: 3px;
+	margin-bottom: 5px;
+}
+
+footer{
+	position: fixed;
+	bottom: 0;
+	width: 100%;
+	font-size: .8em;
+	font-family: "Noto Serif", serif;
+	background-color: #300000;
+	text-align: center;
+}
+footer p{
+	margin: 1%;
+	text-shadow: 3px 3px 8px #FFAA77;
+}
+
+.btn{
+	background-color: #330033;
+	color: #FFC400;
+	border: none;
+	font-size: 1.1em;
+	padding: 2px 3px;
+	display: inline-block;
+	border-radius: 3px;
+	box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2), 0 3px 5px 0 rgba(222,180,120,.9);
+}
+.btn:hover{
+	color: #FFF400;
+	box-shadow: 0 8px 15px 0 rgba(0,0,0,0.2), 0 5px 8px 0 rgba(255,222,22,22.19);
+}
+nav .btn:nth-child(1){
+	color: #DFC400;
+	font-size: 1.05em;
+}
+nav .btn:nth-last-child(-n+3){
+	color: #DFC400;
+	font-size: 1.05em;
+}
+
+@media screen and (min-width:600px),print{
+	.grid{
+		display: grid;
+		grid-template-columns: auto auto;
+		grid-gap: 0px;
+	}
+	aside{
+		grid-column: 1 / span 2;
+	}
+
+	body{
+		width: 95%;
+	}
+	header{
+		width: 90%;
+	}
+	nav{
+		width: 95%;
+	}
+	footer{
+		width: 95%;
+	}
+
+	.btn{
+		font-size: 1.2em;
+		padding: 3px 5px;
+	}
+
+	.col{
+		position: fixed;
+		width: 40%;
+		height: 100%;
+	}
+	#left{
+		left: 0;
+		padding-left: 8%;
+	}
+	#right{
+		right: 0;
+		padding-right: 8%;
+	}
+}
+
+@media screen and (min-width:900px),print{
+	body{
+		width: 85%;
+	}
+	header{
+		width: 80%;
+	}
+	header i{
+		display: inline;
+	}
+	nav{
+		width: 85%;
+	}
+	nav i{
+		display: inline;
+	}
+	footer{
+		width: 85%;
+	}
+
+	.col{
+		position: fixed;
+		width: 30%;
+	}
+	#left{
+		padding-left: 18%;
+	}
+	#right{
+		padding-right: 18%;
+	}
+}