style.css

/* Global Styles */
body {
    font-family: 'Roboto Mono', monospace;
    background-color: #1e1e1e; /* Dark terminal background */
    color: #c5c8c6; /* Light grey text */
    margin: 0;
    padding: 20px; /* Added padding for more space around content */
}

* {
    box-sizing: border-box; /* Ensures padding and border are included in element's total width and height */
}

/* Button Styles */
button {
    background-color: #50fa7b; /* Terminal green */
    border: none;
    color: black; /* Black text on green */
    padding: 10px 20px; /* Adjusted padding */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    border-radius: 3px; /* Slightly rounded for terminal-like buttons */
    cursor: pointer;
}

button:hover {
    background-color: #44475a; /* Dark hover effect */
    color: #ffffff; /* White text on hover */
}

/* Textbox Styles */
input {
    border: 2px solid #6272a4; /* Terminal-themed border color */
    background-color: #1e1e1e; /* Match body background */
    color: #f8f8f2; /* Light terminal text */
    padding: 10px 14px; /* Adjusted padding */
    font-size: 14px; /* Match button font size */
    width: calc(100% - 48px); /* Full width minus padding */
    max-width: 300px; /* Max width for better layout control */
    border-radius: 3px; /* Consistent with buttons */
    outline: none; /* Remove default outline */
}

input[type="text"]:focus {
    border-color: #50fa7b; /* Green border on focus */
    box-shadow: 0 0 4px rgba(80, 250, 123, 0.5); /* Greenish shadow */
}

/* Example Container for Alignment */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* Reduced space between elements */
    margin: 20px auto; /* Centered container with auto margins */
    max-width: 600px; /* Set a max width for better layout control */
}

/* Code Block Styles */
.code-block {
    color: #f8f8f2; /* Light text */
    background-color: #282a36; /* Terminal-like dark background */
    border: 1px solid #44475a; /* Soft border color */
    border-radius: 3px;
    padding: 10px;
    font-family: monospace; /* Terminal look */
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 14px; /* Adjusted for readability */
}

/* Ensure monospace for all pre and code elements */
pre, code {
    font-family: monospace;
}

a {
    color: #8be9fd; /* Light blue links */
    text-decoration: none;
}

a:hover {
    color: #ffffff; /* White hover */
}

.centered_img {
    align-self: center;
}

/* Grid Layout */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.grid-item {
    background-color: #282a36; /* Dark background for tiles */
    border: 2px solid #44475a; /* Subtle border */
    padding: 20px;
    border-radius: 8px;
    color: #c5c8c6; /* Light grey text */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Tile hover effect */
.grid-item:hover {
    transform: translateY(-5px); /* Lift on hover */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

/* Title Style */
.site-title {
    text-align: center;
    color: #50fa7b; /* Bright green title */
    margin-top: 20px;
}

/* Footer */
footer {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 2px solid #44475a;
    color: #c5c8c6;
}

footer a {
    color: #8be9fd; /* Light blue links */
    text-decoration: none;
}

footer a:hover {
    color: #ffffff; /* White hover */
}

.full-width {
    grid-column: 1 / -1; /* Span the full row */
    color: #ffffff;
    font-size: 1.5em; /* Optional: make it stand out more */
    text-align: center;
    padding: 30px; /* Larger padding for a banner-like look */
    border-radius: 8px; /* Rounded corners for consistency */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}

.large-tile-vertical {
    grid-row: span 2; /* Spans 2 rows */
}

.large-tile-horizontal {
    grid-column: span 2; /* Spans 2 columns */
}

.me {
    border-radius: 50%;
}