html {
    scroll-behavior: smooth;
    /* box-sizing: border-box; */
   
  }

body {
    /* background: linear-gradient(to bottom, #0066ff 0%, #ff33cc 100%); */
    background-color: #c8d8e4;
    font-size: 200%;
    color: #c8d8e4 ;
}

h1 {
    text-align: center;
    font-weight: bolder;
    font-size: 80px;
    color:#397754;
}

#template {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    justify-items: center;
    padding: 10px;
    margin: 20px;
    margin-right: 10px;
    
  }
  #template > .cards {
    margin-right: 10px;
    /* background: linear-gradient(to bottom, #9900ff 0%, #99ccff 100%); */
    background-color: ;
  
}
#desc {
  border: 5px solid  #52ab98;
  padding: 2px;
  margin-right: 10px;
}

#pro {
    box-shadow: 2px 2px 2px 2px #52ab98;
    
    height: 200px;
    width: 300px;
  }
  #pro:hover {
    box-shadow: 4px 4px 4px 4px #52ab98;
    transition: 0.3s;
  }

p {
  color: #52ab98;

}