diff --git a/html/style.css b/html/style.css
index c706f00..deab577 100644
--- a/html/style.css
+++ b/html/style.css
@@ -2,25 +2,57 @@
font-family: 'Amaranth', sans-serif;
}
+@keyframes bg-gradient {
+ 0% {
+ background-position: 0% 50%;
+ }
+ 50% {
+ background-position: 100% 50%;
+ }
+ 100% {
+ background-position: 0% 50%;
+ }
+}
+@keyframes fadeIn {
+ 0% {opacity:0;}
+ 10% {opacity:0.4;}
+ 50% {opacity:0.8}
+ 100% {opacity:1;}
+ }
+
body {
- background: #3e3f57
+ background: linear-gradient(-45deg, #349ef0, #7a4abe, #349ef0);
+ background-size: 400% 400%;
+ animation: bg-gradient 15s ease infinite;
}
p {
- color:#b5b7eb;
+ color:#b5b7eb;
+ animation: fadeIn ease-out 0.8s;
}
h1 {
- position:relative;
- left:80px;
- color:#b5b7eb;
+ position:relative;
+ left:80px;
+ color:#b5b7eb;
+ animation: fadeIn ease-out 0.8s;
}
button {
- background-color: #515357;
- color: #a0b4db;
- border-radius: 5px;
- padding: 3px 1%
+ background-color: rgba(255,255,255,0.3);
+ color: #232f42;
+ border: 2.5px solid #6186c2;
+ border-radius: 10px;
+ padding: 5px 13px;
+ margin-bottom: 6px;
+ transition-duration: 0.45s;
+ animation: fadeIn ease-out 0.8s;
+}
+
+button:hover {
+ background-color:rgba(0,0,0,0.2);
+ border: 2.5px solid #81a1d6;
+ color: #9dade3;
}
a:link {
@@ -36,6 +68,13 @@ header {
justify-content: space-between;
align-items: center;
padding: 15px 10%;
+ background: linear-gradient(-45deg, #626ce0, #349ef0, #626ce0);
+ background-size: 400% 400%;
+ animation: bg-gradient 15s ease infinite;
+ border-radius:100px;
+ border: linear-gradient(90deg, rgba(52,158,240,1) 0%, rgba(74,87,191,1) 100%);
+ border: 10px solid #4f71b0;
+ animation: fadeIn ease-out 0.8s;
}
.logo {
@@ -49,23 +88,14 @@ header {
.nav__links button {
display: inline-block;
padding: 10px 10px;
+ border: 0px solid #6186c2;
+ background-color: rgba(0, 0, 0, 0);
+ font-size: 20px;
+ color: #b5b7eb;
}
-.nav__links li a {
- transition: all 0.3s ease 0s;
-}
-
-.nav__links li a:hover {
- color:
-}
-
-.divider {
- width:5px;
- height:auto;
- display:inline-block;
-}
-.divide {
- margin-left:100px;
+.nav__links button:hover {
+ color: #ffffff;
}
@@ -73,5 +103,3 @@ p1 {
font-size: 1.75em;
color:#b5b7eb;
}
-
-