diff --git a/styles/style.css b/styles/style.css index 081d9c6..451fa59 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,6 +1,15 @@ +/* COLOR VARS */ +:root { + --main-bg-color: #aac4ee; + --accent-color: none; + --overlay-color: #027fe59d; + --main-text-color: #016ec7; + --link-color: azure; + --link-visited-color: azure; +} body { - background-color: #aac4ee; - color: #0280e5; + background-color: var(--main-bg-color); + color: var(--main-text-color); font-family: sans-serif; text-align: center; padding-bottom: 60px; /*Footer height*/ @@ -60,7 +69,7 @@ body { } .form-info { - color: #0280e5; + color: var(--main-text-color); font-size: 17px; font-weight: bolder; margin-bottom: 4px; @@ -69,7 +78,7 @@ body { .text-description { display: inline-block; width: 80%; - color: #0280e5; + color: var(--main-text-color); padding-top: 5px; padding-bottom: 5px; margin-left: auto; @@ -85,7 +94,7 @@ body { .lookup-button { background-color: #3c78d8; - color: #f6f5f4; + color: var(--link-color); border: none; border-radius: 18px; font-size: 16px; @@ -104,7 +113,7 @@ body { background-color: #3c78d8; border: none; border-radius: 10px; - color: #f6f5f4; + color: var(--link-color); padding: 7px; margin-bottom: 10px; font-size: 16px; @@ -112,7 +121,7 @@ body { .inlinelink { text-decoration: underline; - color: #3c78d8; + color: var(--link-color); cursor: pointer; } @@ -125,7 +134,7 @@ body { } .sidebar_control { background-color: transparent; - color: whitesmoke; + color: var(--link-color); border: none; font-family: sans-serif; font-size: larger; @@ -144,7 +153,7 @@ body { display: block; max-width: 250px; width: 0; - background-color: navy; + background-color: var(--overlay-color); transition: 0.4s; } #sidebar a { @@ -155,7 +164,7 @@ body { text-decoration: none; text-align: center; font-size: 25px; - color: white; + color: var(--link-color); display: block; white-space: nowrap; transition: 0.5s;