style.css

body{
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    font-family: Arial, Helvetica, sans-serif;
}

.wrapper{
    padding: 1em;
}

.brand{
    font-weight:800;
    font-size: 2em;
}

.compart{
    color: grey;

}





.cards{

    width: 3000px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;

    padding: 1em;
    display: flex;
}

.card{
    color: grey;
    background-color: grey;
    padding:  5px;
    height: fit-content;
    width: 30em;
    margin-right: 10px;
    border-radius: 4px ;
    overflow: hidden;
    margin-top:3em;
    z-index: 0;
}

.card a{
    color: grey !Important;
}

@font-face{
	font-family: arialBlack;
	src: url(./checkout/css/arial-black.ttf) ;
  }

.medium{
    width:15em ;
    transition: all 1s;

}

.medium:hover{
    width: auto;
}

.cardContent{
    padding-left: 1em;
    height: 100%;
}

.cardContent h2{
    color: white !Important;
}

.hover{
    transition: all 1s;
}

.hover:hover{
    transform: scale(1.02);
    color: white;
}

.grow{
    transition: all 1s;
}

.grow:hover{
    filter: invert(1);

}

.sideways{
    transition: all 1s;
}

.sideways:hover{
    width: 90%
}



.btn{
	background-color: rgb(255, 255, 255);
	padding:4px 20px;
    border-radius: 5px;
    border: none;
    font-size: 1.2em;
}

textarea:focus, input:focus{
    outline: none;
}