@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&display=swap');

html {
    scroll-behavior: smooth;
    font-family: 'Roboto', sans-serif!important;
}

body{
    background-color: rgb(31 41 55);
}

.card-wrapper {
    background-color: rgb(31 41 55); /* Dark bluish background color */
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* This ensures there are always 4 columns */
    gap: 20px; /* Gap between each card */
    padding: 10px 20px; /* Vertical padding of 10px and horizontal padding of 20px */
    max-width: 1200px; /* Adjust this value based on the desired maximum width including the gap */
    margin: 20px auto; /* Vertical margin of 20px and automatic horizontal margins to center the card-wrapper */
    box-sizing: border-box; /* This ensures padding is included in the total width */
}

@media screen and (max-width: 768px) {
    .card-wrapper {
        grid-template-columns: 1fr; /* Only one column on mobile screens */
        gap: 10px; /* Reduce the gap on mobile for a more compact look */
        padding: 10px; /* Reduce the horizontal padding to fit the screen */
    }
}

code {
    font-family: 'Fira Code', monospace;
    display: inline-block;
    background-color: rgb(34, 45, 61); /* Discord-like gray background */
    border-radius: 0.5rem;
    padding: 2px 10px; /* Spacing inside the code block */
    font-size: 0.9em; /* Adjust as necessary */
    font-weight: 500;
    letter-spacing: -0.5px;
}

code:hover {
    background-color: rgb(42, 55, 73); /* Slightly darker gray background on hover */
    cursor: pointer;
}