body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
}

header, footer {
  background-color: #333;
  color: white;
  padding: 10px;
  text-align: center;
}
header a{
  color:white;
}
.container{
  display:flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.gradient-box {
    min-width: 280px;
    min-height: 160px;
    border-radius: 3%;
    padding: 10px;
    margin: 10px;
    text-align: center;
    color: black;
    box-shadow: 9px 6px 19px -5px rgba(0,0,0,0.43);
  }
 .gradient-box-bottom-to-top{
  background: linear-gradient(to top, #2e22c3, #17a21f);
  }
  .gradient-box-left-to-right{
  background: linear-gradient(to right, #2e22c3, #17a21f);
  }
.gradient-box-top-to-bottom{
  background: linear-gradient(to bottom, #2e22c3, #17a21f);
} 
.gradient-box-right-to-left{
  background: linear-gradient(to left,  #2e22c3, #17a21f);
}
.gradient-box-bottom-right-to-top-left{
  background: linear-gradient(to top left,  #2e22c3, #17a21f);
 }
.gradient-box-top-left-to-bottom-right{
  background: linear-gradient(to bottom right,  #2e22c3, #17a21f);
 }
.gradient-box-bottom-right-to-top-right{
  background: linear-gradient(to top right,  #2e22c3, #17a21f);
 }
.gradient-box-top-left-to-bottom-left{
  background: linear-gradient(to bottom left,  #2e22c3, #17a21f);
 }