body{
    background: bisque
    
}
h3 span{
    color: red;
}
nav{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
background-color: bisque;
position: sticky;
top: 1;
}
nav ul{
    display: flex;
    list-style-type: none;
}
nav ul li{
margin-left: 30px;
cursor: pointer;
border-bottom: 1px solid bisque;
}
nav ul li:hover{
    border-bottom-color: black;   
}
.page-content{
    margin: 4%;
}
.page-content header{
    margin-top: 5%;
    max-width: 80%;
}
@media screen and(max-width:500px){
   nav{
    justify-content: center;
   }
   nav ul{
    display: none;
   }
   }
  .container{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
  }
  .container .card{
    position: relative;
    width: 220px;
    height: 250px;
    background-color: bisque;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .container .card .percent{
    position: relative;
    width: 150px;
    height: 150px;
  }
  .container .card .percent svg{
    position: relative;
    width: 150px;
    height: 150px;
  }
  .container .card .percent svg circle{
    width: 100%;
    height: 100%;
    fill: transparent;
    stroke-width: 10;
    stroke: rgb(206, 175, 175);
    transform: translate(6px, 6px);
  }
  .container .card .percent svg circle:nth-child(2){
    stroke: rgb(238, 12, 12);
    stroke-dasharray: 400;
    stroke-dashoffset: calc(440 - (440 * var(--num)) /100);
  }
  .container .card .percent svg circle:nth-child(3){
    stroke: rgb(238, 12, 12);
    stroke-dasharray: 400;
    stroke-dashoffset: calc(440 - (440 * var(--num)) /100); 
  }
  .number{
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .number h2{
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 1em;
    color: brown;
  }
  
  .number p{
    font-weight: 600;
    font-size: 1em;
    line-height: 2px;
    color: brown;
  }