@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Margarine&family=Roboto:ital,wght@0,100..900;1,100..900&family=Satisfy&display=swap');


:root{
    /* ===========font family============= */
    --ff-primary:"Roboto",sans-sherif;
      --ff-secondary:"Inter",sans-sherif;
        --ff-design:"Satisfy",cursive;
          --ff-brand:"Margarine",sans-sherif;
}
/* =================colors============= */
--clr-white:#fff;
--clr-dark:#333;
--clr-grey-1:#102a42;
--clr-grey-2:#617d98;
--clr-grey-3:#f1f5f8;
--clr-primary:#f53b57;
--clr-primary-light:#f04660;
--clr-secondary:#e9b949;

/* =================global css============= */

*{
  margin: 0%;
  padding: 0%;
}
.nav,h2 ,.a{
  display: inline;
}
/* header */
h1{
  text-align: center;
  background-color: #030303;
  font-family:cursive;
  font-weight: bolder;
color: #f53b57;

margin-top: 0%;

}
.pro{
text-align: left;
}

a{
background-color: #030303;
}

.header{
  background-color: aliceblue;
}
.a{
  
 background-color: #030303;
  color: aliceblue;
padding: 8px;
 margin-left: 7px;
 
}
.nav{
 margin-left: 70%;
 margin-bottom: 2%;

}
.a:hover{
  background-color:darkorange;
}

body{

background-color: hsl(33, 100%, 50%);
}

.box{
  border: #000000;
  border-style: solid;
  border-width: 3px;
  display: inline-block;
  background-color: #030303;
  color: aliceblue;
  margin-left: 30px;
  height: 350px;
  width: 250px;
 

}
li{
text-decoration: none;
list-style: none;
text-align: left;
color: #030303;
}
.products{
  text-align: center;
}
table{
  margin-left: 35%;
  margin-top: 50px;
  border-color: black;
  border-style: solid;
  border-width: 3px;
  background-color: #030303;
  color: aliceblue

}
.ro{
  background-color: gainsboro;
  color: #030303;
}

ul{
  background-color: darkgray;
  
}
.f{
  background-color: #030303;
  color: azure;
  margin-top: 10px;
  text-align: center;
}
a{
  text-decoration: none;
  color: azure;

}