/* Reset default styles for all elements */
* {
    /* Reset default margin and padding */
    margin: 0;
    padding: 0;
    /* Reset default box-sizing to border-box for all elements instead of content-box */
    box-sizing: border-box;
}

/* Root variables for color scheme to provide easy customization */
:root {
    --main-bg-color: #1b1b32;
    --light-grey: #f5f6f7;
    --dark-purple: #5a01a7;
    --golden-yellow: #feac32;
}

/* Basic styles for the page */
body {
    /* Set the background color to the main background color variable */
    background-color: var(--main-bg-color);
    /* Center the content horizontally */
    text-align: center;
}

/* Styles for the title */
.title {
    /* Set the color to the light grey variable */
    color: var(--light-grey);
    /* Margin to add space above and below the title */
    margin: 20px 0;
}

/* Styles for the author container */
#author-container {
    /* Set the display to flex to create a flex container */
    display: flex;
    /* Allow flex items to wrap to the next row if necessary */
    flex-wrap: wrap;
    /* Justify content to center the flex items horizontally */
    justify-content: center;
}

/* Styles for each user card */
.user-card {
    /* Set the border radius to create rounded corners */
    border-radius: 15px;
    /* Set the width and height of the card */
    width: 300px;
    height: 350px;
    /* Set the background color to the light grey variable */
    background-color: var(--light-grey);
    /* Margin to add space around the card in all directions */
    margin: 20px;
}

/* Styles for the user image */
.user-img {
    /* Set the width and height of the image equal to 150px by 150px to create a square */
    width: 150px;
    height: 150px;
    /* Set the object fit to cover to ensure the image fills the entire card */
    object-fit: cover;
}

/* Styles for the purple divider */
.purple-divider {
    /* Set the background color to the dark purple variable */
    background-color: var(--dark-purple);
    /* Set the width of the divider to 100% of the parent element */
    width: 100%;
    height: 15px;
}

/* Styles for the author name element */
.author-name {
    /* Set the margin to add space around the author name in all directions */
    margin: 10px;
}

/* Styles for the bio element */
.bio {
    /* Set the margin to add space around the bio in all directions */
    margin: 20px;
}

/* Styles for the error message element */
.error-msg {
    /* Set the color to the light grey variable */
    color: var(--light-grey);
}

/* Styles for the button element */
.btn {
    /* Set the cursor to pointer to indicate that the button can be clicked */
    cursor: pointer;
    /* Set the width of the button to 200px */
    width: 200px;
    /* Set the margin to add space around the button in all directions */
    margin: 10px;
    /* Set the color to the main background color variable */
    color: var(--main-bg-color);
    /* Set the font size to 14px */
    font-size: 14px;
    /* Set the background color to the golden yellow variable */
    background-color: var(--golden-yellow);
    /* Set the background image to a linear gradient between the golden yellow and orange variables */
    background-image: linear-gradient(#fecc4c, #ffac33);
    /* Set the border color to the golden yellow variable */
    border-color: var(--golden-yellow);
    /* Set the border width to 3px to create a thicker border */
    border-width: 3px;
}