.container{
 margin: 0 auto;
 overflow: auto;
 padding: 0 40px;
 max-width: 1100px;
}

.card{ 
 background-color: #fff;
 border-radius: 10px;
 box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
 padding: 20px;
 color: #333;
 margin: 10px;
}

.btn{
 display: inline-block;
 cursor: pointer; 
background-color: crimson;
 padding: 10px 30px;
 color: #fff;
 border: none;
 border-radius: 5px;
}
.btn-outline{
 background: transparent;
 color: #fff;
 border: 1px solid#fff;
}

.btn:hover{
 transform: scale(1.1);
} 

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

.alert{
  background: var(--light-color);
  padding: 10px 20px;
  font-weight: bold;
  margin: 15px 0;
}

.alert i{
  margin-right: 10px;
}
.alert-success{
background: var(--success);
color: whitesmoke;
}

.alert-error{
background: var(--error);
color: whitesmoke;
}

code,pre{
  background: #333;
  color: whitesmoke;
  padding: 10px;
}

.flex{
 display: flex;
 justify-content: center;
align-items: center;
height: 100%;

}

.grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.grid-3{
 grid-template-columns: repeat(3, 1fr );
}


/* margin */
.my-1{
 margin: 1rem 0;
}

.my-2{
 margin: 1.5rem 0;
}

.my-3{
 margin: 2rem 0;
}

.my-4{
 margin: 3rem 0;
}

.my-5{
 margin: 4rem 0;
}

.m-1{
 margin: 1rem;
}

.m-2{
 margin: 1.5rem; 
}

.m-3{
 margin: 2rem;
}

.m-4{
 margin: 3rem;
}

.m-5{
 margin: 4rem;
}


/* padding */

.py-1{
 padding: 1rem 0;
}

.py-2{
 padding: 1.5rem 0;
}

.py-3{
 padding: 2rem 0;
}

.py-4{
 padding: 3rem 0;
}

.py-5{
 padding: 4rem 0;
}

.p-1{
 padding: 1rem;
}

.p-2{
 padding: 1.5rem; 
}

.p-3{
 padding: 2rem;
}

.p-4{
 padding: 3rem;
}

.p-5{
 padding: 4rem;
}


/* background colors */

.bg-primary,
.btn-primary{
background-color: crimson;
 color: cornsilk;
}

.bg-secondary,
.btn-secondary{
 background-color: var(--secondary-color);
  color: cornsilk;
}
 
.bg-dark,
.btn-dark{
 background-color: crimson;
 color: cornsilk;
}
 
.bg-light,
.btn-light{
 background-color: var(--light-color);
 color: #333;
}

/* text sizes */

.lead{
 font-size: 20px;
}

.sm{
 font-size: 1rem;
}

.md{
font-size: 2rem;
}

.lg{
 font-size: 3rem;
}

.xl{
 font-size: 4rem;
}


.bg-dark a,
.btn-dark a,
.bg-secondary a,
.btn-secondary a,
.bg-primary a,
.btn-primary a{
color: cornsilk ;
}