@font-face {
    font-family: "Berkley Mono";
    src: url(/fonts/berkley/BerkeleyMono-Regular.woff);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Berkley Mono";
    src: url(/fonts/berkley/BerkeleyMono-Bold.woff);
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "Urbanist";
    src: url(/fonts/urbanist/Urbanist-Regular.woff2);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Urbanist";
    src: url(/fonts/urbanist/Urbanist-Thin.woff2);
    font-weight: 100;
    font-style: normal;
}

body {
    margin: 0;
    padding: 0;
    background-color: #111517;
    color: white;
    font-family: 'Urbanist', sans-serif;
    letter-spacing: 0.1em;
    height: 100%; /* Make sure the html and body take up the full height of the viewport */
    display: flex; /* Use flexbox to center the content */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

html {
    height: 100%; /* Make sure the html and body take up the full height of the viewport */
    display: flex; /* Use flexbox to center the content */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

h1 {
    margin: 0;
    font-weight: bold;
    color: #007aff;
}

#name {
    font-family: 'Berkley Mono', monospace;
}

#role {
    font-family: 'Urbanist', sans-serif;
    letter-spacing: 0.1em;
    line-height: 0.1;
}

#description {
    font-family: 'Urbanist', sans-serif;
    font-weight: lighter;
}

#description a[href] {
    color: white; /* Sets the hyperlink text color to white */
    text-decoration: underline dotted; /* Adds a dotted underline */
    text-decoration-color: white; /* Sets the underline color to white */
}

.content {
    padding: 20px 20px 0;
    max-width: 800px;
    margin: auto;
}

.container {
    display: flex;
}

.button-container {
    display: flex;
    flex-direction: row; /* Set direction of flex items as row */
    justify-content: flex-start; /* Aligns the buttons to the left */
    flex-wrap: wrap; /* Allows buttons to wrap onto the next line if the container is too small */
    margin: 0;
    border: 0;
    padding: 0
}

.button {
    color: white; /* White text */
    padding: 0 5px 0 0;
    margin: 0 5px 5px 0; /* Space around buttons except for the left side */
    text-decoration: none;
    font-size: 16px; /* Text size */
    border: none; /* No border */
    cursor: pointer; /* Pointer cursosr on hover */
    font-weight: lighter;
}

/* Optional: if you want to ensure that the container takes full width */
.button-container {
    width: 100%;
}

.button:after {
    content: '↗'; /* The space before the arrow is intentional to add some separation */
    padding-left: 5px;
    display: inline; /* Makes the pseudo-element stay close to the text */
    text-decoration: none;
    font-family: 'Berkley Mono', Courier, monospace;
    font-size: 16px; /* Match the font size of the button or adjust as needed */
    line-height: 1; /* Ensures the arrow is vertically aligned with the button text */
    pointer-events: none; /* Makes sure the pseudo-element does not interfere with clicking the link */
}