diff --git a/CNAME b/CNAME deleted file mode 100644 index 7545a9c..0000000 --- a/CNAME +++ /dev/null @@ -1 +0,0 @@ -beta.nymbus.xyz \ No newline at end of file diff --git a/Scripts.js b/Scripts.js deleted file mode 100644 index 18367e0..0000000 --- a/Scripts.js +++ /dev/null @@ -1,73 +0,0 @@ -window.isUpdateAvailable = new Promise(function(resolve, reject) { -// lazy way of disabling service workers while developing - if ('serviceWorker' in navigator && ['localhost', '127'].indexOf(location.hostname) === -1) { - // register service worker file - navigator.serviceWorker.register('service-worker.js') - .then(reg => { - reg.onupdatefound = () => { - const installingWorker = reg.installing; - installingWorker.onstatechange = () => { - switch (installingWorker.state) { - case 'installed': - if (navigator.serviceWorker.controller) { - // new update available - resolve(true); - } else { - // no update available - resolve(false); - } - break; - } - }; - }; - }) - .catch(err => console.error('[SW ERROR]', err)); - } -}); - -window['isUpdateAvailable'] - .then(isAvailable => { - if (isAvailable) { - const toast = this.toastCtrl.create({ - message: 'New Update available! Reload the webapp to see the latest juicy changes.', - position: 'bottom', - showCloseButton: true, - }); - toast.present(); - } - }); - - -if( navigator.userAgent.match(/Android/i) - || navigator.userAgent.match(/webOS/i) - || navigator.userAgent.match(/iPhone/i) - || navigator.userAgent.match(/iPad/i) - || navigator.userAgent.match(/iPod/i) - || navigator.userAgent.match(/BlackBerry/i) - || navigator.userAgent.match(/Windows Phone/i)) { - window.location.href = 'mobile/index.html'; -} - - -function pswdgen() { -var prt1 = prompt('Please type in a word. Recomended length is 2-3 sylables'); -if (prt1 == null) { - return; -} - -var prt2 = prompt('Please type in another word'); -if (prt2 == null) { - return; -} -var prt3 = prompt('Please type in one more word'); -if (prt3 == null) { - return; -} -var num = Math.floor(Math.random() * 99) + 1; -alert('Your new password is: ' + prt1 + prt2 + prt3 + num + ' Please enter this into a password manager to remeber it.'); -} - - - - - diff --git a/breach.html b/breach.html deleted file mode 100644 index d3b187a..0000000 --- a/breach.html +++ /dev/null @@ -1,49 +0,0 @@ - - - - - - - - - - - - - - - - - Security Services - - - - Nymbus Security Services - - - -
-

Password Managers

-
- - - -
-

Breach Checker

-
- - -
-
- - - diff --git a/breachicon.png b/breachicon.png new file mode 100644 index 0000000..02fe59a Binary files /dev/null and b/breachicon.png differ diff --git a/donate.html b/donate.html index a5b4a41..0dab54c 100644 --- a/donate.html +++ b/donate.html @@ -1,38 +1,61 @@ - - - - Nymbus Donate - - - - -
-

Donate

-
-

If you enjoy this app, then consider donating! At the moment, we are only taking crypto donations, but we are working on setting up other ways of donation that will be available soon.

-
-

Dogecoin

-

DJjhuWY6iR9MHHpVgntRn8ciVcLsWX48Ee

-
-
-

Bitcoin

-

13NbnAWLb4m8UMSWGPQLZoZZZj33CNA6Ui

-
-
-

Paypal

-

Coming Soon...

-
-
-
- - - + + + + + + + + + + + + + + + + + + Donate + + + + +
+ +
+
+

Donate

+

If you enjoy this app, then consider donating!

+
+
+
+
+

Dogecoin

+

DJjhuWY6iR9MHHpVgntRn8ciVcLsWX48Ee

+
+
+
+

Bitcoin

+

13NbnAWLb4m8UMSWGPQLZoZZZj33CNA6Ui

+
+
+
+

Buy Me a Coffee!

+
+ + Buy me a coffeeBuy me a coffee +
+
+
+
+ +
+ + diff --git a/icon1.png b/icon1.png index 8beb8d2..8f57095 100644 Binary files a/icon1.png and b/icon1.png differ diff --git a/index.html b/index.html index dfa2ba9..d5d2d9a 100644 --- a/index.html +++ b/index.html @@ -1,35 +1,66 @@ - - - - - - - - - - - - - - - - - Nymbus Home - - - - - -
- -
- - - - -
- -
- - - + + + + + + + + + + + + + + + + + + Password Checker + + + + +
+ +
+
+

{{passphrase}}

+ + + + +
+
+
+

Why this is important

+

A strong password helps keep your accounts and devices safe, so having a strong password is important.

The best password is a password with a few random words clumped together, with a number to add some more variety. This type of password is not only strong, but easy to remember.

+
+
+
+
+
+
+

Password tips

+

-Avoid reusing passwords.
If your password is compromised on one account, it can be used to access other accounts that use the same password. Using different passwords for different accounts can help keep this from happening.

-Use a password manager.
This can help you keep track of different passwords for multiple accounts. All you need to remember is one secure password to access the password manager, and you can use autofill to log into your accounts.

-Use 2FA or OTP.
This adds a second layer of security to your accounts, which uses a one time password to protect your account. This is done either through an authenticator app, text messages, or even a physical USB key if you want to invest in one.

+
+
+
+ +
+ + + \ No newline at end of file diff --git a/manifest.json b/manifest.json index 25bc99f..5154454 100644 --- a/manifest.json +++ b/manifest.json @@ -1,6 +1,6 @@ { - "background_color": "#1c77c3ff", - "theme_color": "#1c77c3ff", + "background_color": "#002e58", + "theme_color": "#002e58", "display": "standalone", "icons": [ { @@ -15,7 +15,7 @@ "purpose": "any maskable" } ], - "name": "Nimbus Security", - "short_name": "Nimbus", + "name": "Nymbus Security", + "short_name": "Nymbus", "start_url": "index.html" } diff --git a/mobile/privacy.html b/mobile/privacy.html deleted file mode 100644 index 4bcf10b..0000000 --- a/mobile/privacy.html +++ /dev/null @@ -1,66 +0,0 @@ - - - - - - - - - - - - - - - - - Privacy Tools - - - - - - -
- -
-
-

Privacy Services

-
-

Mail

-
- - - -
-
- -
-

Social Networks

-
- - - -
-
- -
-
-
-
-
- - - - -
-
- - diff --git a/mobile/privicon.png b/mobile/privicon.png deleted file mode 100644 index c36dfaa..0000000 Binary files a/mobile/privicon.png and /dev/null differ diff --git a/mobile/security.html b/mobile/security.html index 7194dd2..0508957 100644 --- a/mobile/security.html +++ b/mobile/security.html @@ -43,7 +43,7 @@
-
+
+
+

VPNs

+ + + +
+
+

About VPNs

+
+

VPNs (Virtual Private Networks) are tools used to secure your web traffic and make you more anonymous against trackers. They route your internet traffic through an encrypted tunnel to a server of your choosing. This encrypts your internet connection, thus keeping your data safe. It also hides your real IP address by sending your web traffic through a server, making it harder to track you.

+
+
+
+
diff --git a/nimbus.png b/nimbus.png deleted file mode 100644 index 0378bec..0000000 Binary files a/nimbus.png and /dev/null differ diff --git a/passicon.png b/passicon.png new file mode 100644 index 0000000..c2a0c78 Binary files /dev/null and b/passicon.png differ diff --git a/privacy.html b/privacy.html deleted file mode 100644 index 5417802..0000000 --- a/privacy.html +++ /dev/null @@ -1,40 +0,0 @@ - - - - Nymbus Privacy Services - - - - -
-

Mail

-
- - - -
-

Search Engines

-
- - - -
-

Social Networks

-
- - - -
-
- - - diff --git a/pswdgen.html b/pswdgen.html deleted file mode 100644 index 907a38a..0000000 --- a/pswdgen.html +++ /dev/null @@ -1,52 +0,0 @@ - - - - - - - - - - - - - - - - - - Nymbus Password Generator - - - - - - -
-
-

{{passphrase}}

- - - - - -
-
- - diff --git a/questions.html b/questions.html new file mode 100644 index 0000000..cef6bc4 --- /dev/null +++ b/questions.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + Scam Checker + + + + + + +
+ +
+
+
+

Was the email sent by a person or a company?

+ + +
+
+
+ + + diff --git a/resultN.html b/resultN.html new file mode 100644 index 0000000..42f1b98 --- /dev/null +++ b/resultN.html @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + Not a scam! + + + + +
+ +
+
+

Probably not a scam!

+

There's a good chance this isn't a scam! Just to be on the safe side, its a good idea to double check.

+
+
+
+

What to do now

+

Double check with the guidelines below just to be on the safe side. +

+
+
+
+
+
+
+

How to spot scams

+

Spotting scam emails, even the most convincing ones, is easier than you'd think. One way to check if an email is a scam is to look at the email address. If the email is from a company like Facebook or Google, check the extension (part after the @) and see if it matches the website's url. For example, if it is from facebook, then check to see if the email address ends in "facebook.com" or "*any word*.facebook.com. If it's different (like facebook.social) then it's a scam. If it's an email from within your own company or school, then check if the extension matches your work or school email. And if it's from a person, make sure it's actually the person they say they are. If it's someone you don't know, or you don't have a way to confirm, be careful. If they're asking for banking info, login info, or any other peronal info, then DON'T GIVE IT TO THEM!

+
+
+
+
+ + \ No newline at end of file diff --git a/resultS.html b/resultS.html new file mode 100644 index 0000000..7351459 --- /dev/null +++ b/resultS.html @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + It's a scam! + + + + +
+ +
+
+

It's a scam!

+

There's a good chance this is a scam! Don't click on any of the links or files attatcked to this email!

+
+
+
+

What to do now

+

If the sender was pretending to be a friend or a coworker, then let them know so you can double check that if for sure wasn't them, and they can let others who might have gotten the email that it's a scam. If it’s from a company like Facebook or Google, check that you or your friends or family haven’t gotten or fallen for this email. DELETE THIS EMAIL! If you or someone else has fallen for a scam, change your passwords and make sure nothing unusual has happened in your bank accounts or online accounts. +

+
+
+
+
+
+
+

How to spot scams

+

Spotting scam emails, even the most convincing ones, is easier than you'd think. One way to check if an email is a scam is to look at the email address. If the email is from a company like Facebook or Google, check the extension (part after the @) and see if it matches the website's url. For example, if it is from facebook, then check to see if the email address ends in "facebook.com" or "*any word*.facebook.com. If it's different (like facebook.social) then it's a scam. If it's an email from within your own company or school, then check if the extension matches your work or school email. And if it's from a person, make sure it's actually the person they say they are. If it's someone you don't know, or you don't have a way to confirm, be careful. If they're asking for banking info, login info, or any other peronal info, then DON'T GIVE IT TO THEM!

+
+
+
+
+ + \ No newline at end of file diff --git a/scam.html b/scam.html new file mode 100644 index 0000000..4697ead --- /dev/null +++ b/scam.html @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + Scam Checker + + + + + + +
+ +
+
+

Scam Checker

+

This tool will take information from any email to determine whether or not an email is a scam or not.

+ +
+
+
+

How this works

+

This takes information from the email you received to determine if it is a scam. It uses info like the sender’s email, and checks it against other emails from companies in our database, or an email from your workplace if its from a coworker. It will then offer tips to avoid falling for scams to make them easier to spot in the future.

+
+
+
+
+
+
+ + diff --git a/scamicon.png b/scamicon.png new file mode 100644 index 0000000..d1bb3a7 Binary files /dev/null and b/scamicon.png differ diff --git a/script.js b/script.js new file mode 100644 index 0000000..c79a60e --- /dev/null +++ b/script.js @@ -0,0 +1,102 @@ +document.getElementById("next").addEventListener("click", personCompany); + +function personCompany(){ + document.getElementById("next").removeEventListener("click", personCompany); + if (document.getElementById("answer").value == "Person" || document.getElementById("answer").value == "person"){ + document.getElementById("question").innerHTML = "Do you know the person who sent this email?"; + document.getElementById("answer").placeholder = "Yes or No"; + document.getElementById("next").addEventListener("click", knowPerson); + } + else if (document.getElementById("answer").value == "Company" || document.getElementById("answer").value == "company"){ + document.getElementById("question").innerHTML = "Do you work for this company?"; + document.getElementById("answer").placeholder = "Yes or No"; + document.getElementById("next").addEventListener("click", yourCompany); + } + document.getElementById("answer").value = ""; +} +//Stuff for the person section +function knowPerson(){ + document.getElementById("next").removeEventListener("click", knowPerson); + if (document.getElementById("answer").value == "Yes" || document.getElementById("answer").value == "yes"){ + document.getElementById("question").innerHTML = "Are you certain this email is from this person? Maybe contact them through another means of communication if possible to ask."; + document.getElementById("next").addEventListener("click", doubleCheck); + } + else if (document.getElementById("answer").value == "No" || document.getElementById("answer").value == "no"){ + document.getElementById("question").innerHTML = "Is this email regarding something you were expecting an email about?"; + document.getElementById("next").addEventListener("click", expectingEmail); + } + document.getElementById("answer").value = ""; +} + +function doubleCheck(){ + document.getElementById("next").removeEventListener("click", doubleCheck); + if (document.getElementById("answer").value == "Yes" || document.getElementById("answer").value == "yes"){ + window.location.href = "resultN.html"; + } + else if (document.getElementById("answer").value == "No" || document.getElementById("answer").value == "no"){ + window.location.href = "resultS.html"; + } +} + + +function expectingEmail(){ + document.getElementById("next").removeEventListener("click", expectingEmail); + if (document.getElementById("answer").value == "Yes" || document.getElementById("answer").value == "yes"){ + window.location.href = "resultN.html"; + } + else if (document.getElementById("answer").value == "No" || document.getElementById("answer").value == "no"){ + window.location.href = "resultS.html"; + } +} + +//stuff for the company section +var CheckEmail = ""; +var trustedExtensions = ["facebook.com", "google.com", "microsoft.com", "instagram.com", "twitter.com", "apple.com"] +function yourCompany() { + document.getElementById("next").removeEventListener("click", yourCompany); + if (document.getElementById("answer").value == "Yes" || document.getElementById("answer").value == "yes"){ + document.getElementById("question").innerHTML = "What is the extension of your work email address? (The part after the '@')"; + document.getElementById("answer").placeholder = "Enter work email extension"; + document.getElementById("next").addEventListener("click", getWorkEmail); + } + else if (document.getElementById("answer").value == "No" || document.getElementById("answer").value == "no"){ + document.getElementById("question").innerHTML = "Please enter the extension of the sender's email address (The part after the '@')"; + document.getElementById("answer").placeholder = "Enter sender's email extension"; + document.getElementById("next").addEventListener("click", checkExtension); + } + document.getElementById("answer").value = ""; +} + +function getWorkEmail() { + document.getElementById("next").removeEventListener("click", getWorkEmail); + CheckEmail = document.getElementById("answer").value; + document.getElementById("question").innerHTML = "Please enter the extension of the sender's email address (The part after the '@')"; + document.getElementById("answer").placeholder = "Enter sender's email extenion"; + document.getElementById("next").addEventListener("click", checkExtension); + document.getElementById("answer").value = ""; +} + +function checkExtension() { + document.getElementById("next").removeEventListener("click", checkExtension); + var senderEmail = document.getElementById("answer").value; + var match = false; + if (CheckEmail != ""){ + if (CheckEmail == senderEmail){ + match = true; + } + } + else{ + for (i = 0; i < trustedExtensions.length; ++i){ + if (trustedExtensions[i] == senderEmail){ + match = true; + } + } + } + if (match == true){ + window.location.href = "resultN.html"; + } + else if (match == false){ + window.location.href = "resultS.html"; + } +} + diff --git a/security.html b/security.html new file mode 100644 index 0000000..40f00ce --- /dev/null +++ b/security.html @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + + + + Security Tools + + + + + + +
+ +
+
+

Security Services

+
+

Password Managers

+
+ + + +
+
+
+

About Password Managers

+
+

Password managers securely store passwords, and allow you to autofill your information when loging in to an account. This allows you to use different passwords for each of your accounts to keep them more secure.

+
+
+
+
+
+ +
+

VPNs

+ + + +
+
+

About VPNs

+
+

VPNs (Virtual Private Networks) are tools used to secure your web traffic and make you more anonymous against trackers. They route your internet traffic through an encrypted tunnel to a server of your choosing. This encrypts your internet connection, thus keeping your data safe. It also hides your real IP address by sending your web traffic through a server, making it harder to track you.

+
+
+
+
+ +
+ + diff --git a/service-worker.js b/service-worker.js deleted file mode 100644 index e2f0048..0000000 --- a/service-worker.js +++ /dev/null @@ -1,17 +0,0 @@ -self.addEventListener('fetch', event=> { - let response=fetch(event.request); - event.respondWith(response); -}); - -let deferredPrompt; - -self.addEventListener('beforeinstallprompt', (e) => { - // Prevent Chrome 67 and earlier from automatically showing the prompt - e.preventDefault(); - // Stash the event so it can be triggered later. - deferredPrompt = e; -}); - -self.addEventListener('appinstalled', (evt) => { - console.log('a2hs installed'); -}); diff --git a/style.css b/style.css index d789212..3d0d75b 100644 --- a/style.css +++ b/style.css @@ -5,46 +5,206 @@ background-size: cover; margin: 0 auto; } -#tips { -display: block; -margin-top: 10px; -width: 50%; -height: auto; -margin: 0 auto; -margin-bottom: 15px; -border-radius: 15px; +#pswdgen{ +background-image: url("/mobile/passicon.png"); +} + +#mail { + position:relative; + margin-top: 5px; + margin-bottom: 5px; + width: 94%; + margin: 0 auto; + margin-top: 30px; +} + +#search { + position:relative; + margin-top: 5px; + margin-bottom: 5px; + width: 94%; + margin: 0 auto; +} + +#social { + position:relative; + margin-top: 5px; + margin-bottom: 85px; + width: 94%; + margin: 0 auto; +} + +#spacer { + height: 85px; + width: 100%; +} + +#spacer2 { + height: 25px; + width: 100%; +} + +#spacer3 { + height: 55px; + width: 100%; +} + +.app_row { + position:relative; + width: auto; + margin: 0 auto; + margin-bottom: 15px; +} + + +.nav { +position: static; +top: 0; +size: relative; +width: 24%; +height: 70px; +margin-left: 4%; +margin-top: 5px; +margin-right: 4%; +font-size: 15px; +border-width: 0; +border-radius: 50px; background: #003565; box-shadow: inset 5px 5px 6px #002d56, inset -5px -5px 6px #003d74; +text-align: center; +outline: none; +color: white; +} + +.nav-idle{ +position: static; +top: 0; +size: relative; +width: auto; +height: 70px; +margin-left: 4%; +margin-top: 5px; +margin-right: 4%; +font-size: 15px; +border-width: 0; +border-radius: 50px; +background: linear-gradient(145deg, #00305b, #00396c); +box-shadow: 5px 5px 0px #003464, + -5px -5px 0px #003666; +text-align: center; +outline: none; +color: white; +} + +.bmcdiv{ +width: 216px; +margin-left: auto; +margin-right: auto; +} + + #buttons { + width: auto; + display: block; + margin: 0 auto; + margin-left: auto; + } + +.bottom{ + position: fixed; + bottom: 0; + left: 0; + z-index: 9999; + width: 100%; + height: 80px; +background: #003565; +box-shadow: 5px 0px 10px #002d56; +} + +li{ + float: left; + height: 100%; +} + +nav { + height: 100%; +} + +ul{ + list-style-type: none; + overflow: hidden; + margin: 0; + padding: 0; + height: 100%; } .group { position: relative; -top: 0px; +top: 10px; size: relative; -width: 110px; -height: 110px; -margin-left: 5px; -margin-right: 5px; +width: 100%; +height: 80px; +margin-left: auto; +margin-right: auto; +margin-bottom: 20px; font-size: 15px; -border-color: #002e58ff; +text-align: center; +border-color: #00000000; +border-width: 0px; color: white; -border-width: 0; -border-radius: 15px; +border-radius: 50px; background: #003565; box-shadow: 5px 5px 10px #002d56, -5px -5px 10px #003d74; border-style: solid; outline: none; -vertical-align: bottom; } -.group:active{ - border-radius: 15px; +.donate { +top: 10px; +size: relative; +width:20%; +height: 45px; +margin-left: 40%; +margin-right: 40%; +margin-bottom: auto; +margin-top: auto; +font-size: 15px; +text-align: center; +border-color: #00000000; +border-width: 0px; +color: #ebcf34; +border-radius: 50px; +background: #003565; +box-shadow: 5px 5px 10px #002d56, + -5px -5px 10px #003d74; +border-style: solid; +outline: none; +} + +.group:active { + border-radius: 50px; background: #003565; box-shadow: inset 5px 5px 6px #002d56, inset -5px -5px 6px #003d74; - color: #1c77c3; + color: #1c77c3;; + +} + +nav-idle:active { +border-radius: 50px; + background: #003565; + box-shadow: inset 5px 5px 6px #002d56, + inset -5px -5px 6px #003d74; + color: #1c77c3;; +} + +.donate:active { + border-radius: 50px; + background: #003565; + box-shadow: inset 5px 5px 6px #002d56, + inset -5px -5px 6px #003d74; + color: #1c77c3;; } .input { @@ -52,7 +212,7 @@ vertical-align: bottom; position: relative; top: 0px; size: relative; - width: 496px; + width: 100%; height: 80px; margin-left: auto; margin-right: auto; @@ -69,136 +229,129 @@ vertical-align: bottom; text-align: center; } -#main { -height: auto; -margin: 0 auto; -margin-top: 200px; -} - -#main2 { -height: auto; -margin: 0 auto; -margin-top: 50px; -} - -#logo { -display: block; -height: 75px; -margin: 0 auto; -margin-bottom: 10px; -} - -#icons { -display: block; -margin-top: 10px; -width: 496px; -height: auto; -margin: 0 auto; -margin-bottom: 15px; -} - -.icons2 { -display: block; -width: 380px; -height: auto; -margin: 0 auto; -margin-top: 20px; -margin-bottom: 20px; -} - -#top { - position: sticky; - top: 0; - left: 0; - z-index: 9999; - width: 100%; - height: 55px; - background-color: #003565; - box-shaddow: 5px 0px 10px #002d56; -} - -#about { -display: block; -position: relative; -top: 5px; -size: relative; -width: 500px; -height: 80px; -margin-left: auto; -margin-right: auto; -margin-top: 15px; -margin-bottom: 25px; -font-size: 15px; -color: white; -border-color: #003565; -border-width: 0px; -border-radius: 15px; -background: #003565; -box-shadow: 5px 5px 10px #002d56, - -5px -5px 10px #003d74; -border-style: solid; -outline: none; -} - -#about:active { +.tips { + display: block; + position: relative; + top: 0px; + size: relative; + width: 95%; + height: auto; + margin-left: auto; + margin-right: auto; + margin-bottom: 5px; + font-size: 15px; + color: white; + border-color: #003565; + border-width: 10px; border-radius: 15px; background: #003565; box-shadow: inset 5px 5px 6px #002d56, inset -5px -5px 6px #003d74; - color: #1c77c3; + border-style: solid; + outline: none; + text-align: center; } -.title { -text-align: center; -margin: 0 auto; -font-family: Arial; -color: white; -} - -li #topLogo { -height: 45px; -margin-top: 5px; -margin-left: 5px; -margin-right: 5px; +#logo { + display: block; + position: relative; + top: 8px; + height: 34px; + width: auto; + margin-left: 10px; + margin-right: 10px; + border-style: solid; + border-color:#00000000; + margin-top: 0; + border-width:5px; border-radius: 150px; background: #003565; box-shadow: 5px 5px 8px #002d56, -5px -5px 8px #003d74; } -ul { +.search { position: relative; -list-style-type: none; -margin: 0; -padding: 0; -overflow: hidden; -height: 100%; +width: 100%; + height: 55px; + background-color: #4fb9c6ff; } -li { -float: left; -height: 100%; +.top { + position: sticky; + top: 0; + left: 0; + z-index: 9999; + width: 100%; + height: 60px; + margin-bottom: 10px; +background: #003565; +box-shadow: 5px 0px 10px #002d56; + +} +.main{ + width: 65%; + margin: 0 auto; + margin-bottom: 15px; } -li .topButton { -position: relative; -bottom: 0; -width: auto; -height: 100%; -border-style: solid; -border-color: #00000000; +#back { + background-color: #00000000; + color: white; + height: 100%; + border-style: solid; + border-color: #00000000; border-radius: 15px; background: #003565; box-shadow: inset 5px 5px 10px #002d56, inset -5px -5px 10px #003d74; outline: none; +} + +#back:active { +border-radius: 15px; +border-color: #002e58; +background: #1c77c3; +box-shadow: inset 5px 5px 0px #1c77c3, + inset -5px -5px 0px #1c77c3; color: white; } -p { - text-align: center; -margin: 0 auto; -font-family: Arial; -color: white; +h1 { + top: 0; + text-align: center; + margin: 0 auto; + margin-top: 10px; + font-family: Arial; + color: white; +} + +h2 { + top: 0; + text-align: center; + margin: 0 auto; + font-family: Arial; + color: white; +} + +h3 { +top: 0; +text-align: center; +margin: 0 auto; + font-family: Arial; + color: white; +} + +p { + top: 0; + position: relative; + text-align: center; + margin: 0 auto; + font-family: Arial; + color: white; +} + +a { +color: white; +margin: 0 auto; } -