* {
    /* For visualization purposes: comment out (or delete) the line below to hide the dashed outlines */
    outline: 1px dashed #ddd;

    /* This includes any border and padding in an element's total width! */
    box-sizing: border-box;
}

/* CSS Variables */

:root {
    --font-sans-serif: system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --primary-color: #450084;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --body-color: #212529;
    --body-bg: #fff;
    --btn-color: #ffffff;
}

/* Example of using the variables */

body {
    font-family: var(--font-sans-serif);
    color: var(--body-color);
    background-color: var(--body-bg);
    margin: 0;
}

/* Styles for headings */

h1, h2, h3 {
    margin: 0;
    font-weight: 500;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

/* Buttons styles for you */

.btn {
    display: inline-block;
    color: var(--btn-color);
    padding: 0.5rem 1rem;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
}

.btn:hover {
    filter: brightness(90%);
}

.btn:active {
    filter: brightness(80%);
}

/* Provided for you */

.text-center {
    text-align: center;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* TODO Part 2a: Rows and columns */

.row {

}

.col-md-1 {

}

.col-md-3 {

}

.col-md-4 {

}

.col-md-6 {

}

.col-md-12 {

}

/* TODO Part 2b: Spacing */

.m-0 {

}

.m-3 {

}

.p-0 {

}

.p-3 {

}

/* TODO Part 2c: Buttons */

.btn-primary {

}

.btn-secondary {

}

.btn-success {

}

/* TODO Part 3: Responsive Design */