style.css

body{
    background: #fdf2e9;
    font-family: 'Roboto Condensed', sans-serif;
     font-size: 18px;
 }
 
 .backpage1{
     background: #e6e3e1;
 }
 .backpage2{
     background: rgb(245, 232, 232);
 }
 .backpage3{
     background: #b9e7e1;
 }
 .imgback{
     background: rgb(238, 178, 178);
     border-radius: 30%;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 .nav-item a::after {
     content: '';
     display: block;
     width: 0px;
     height: 2px;
     background: rgb(245, 228, 0);
     transition: 1s
 }
 
 .nav-item a:hover::after {
     width: 100%;
 }
 .hovering_card {
     transition: all ease 0.5s;
 }
 
 .hovering_card:hover {
   
     top: -15px;
 }
 .hovering_img {
     --s: 250px;   /* the size of the image */
     --b: 8px;     /* the border thickness*/
     --g: 14px;    /* the gap */
     --c: rgb(245, 228, 0); /* the color */
     
     width: var(--s);
     aspect-ratio: 1;
     outline: calc(var(--s)/2) solid #0009;
     outline-offset: calc(var(--s)/-2);
     cursor: pointer;
     transition: 0.5s;
  
 }
 
 .hovering_img:hover {
   
     outline: var(--b) solid var(--c);
   outline-offset: var(--g);
 }
 .backpage4{
     background: #ff7a06;
 }
 .backpage5{
     background-image: linear-gradient( to right bottom, rgba(235, 151, 78, 0.35), rgba(230, 125, 34, 0.35) ), url(Images5/cta.jpg);
     background-size: cover;
     background-position: center;
 }