.container {
     max-width: 1100px;
     margin: 0px auto;
     padding: 0px 40px;
     overflow: auto;
}
.card {
     background-color: var(--white-color);
     color: var(--black-color);
     border-radius: 10px;
     box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
     margin: 10px;
     padding: 20px;
}
.button {
     display: inline-block;
     padding: 10px 30px;
     cursor: pointer;
     background-color: var(--primary-color);
     color: var(--white-color);
     border: none;
     border-radius: 5px;
}
.button:hover {
     transform: scale(0.98);
}
.button-outline {
     background-color: transparent;
     border: 1px solid var(--white-color);
}
.button-primary,.background-primary {
     background-color: var(--primary-color);
     color: var(--white-color);
}
.button-secondary,.background-secondary {
     background-color: var(--secondary-color);
     color: var(--white-color);
}
.button-dark,.background-dark {
     background-color: var(--dark-color);
     color: var(--white-color);
}
.button-light,.background-light {
     background-color: var(--light-color);
     color: var(--black-color);
}
.background-primary a,.button-primary a,.background-secondary a,.button-secondary a,.background-dark a,.button-dark a {
     color: var(--white-color);
}
.text-primary {
     color: var(--primary-color);
}
.text-secondary {
     color: var(--secondary-color);
}
.text-dark {
     color: var(--dark-color);
}
.text-light {
     color: var(--light-color);
}
.text-center {
     text-align: center;
}
.lead {
     font-size: 20px;
}
.extraLarge {
     font-size: 4rem;
}
.large {
     font-size: 3rem;
}
.medium {
     font-size: 2rem;
}
.small {
     font-size: 1rem;
}
.alert {
     background-color: var(--light-color);
     margin: 15px 0px;
     padding: 10px 20px;
     font-weight: bold;
}
.alert i {
     margin-right: 10px;
}
.alert-success {
     background-color: var(--success-color);
     color: var(--white-color);
}
.alert-error {
     background-color: var(--error-color);
     color: var(--white-color);
}
.flex {
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
}
.grid {
     height: 100%;
     display: grid;
     grid-template-columns: repeat(2,1fr);
     gap: 20px;
     align-items: center;
     justify-content: center;
}
.grid-3 {
     grid-template-columns: repeat(3,1fr);
}
.m-1 {
     margin: 1rem;
}
.m-2 {
     margin: 1.5rem;
}
.m-3 {
     margin: 2rem;
}
.m-4 {
     margin: 3rem;
}
.m-5 {
     margin: 4rem;
}
.my-1 {
     margin: 1rem 0rem;
}
.my-2 {
     margin: 1.5rem 0rem;
}
.my-3 {
     margin: 2rem 0rem;
}
.my-4 {
     margin: 3rem 0rem;
}
.my-5 {
     margin: 4rem 0rem;
}
.p-1 {
     padding: 1rem;
}
.p-2 {
     padding: 1.5rem;
}
.p-3 {
     padding: 2rem;
}
.p-4 {
     padding: 3rem;
}
.p-5 {
     padding: 4rem;
}
.py-1 {
     padding: 1rem 0rem;
}
.py-2 {
     padding: 1.5rem 0rem;
}
.py-3 {
     padding: 2rem 0rem;
}
.py-4 {
     padding: 3rem 0rem;
}
.py-5 {
     padding: 4rem 0rem;
}