@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");

*,
*:after,
*:before {
    box-sizing: border-box;
}

:root {
    --header-outer-height: 110px;
    --header-inner-height: 70px;
    --header-height-difference: calc(var(--header-outer-height) - var(--header-inner-height));
    --header-bg: #121212;
    /* Dark background color */
    --text-color: #fff;
    /* Light text color */
    --code-bg: #2a2a2a;
    /* Dark code block background color */
    --icon-hover-color: #4c2ca4;
    --button-color: #6038cf;
    --button-color-hover: #4c2ca4;
    --info-box-color: #101010;/*#333;*/
}

body {
    font-family: "DM Sans", sans-serif;
    background-color: #1e1e1e;
    /* Dark background color */
    color: var(--text-color);
    line-height: 1.5;
    min-height: 100vh;
    position: relative;
    margin: 0;
}

.cta-button {
    display: inline-block;
    background-color: var(--button-color); /* Choose your desired button color */
    color: #fff;
    padding: 0.5rem 1rem;
    font-size: 1.125rem;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    margin-top: 2rem;
}

.cta-button:hover {
    background-color: var(--button-color-hover); /* Change the hover color if desired */
}

/* Info Boxes */
.info-boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center the boxes horizontally */
    gap: 20px; /* Add spacing between boxes */
}

a {
    color: white;
    text-decoration-color: white;
}