* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    max-width: 100%;
}

.bg-dark {
    background-color: #2B2B2B;
}

.pl-1 {
    padding-left: 1rem;
}

.pl-2 {
    padding-left: 2rem;
}

.pl-3 {
    padding-left: 3rem;
}

.pl-4 {
    padding-left: 4rem;
}

.pl-5 {
    padding-left: 5rem;
}

.p-1 {
    padding: 1rem;
}

.p-2 {
    padding: 2rem;
}

.p-3 {
    padding: 3rem;
}

.p-4 {
    padding: 4rem;
}

.p-5 {
    padding: 5rem;
}

/* Displays */
.d-flex {
    display: flex;
}

.d-block {
    display: block;
}

.d-inline-block {
    display: inline-block;
}

/* Margins */

.mx-auto {
    display: block;
    margin: 0 auto;
}

.mt-1 {
    margin-top: 1rem;
}
.mt-2 {
    margin-top: 2rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

.my-1 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.m-1 {
    margin: 1rem;
}

.m-2 {
    margin: 2rem;
}

.m-3 {
    margin: 3rem;
}

.ml-1 {
    margin-left: 1rem;
}

.ml-2 {
    margin-left: 2rem;
}

.ml-3 {
    margin-left: 3rem;
}

.mr-2 {
    margin-right: 2rem;
}

/* Buttons */
.btn {
    border: none;
    border-radius: 0.75rem 0 0.75rem 0;
    box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.7);
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: opacity 0.2s ease-in-out;
    max-width: 100%;
    font-family: 'Roboto', sans-serif;
}

.btn:hover {
    opacity: 0.8;
}

.btn-primary {
    background-color: #3EB489;
    border: 1px solid #3EB489;
    color: #FFFFFF;
    opacity: 1;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.btn-primary:hover {
    background-color: transparent;
    color: #3EB489;
    opacity: unset;
}

.btn-outline-primary {
    background-color: inherit;
    border: 1px solid #3EB489;
    color: #3EB489;
    opacity: 1;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.btn-outline-primary:hover {
    background-color: #3EB489;
    color: #FFFFFF;
    opacity: unset;
}

.btn-secondary {
    background-color: #adeadb;
    border: 1px solid #adeadb;
    color: #2B2B2B;
    opacity: 1;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.btn-secondary:hover {
    background-color: #2B2B2B;
    color: #adeadb;
    opacity: unset;
}

.btn-outline-secondary {
    background-color: inherit;
    border: 1px solid #adeadb;
    color: #adeadb;
    opacity: 1;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.btn-outline-secondary:hover {
    background-color: #adeadb;
    color: #2B2B2B;
    opacity: unset;
}

.btn:active {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    transform: translateY(0.03rem);
}

/* Widths */
.w-100 {
    width: 100%;
}
.w-75 {
    max-width: 75%;
}
.w-50 {
    width: 50%;
}

.w-25 {
    max-width: 25%;
}

/* Forms */
.form-dark {
    background-color: #2B2B2B;
    border-radius: 0.75rem 0 0.75rem 0;
    box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.7);
    padding: 1.5rem;
}

label {
    font-weight: bolder;
    margin-bottom: 0.5rem;
}

input[type="text"], input[type="password"], input[type="email"], select {
    background-color: #2B2B2B;
    border: none;
    box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.7);
    border-bottom: 2px solid #FFFFFF;
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
    font-size: medium;
    color: #FFFFFF;
    padding: 0.75rem;
    transition: border-bottom 0.2s linear, box-shadow 0.2s linear;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, select:focus {
    border-bottom: 2px solid #3EB489;
    box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.7);
    outline: none;
}

.btn-group {
    display: flex;
    justify-content: space-between;
}

/*
    q: how can i make it so that in the event there is an even number of buttons (2) the top left of the left button will be curved and
    the bottom right of the right button will also be, but when there are an odd number of buttons (3) the middle button will have no
    border radius at all, but the left and right buttons will have the same border radius as the above example?

    a: use the :nth-child() selector to select the middle button and give it a border radius of 0
*/

.btn-group > .btn {
    flex: 1;
    box-shadow: none;
}

.btn-group > .btn:first-child {
    border-radius: 0.3rem 0 0 0;
}

.btn-group > .btn:last-child {
    border-radius: 0 0 0.3rem 0;
}

.input-group {
    display: block;
    margin-top: 1.7rem;
}