:root{
    --color1:#FFFFFF;
    --color2:#003366;
    --color3:#FFD700;
    --color4:#4CAF50;
    --color5:red;
    --color6:black;
}
.button1{
    background-image: linear-gradient(to top,var(--color4),var(--color4),var(--color4),var(--color1));
    color:rgb(82, 82, 82);
   box-shadow: 1px 0px 10px .5px var(--color1);
}
.button2{
  background-image: linear-gradient(to top,var(--color2),var(--color2),var(--color2),var(--color1));
  color:var(--color1);
 box-shadow: 1px 0px 10px .5px var(--color1);

}
.button3{
  background-image: linear-gradient(to top,var(--color5),var(--color5),var(--color5),var(--color1));
  color: var(--color1);
  font-weight: 700;
  margin-top: 8px;
}
.button3:active{
  transition: 1s ease;
  transform: scale(1.3);
}

.add-btn{
    padding: 2px 12px;
    font-size: large;
    font-weight: 800;
    color: var(--color2);
    border-radius: 10px;
    box-shadow: 0.2px 0.2px 6px 0.1px black;
    z-index: 99;
}

.add-btn:active{
     transform: scale(.7) !important;
}
.background-color1{
    background-image: linear-gradient(to top left,var(--color2),var(--color2),var(--color2),var(--color1));
}
.background-color2{
    background-image: linear-gradient(to top left,var(--color1),var(--color1),var(--color1),var(--color2));
}
.background-color3{
  background-image: linear-gradient(to left,rgb(82, 82, 158),rgb(82, 82, 158),rgb(228, 136, 228),rgb(228, 136, 228));
  color: white;
}
.text-color2{
    color:var(--color2)
}
.text-color5{
    color:var(--color5)
}


@media (min-width:800px) {
    .box2{
        display: flex;
        place-items: center;
        place-content: center;
        gap: 60px;
    }

    
}

@media (max-width:800px) {
    .box2{
        display: grid;
        place-items: center;
        place-content: center;
    }
 
    
}


  /*hover animation*/
  .sparkle:hover {
    cursor: pointer;
  }
  
  .u-hover--sparkle {
    box-sizing: border-box;
    position: relative;
    padding: 0.75em;
  }
  .u-hover--sparkle::before, .u-hover--sparkle::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transform-origin: center;
  }
  .u-hover--sparkle::before {
    border-top: 0.2em solid var(--color5);
    border-bottom: 0.2em solid var(--color5);
    transform: scale3d(0, 1, 1);
  }
  .u-hover--sparkle::after {
    border-left: 0.2em solid var(--color5);
    border-right: 0.2em solid var(--color5);
    transform: scale3d(1, 0, 1);
  }
  .u-hover--sparkle:hover::before, .u-hover--sparkle:hover::after {
    transform: scale3d(1, 1, 1);
    transition: transform 900ms;
  }
/*
1.background-white
2.header and footer dark blue
3.primary button highlite gold
4.secondary buttons links green
*/
*{
    margin: 0px;
    padding: 0px;
    font-family: "Noto Sans", sans-serif;
}