1 files changed, 116 insertions, 18 deletions

diff --git a/style.css b/style.css
index 721617f..b122dfc 100644
--- a/style.css
+++ b/style.css
@@ -1,12 +1,18 @@
+:root {
+	--blue: #1414FF;
+}
+
 body {
-	background: linear-gradient(74deg, skyblue, pink 60%, salmon);
+	background: linear-gradient(74deg, skyblue, pink 65%, salmon);
 	padding: 0 12vw;
+	font-size: 1em;
+	font-family: serif, Cousine;
 }
 
 header {
 	display: flex;
 	justify-content: space-evenly;
-	align-content: baseline;
+	align-items: center;
 }
 
 h1::before, h1::after {
@@ -26,17 +32,17 @@ nav {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	justify-content: space-evenly;
+	justify-content: space-between;
 	position: relative;
 	padding: default 3vw;
 	height: 100%;
 }
 
-nav a, nav test {
+nav a, nav sep {
 	display: inline-block;
 }
 
-nav test {
+nav sep {
 	margin: auto 0;
 }
 
@@ -74,7 +80,13 @@ section#presentation {
 }
 
 #id-pic {
-	height: auto;	
+	height: auto;
+	filter: drop-shadow(#ff7676 0 0 20px);
+	transition: filter 1s ease-in;
+}
+
+#id-pic:hover {
+	filter: drop-shadow(#ff7676 0 0 50px);
 }
 
 h1, h2 {
@@ -106,7 +118,7 @@ h1:hover,h2:hover {
 
 .timestamp {
 	position: relative;
-	padding: 4px 15px 4px 35px;
+	padding: 5px 15px 5px 35px;
 	background-color: salmon;
 	display: inline-block;
 	width: auto;
@@ -118,18 +130,20 @@ h1:hover,h2:hover {
 .timestamp::before {
 	position: absolute;
 	content: '';
-	width: 20px;
-	height: 20px;
-	background-color: green;
+	width: 1em;
+	height: 1em;
+	background: green;
 	border-radius: 100%;
 	border: 1px solid #8db600;
-	left: 5px;
-	/*top: 3px;*/
+	left: 7px;
 }
 
 .events {
 	padding-left:35px;
-	display:block;
+	display:flex;
+	flex-direction: row;
+	justify-content: start;
+	align-items: start;
 	position: relative;
 	margin-bottom: 30px;
 }
@@ -159,15 +173,99 @@ h1:hover,h2:hover {
 .event {
 	position: relative;
 	border-radius: 0 15px 0 15px;
-	border: 1px solid gray;
-	transition: all 0.3s ease-in-out;
+	border: 1px solid black;
+	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 	overflow: hidden;
-	padding: 0 2%;
-	max-width: 30vw;
+	padding: 0;
+	width: 25vw;
+	margin: 0 10px;
+	background-color: #fff1d060;
+	box-shadow: 1px 1px black;
+}
+
+.event:hover {
+	box-shadow: 2px 2px rgb(20, 20, 255);
+	transform: translate(-2px, -2px);
+	animation: 1s ease-in-out alternate infinite blue-shift;
+}
+
+.event p {
+	margin: 1em;
+}
+
+.event a {
+	color: #fff1d0;
+}
+
+.event h4 {
+	margin: 0;
+	padding: 1em 0.5em;
+	padding-left: 2.5em;
+	color: #fff1d0;
+	background-color: salmon;
+	border-bottom: 1px solid black;
+}
+
+#labels {
+	position: absolute;
+	right: 0;
+	text-align: right;
+	border-radius: 0 15px 0 15px;
+	border: 1px solid black;
+	padding: 1em;
+	width: 10vw;
+	background-color: #fff1d060;
+	color: #fff1d0;
+}
+
+span.degree, .degree h4 {
+	background-color: #960e29;
+}
+
+div.degree::before {
+	content: "";
+	position: absolute;
+	top: 1em;
+	left: 1em;
+	color: #fff1d0;
+}
+
+span.work, .work h4 {
+	background-color: #960e6d;
+}
+
+div.work::before {
+	content: "󰌢";
+	position: absolute;
+	top: 1em;
+	left: 1em;
+	color: #fff1d0;
+}
+
+span.studies, .studies h4 {
+	background-color: #93370e;
+}
+
+div.studies::before {
+	content: "";
+	position: absolute;
+	top: 1em;
+	left: 1em;
+	color: #fff1d0;
+}
+
+@keyframes blue-shift {
+	from {
+		box-shadow: 2px 2px rgb(20, 20, 255);
+
+	}
+	to {
+		box-shadow: 2px 2px rgb(157, 157, 255);
+	}
 }
 
 footer {
-	font-family: serif, Cousine;
+	font-size: small;
 	text-align: right;
 }