1 files changed, 110 insertions, 139 deletions

diff --git a/css/website.css b/css/website.css
index c784443..48ae34a 100644
--- a/css/website.css
+++ b/css/website.css
@@ -1,33 +1,4 @@
-html {
-    color: rgba(220,220,220);
-    background-color: #141516;
-    background-size: 40px 40px;
-    background-image: radial-gradient(circle, #242424 1px, rgba(0, 0, 0, 0) 1px);
-}
-
-body {
-    min-height: 100vh;
-	font-family: 'Inter';
-	line-height: 1.7;
-	margin: 0;
-    display: flex;
-    flex-direction: column;
-}
-
-.center {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    margin-top: -20px;
-} 
-
-.content {
-    width: 900px;
-    max-width: 95vw;
-}
-
+/* text styleing */
 img {
     max-width: 100%;
 }
@@ -45,7 +16,6 @@ code {
     padding: 5px;
 }
 
-/* for large code blocks */
 pre {
     overflow-x: auto;
 }
@@ -54,19 +24,10 @@ h1 {
 	line-height: normal;
 	font-size: 300%;
 	color: #de6b15;
-    /* text-shadow: 0 0 70px #c76317; */
-}
-
-.h1t {
-    margin-top: 20px;
-    font-size: 500%;
-    margin-bottom: 0px;
-    /* text-align: center; */
 }
 
 h2 {
 	font-size: 200%;
-    /* text-shadow: 0 0 50px #8d8d8d; */
 }
 
 h3 {
@@ -83,21 +44,11 @@ a:hover {
 	text-decoration: none;
 }
 
-.date {
-	margin: 10px;
-    text-align: center;
-}
-
-.datebox
-{
-    padding-top: 40px;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-self: center;
+li {
+    padding: 2px 0px;
 }
 
-/* icon/button stuff */
+/* icon */
 @font-face {
     font-family: 'Material Symbols Rounded';
     font-style: normal;
@@ -107,139 +58,159 @@ a:hover {
 
 .icon {
     font-family: 'Material Symbols Rounded';
+    user-select: none;
+}
+
+/* Structure */
+html {
+    color: rgba(220,220,220);
+    background-color: #141516;
+    background-size: 40px 40px;
+    background-image: radial-gradient(circle, #242424 1px, rgba(0, 0, 0, 0) 1px);
 }
 
-.iconbutton {
+body {
+    min-height: 100vh;
+	font-family: 'Inter';
+	line-height: 1.7;
+	margin: 0;
     display: flex;
-    flex-shrink: 0;
-    justify-content: center;
-    align-items: center;
-    margin: 10px;
-    border-radius: 100px;
-    width: 40px;
-    height: 40px;
-    border-width: 0px;
-    background-color: #272a2c;
-    color: white;
-    font-size: 20px;
-    text-align: center;
-    user-select: none;
+    flex-direction: column;
 }
 
-.iconholder {
+.center {
+    flex-grow: 1;
     display: flex;
-    flex-shrink: 0;
+    flex-direction: row;
     justify-content: center;
     align-items: center;
-    margin: 10px;
-    border-radius: 100px;
-    width: 40px;
-    height: 40px;
-    border-width: 0px;
-    /* background-color: #272a2c; */
-    color: rgb(133, 133, 133);
-    font-size: 20px;
-    text-align: center;
-    user-select: none;
-}
+    margin-top: 20px;
+} 
 
-.iconbutton:hover {
-    color: rgba(255, 255, 255, 0.5);
-    background-color: #272a2c85;
+.content {
+    width: 900px;
+    max-width: 95vw;
+    padding-bottom: 20px;
 }
 
-.wrlabel
-{
+.footer {
     display: flex;
-    margin: 5px 0px;
-    border-width: 0px;
-    background-color: transparent;
-    height: 40px;
-    font-size: 20px;
-    padding: 0px 10px;
-    align-items: center;
     justify-content: center;
+    margin: 40px;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    margin: 40px;
 }
 
-.wrbox
+/* Buttons */
+.roundedButton
 {
+    text-wrap: nowrap;
     background-color: rgba(0, 0, 0, 0.411);
     display: flex;
     flex-direction: row;
-    align-self: center;
     border-radius: 500px;
+    gap: 10px;
+    padding: 8px 20px;
 }
 
-.wrbutton
+.roundedButton:hover
 {
-    z-index: 1;
-    margin: 5px;
-    background-color: transparent;
-    border-radius: 100%;
-}
-
-.wrbutton:hover {
-    background-color: #0000004d;
+    background-color: rgba(0, 0, 0, 0.788);
 }
 
-.glow {
-animation: reveal 1.7s forwards;
-animation-delay: .5s;
+.transparentButton
+{
+    display: flex;
+    flex-direction: row;
+    border-radius: 500px;
+    gap: 10px;
+    padding: 8px 20px;
 }
 
-.h2t.glow {
-    animation-delay: 1s;
+.links
+{
+    flex-wrap: wrap;
+    display: flex;
+    gap: 15px;
 }
 
-@keyframes reveal {
-from {
-    text-shadow: 0 0 0px transparent;
-}
-to {
-    text-shadow: 0 0 100px;
+/* mobile */
+@media only screen 
+and (max-device-width: 900px)
+{
+.header
+{
+    margin: 10px;
+}    
+.footer
+{
+    margin: 10px;
 }
+.h1t 
+{
+    font-size: 300%;
 }
 
-body {
-visibility: hidden;
-animation: reveal2 1s forwards;
 }
 
+/* animation */
+
 @keyframes reveal2 {
 from {
     opacity: 0;
 }
 to {
-    visibility: visible;
+    visibility: inherit;
+    
 }
 }
 
-.footer {
-    display: flex;
-    justify-content: center;
-    margin: 40px;
+.anim1,body {
+    animation-delay: 0s;
+    visibility: hidden;
+    animation: reveal2 .5s forwards;
+    }
+
+.anim2,.content {
+    visibility: hidden;
+    animation: reveal2 .5s forwards;
+    animation-delay: 300ms;
 }
 
-.header {
-    display: flex;
-    justify-content: left;
-    margin: 40px;
+.anim3 {
+    visibility: hidden;
+    animation: reveal2 .5s forwards;
+    animation-delay: 450ms;
 }
 
-.header .wrlabel {
-    margin-right: 10px;
+.anim4 {
+    visibility: hidden;
+    animation: reveal2 .5s forwards;
+    animation-delay: 600ms;
 }
 
-@media only screen 
-and (max-device-width: 900px)
-{
-.header
-{
-    margin: 10px;
-}    
-.h1t 
-{
-    font-size: 300%;
+.anim5 {
+    visibility: hidden;
+    animation: reveal2 .5s forwards;
+    animation-delay: 750ms;
+}
+
+.anim6 {
+    visibility: hidden;
+    animation: reveal2 .5s forwards;
+    animation-delay: 900ms;
+}
+
+/* home page only */
+.h1t {
+    font-size: 500%;
+    margin: 0px;
 }
 
-}
\ No newline at end of file
+.h2t {
+    margin: 15px 5px;
+}