body{background: linear-gradient(to right, #ffe1f5 0%, #f2fbeb 75%);
       animation: gradient 10s ease infinite;
  font-size: 17px;
    
    }
h1{
  font-family: 'Russo One';font-size: 22px;
}
#content{
 color: #698271
height: 200px;
width: 400px;
}
.About{
  width:35%;
  height:35%;
}
@keyframes gradient {
 0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
       /*.css-selector {
    background: linear-gradient(343deg, #ffdff4, #edffdf);
    background-size: 400% 400%;

    animation: gradient 11s ease infinite;
}

@keyframes gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
} leaving this just in case.*/
}
/*Insert Loading code here, Use SEPERATE CSS or internal for different pages.*/
/*Use Progress bar code instead of loader, test first before comitting.*/
#bar{
  
}
.green{
  
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 40%;
  border-radius: 5px;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

img {
  border-radius: 5px 5px 0 0;
}

.container {
  padding: 2px 16px;
}