/* Import Fonts */
/* Added Inter font in HTML */
:root {
--primary-bg: #1a1a2e; /* Dark blue */
--secondary-bg: #162447; /* Slightly lighter blue */
--accent-color-1: #e94560; /* Pinkish red */
--accent-color-2: #0f3460; /* Darker blue for contrast */
--text-color: #e0e0e0; /* Light gray/white */
--input-bg: #1f4068; /* Input background */
--border-color: #1f4068;
--button-hover-encrypt: #c73451;
--button-hover-decrypt: #134f85;
--button-hover-clear: #5a5a5a;
--grid-cell-bg: #0f3460;
--grid-cell-border: #162447;
--grid-text: #f5f5f5;
--success-color: #4CAF50;
--error-color: #f44336;
/* Updated primary font to Inter */
--font-primary: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
body {
font-family: var(--font-primary);
background-color: var(--primary-bg);
color: var(--text-color);
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: flex-start; /* Align to top */
min-height: 100vh;
line-height: 1.6;
}
.container {
background-color: var(--secondary-bg);
padding: 30px 40px;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
width: 100%;
max-width: 700px;
text-align: center;
}
h1 {
color: var(--accent-color-1);
margin-bottom: 30px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.key-icon {
font-size: 1.5em;
margin-right: 10px;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-8px);}
60% {transform: translateY(-4px);}
}
h2 {
color: var(--text-color);
margin-top: 25px;
margin-bottom: 10px;
border-bottom: 1px solid var(--accent-color-2);
padding-bottom: 5px;
text-align: left;
font-size: 1.2em;
}
.input-group, .output-group {
margin-bottom: 20px;
text-align: left;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: var(--text-color);
}
input[type="text"],
textarea {
width: 100%;
padding: 12px 15px;
border: 1px solid var(--border-color);
border-radius: 6px;
background-color: var(--input-bg);
color: var(--text-color);
font-family: var(--font-mono);
font-size: 1rem;
box-sizing: border-box; /* Include padding in width */
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
input[type="text"]:focus,
textarea:focus {
border-color: var(--accent-color-1);
box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.3); /* Adjusted shadow color */
outline: none;
}
textarea {
resize: vertical; /* Allow vertical resizing */
}
textarea[readonly] {
background-color: #2a2a4a; /* Slightly different bg for readonly */
cursor: not-allowed;
}
.controls {
display: flex;
justify-content: center;
gap: 15px; /* Spacing between buttons */
margin-bottom: 30px;
flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}
.button {
padding: 12px 25px;
border: none;
border-radius: 6px;
color: #ffffff;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.1s ease;
display: inline-flex; /* Align icon and text */
align-items: center;
gap: 8px; /* Space between icon and text */
font-family: var(--font-primary); /* Using primary font for buttons */
}
.button .icon {
font-size: 1.2em;
}
.encrypt-btn {
background-color: var(--accent-color-1);
}
.encrypt-btn:hover {
background-color: var(--button-hover-encrypt);
transform: translateY(-2px);
}
.decrypt-btn {
background-color: var(--accent-color-2);
}
.decrypt-btn:hover {
background-color: var(--button-hover-decrypt);
transform: translateY(-2px);
}
.clear-btn {
background-color: #6c757d; /* Gray */
}
.clear-btn:hover {
background-color: var(--button-hover-clear);
transform: translateY(-2px);
}
#playfair-square-container {
margin-top: 30px;
}
.playfair-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
gap: 5px;
width: 250px; /* Fixed width */
height: 250px; /* Fixed height */
margin: 15px auto; /* Center the grid */
background-color: var(--secondary-bg);
padding: 10px;
border-radius: 8px;
border: 1px solid var(--grid-cell-border);
}
.grid-cell {
background-color: var(--grid-cell-bg);
color: var(--grid-text);
display: flex;
justify-content: center;
align-items: center;
font-family: var(--font-mono);
font-size: 1.5em; /* Larger font for grid letters */
font-weight: bold;
border-radius: 4px;
border: 1px solid var(--grid-cell-border);
aspect-ratio: 1 / 1; /* Ensure cells are square */
}
.grid-placeholder {
grid-column: 1 / -1; /* Span all columns */
grid-row: 1 / -1; /* Span all rows */
display: flex;
justify-content: center;
align-items: center;
color: var(--text-color);
font-style: italic;
font-family: var(--font-primary); /* Use primary font for placeholder */
padding: 20px;
text-align: center;
background-color: var(--input-bg);
border-radius: 8px;
}
.intermediate-output {
margin-top: 20px;
text-align: left;
}
.intermediate-output h2 {
font-size: 1.1em;
border-bottom: none;
}
#prepared-message {
background-color: var(--input-bg);
color: var(--text-color);
padding: 10px 15px;
border-radius: 6px;
font-family: var(--font-mono);
white-space: pre-wrap; /* Wrap long lines */
word-break: break-all; /* Break long words */
max-height: 150px; /* Limit height */
overflow-y: auto; /* Add scroll if needed */
border: 1px solid var(--border-color);
}
.status {
margin-top: 20px;
font-weight: bold;
min-height: 1.5em; /* Reserve space */
transition: color 0.3s ease;
}
.status.success {
color: var(--success-color);
}
.status.error {
color: var(--error-color);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.container {
padding: 20px;
}
h1 {
font-size: 1.8em;
}
.playfair-grid {
width: 200px;
height: 200px;
}
.grid-cell {
font-size: 1.2em;
}
.controls {
gap: 10px;
}
.button {
padding: 10px 20px;
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
h1 {
font-size: 1.5em;
}
.controls {
flex-direction: column; /* Stack buttons vertically */
align-items: stretch; /* Make buttons full width */
}
.playfair-grid {
width: 180px;
height: 180px;
}
.grid-cell {
font-size: 1em;
}
}