Skip to content

Commit

Permalink
Update styles.css
Browse files Browse the repository at this point in the history
  • Loading branch information
ThatSINEWAVE committed May 20, 2024
1 parent 22c8646 commit 714795d
Showing 1 changed file with 121 additions and 122 deletions.
243 changes: 121 additions & 122 deletions styles.css
Original file line number Diff line number Diff line change
@@ -1,200 +1,199 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-image: url('images/background.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
min-height: 100vh;
display: flex;
flex-direction: column;
color: #ddd;
font-family: Arial, sans-serif;
line-height: 1.6;
background-image: url('images/background.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
min-height: 100vh;
display: flex;
flex-direction: column;
color: #ddd;
}

header {
background-color: rgba(30, 31, 34, 0.8);
color: #fff;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
top: 0;
z-index: 1;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background-color: rgba(30, 31, 34, 0.8);
color: #fff;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
top: 0;
z-index: 1;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

.header-buttons {
display: flex;
gap: 10px;
display: flex;
gap: 10px;
}

.header-buttons a {
background-color: #950101;
color: #fff;
display: flex;
align-items: center;
gap: 5px;
padding: 8px 12px;
border-radius: 5px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
text-decoration: none;
background-color: #950101;
color: #fff;
display: flex;
align-items: center;
gap: 5px;
padding: 8px 12px;
border-radius: 5px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
text-decoration: none;
}

.header-buttons a:hover {
background-color: #620000;
background-color: #620000;
}

main {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}

.container {
background-color: rgba(30, 31, 34, 0.9);
padding: 2rem;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
max-width: 500px;
width: 100%;
text-align: center;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background-color: rgba(30, 31, 34, 0.9);
padding: 2rem;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
max-width: 500px;
width: 100%;
text-align: center;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

label {
display: inline-block;
margin-bottom: 0.5rem;
font-weight: bold;
color: #ddd;
display: inline-block;
margin-bottom: 0.5rem;
font-weight: bold;
color: #ddd;
}

input[type="number"] {
padding: 0.5rem;
border: 1px solid #ccc;
background-color: #3c3c3c;
border-radius: 3px;
margin-left: 0.5rem;
margin-bottom: 1rem;
border: none;
color: #ddd;
padding: 0.5rem;
border: 1px solid #ccc;
background-color: #3c3c3c;
border-radius: 3px;
margin-left: 0.5rem;
margin-bottom: 1rem;
border: none;
color: #ddd;
}

input[type="checkbox"] {
margin-right: 0.5rem;
vertical-align: middle;
accent-color: #950101;
margin-right: 0.5rem;
vertical-align: middle;
accent-color: #950101;
}

.input-group {
display: flex;
align-items: center;
margin-bottom: 10px;
display: flex;
align-items: center;
margin-bottom: 10px;
}

.input-group label {
margin-right: 10px;
flex: 0 0 auto;
margin-right: 10px;
flex: 0 0 auto;
}

.input-group input {
flex: 1;
flex: 1;
}

button {
background-color: #950101;
color: #fff;
border: none;
padding: 0.5rem 1rem;
border-radius: 3px;
cursor: pointer;
margin: 0.5rem 0;
transition: background-color 0.3s ease;
background-color: #950101;
color: #fff;
border: none;
padding: 0.5rem 1rem;
border-radius: 3px;
cursor: pointer;
margin: 0.5rem 0;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #620000;
background-color: #620000;
}

#output {
margin-top: 1rem;
text-align: center;
margin-top: 1rem;
text-align: center;
}

#output textarea {
width: 100%;
height: 150px;
padding: 0.5rem;
font-size: 1rem;
border: none;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.1);
color: #ddd;
resize: none;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
width: 100%;
height: 150px;
padding: 0.5rem;
font-size: 1rem;
border: none;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.1);
color: #ddd;
resize: none;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

#output textarea:focus {
outline: none;
box-shadow: 0 0 10px rgba(149, 1, 1, 0.5);
outline: none;
box-shadow: 0 0 10px rgba(149, 1, 1, 0.5);
}

#output p {
margin-bottom: 0.5rem;
color: #ddd;
font-weight: bold;
margin-bottom: 0.5rem;
color: #ddd;
font-weight: bold;
}

#output textarea::-webkit-scrollbar {
width: 8px;
width: 8px;
}

#output textarea::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0.1);
border-radius: 4px;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 4px;
}

#output textarea::-webkit-scrollbar-thumb {
background-color: rgba(149, 1, 1, 0.5);
border-radius: 4px;
background-color: rgba(149, 1, 1, 0.5);
border-radius: 4px;
}

#output textarea::-webkit-scrollbar-thumb:hover {
background-color: rgba(149, 1, 1, 0.7);
background-color: rgba(149, 1, 1, 0.7);
}

footer {
background-color: rgba(30, 31, 34, 0.8);
color: #fff;
padding: 1rem;
text-align: center;
position: sticky;
bottom: 0;
backdrop-filter: blur(10px);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
-webkit-backdrop-filter: blur(10px);
background-color: rgba(30, 31, 34, 0.8);
color: #fff;
padding: 1rem;
text-align: center;
position: sticky;
bottom: 0;
backdrop-filter: blur(10px);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
-webkit-backdrop-filter: blur(10px);
}

.footer-content {
display: center;
justify-content: space-between;
align-items: center;
}

display: center;
justify-content: space-between;
align-items: center;
}

0 comments on commit 714795d

Please sign in to comment.