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

.text-bold {
    font-weight: bold;
}


/* Base styles for the grid */
.container {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    flex-grow: 1;
    width: 100%;
}

.row {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    justify-content: space-around;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

/* Extra small devices (phones, less than 576px) */
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }

/* Small devices (tablets, 576px and up) */
@media (min-width: 576px) {
    .col-sm-1 { width: 8.33%; }
    .col-sm-2 { width: 16.66%; }
    .col-sm-3 { width: 25%; }
    .col-sm-4 { width: 33.33%; }
    .col-sm-5 { width: 41.66%; }
    .col-sm-6 { width: 50%; }
    .col-sm-7 { width: 58.33%; }
    .col-sm-8 { width: 66.66%; }
    .col-sm-9 { width: 75%; }
    .col-sm-10 { width: 83.33%; }
    .col-sm-11 { width: 91.66%; }
    .col-sm-12 { width: 100%; }
}

/* Medium devices (desktops, 768px and up) */
@media (min-width: 768px) {
    .col-md-1 { width: 8.33%; }
    .col-md-2 { width: 16.66%; }
    .col-md-3 { width: 25%; }
    .col-md-4 { width: 33.33%; }
    .col-md-5 { width: 41.66%; }
    .col-md-6 { width: 50%; }
    .col-md-7 { width: 58.33%; }
    .col-md-8 { width: 66.66%; }
    .col-md-9 { width: 75%; }
    .col-md-10 { width: 83.33%; }
    .col-md-11 { width: 91.66%; }
    .col-md-12 { width: 100%; }
}

/* Large devices (large desktops, 992px and up) */
@media (min-width: 992px) {
    .col-lg-1 { width: 8.33%; }
    .col-lg-2 { width: 16.66%; }
    .col-lg-3 { width: 25%; }
    .col-lg-4 { width: 33.33%; }
    .col-lg-5 { width: 41.66%; }
    .col-lg-6 { width: 50%; }
    .col-lg-7 { width: 58.33%; }
    .col-lg-8 { width: 66.66%; }
    .col-lg-9 { width: 75%; }
    .col-lg-10 { width: 83.33%; }
    .col-lg-11 { width: 91.66%; }
    .col-lg-12 { width: 100%; }
}

/* Width in 10 steps */
.w-100 { width: 100%; }
.w-90 { width: 90%; }
.w-80 { width: 80%; }
.w-70 { width: 70%; }
.w-60 { width: 60%; }
.w-50 { width: 50%; }
.w-40 { width: 40%; }
.w-30 { width: 30%; }
.w-20 { width: 20%; }
.w-10 { width: 10%; }

/* Small devices (tablets, 576px and up) */
@media (min-width: 576px) {
    .w-sm-100 { width: 100%; }
    .w-sm-90 { width: 90%; }
    .w-sm-80 { width: 80%; }
    .w-sm-70 { width: 70%; }
    .w-sm-60 { width: 60%; }
    .w-sm-50 { width: 50%; }
    .w-sm-40 { width: 40%; }
    .w-sm-30 { width: 30%; }
    .w-sm-20 { width: 20%; }
    .w-sm-10 { width: 10%; }
}

/* Medium devices (desktops, 768px and up) */
@media (min-width: 768px) {
    .w-md-100 { width: 100%; }
    .w-md-90 { width: 90%; }
    .w-md-80 { width: 80%; }
    .w-md-70 { width: 70%; }
    .w-md-60 { width: 60%; }
    .w-md-50 { width: 50%; }
    .w-md-40 { width: 40%; }
    .w-md-30 { width: 30%; }
    .w-md-20 { width: 20%; }
    .w-md-10 { width: 10%; }
}

/* Large devices (large desktops, 992px and up) */
@media (min-width: 992px) {
    .w-lg-100 { width: 100%; }
    .w-lg-90 { width: 90%; }
    .w-lg-80 { width: 80%; }
    .w-lg-70 { width: 70%; }
    .w-lg-60 { width: 60%; }
    .w-lg-50 { width: 50%; }
    .w-lg-40 { width: 40%; }
    .w-lg-30 { width: 30%; }
    .w-lg-20 { width: 20%; }
    .w-lg-10 { width: 10%; }
}


/* Small devices (phones, less than 576px) */
@media only screen and (max-width: 576px) {
    body {
        font-size: 1.2em;
    }
}

/* Medium devices (tablets, 576px and up) */
@media only screen and (min-width: 576px) and (max-width: 768px) {
    body {
        font-size: 1.1em;
    }
}

/* Large devices (desktops, 768px and up) */
@media only screen and (min-width: 768px) {
    body {
        font-size: 1em;
    }
}