styles.css

body {
  height: 100%;
  align-items:center;
  display:flex;
  justify-content:center;
  height:100%;
  background:hsl(47, 88%, 63%);

}


.container {
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  position:absolute;
  display:block;
  justify-content:center;
  background:white;
  border-radius:.75rem;
  border:1px black solid;
  box-shadow: 6px 6px black;
  width:240px;
  height:340px;

}

img {
  margin:15px;
max-width: 90%;
max-height: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius:0.65rem;
  
  
}

.one {
  display:inline-flex;
  justify-content:center;
}

 .learning
{
  font-size:16px;
  font-family:Figtree;
  line-height:0.9rem;
}

.learning2 {
  background:hsl(47, 88%, 63%);
  line-height:50%;
  text-align:center;
  width:65px;
  height:20px;
  border-radius:.20rem;
  top:40px;
  margin-left:15px;
  font-weight:900;
  font-size:10px;
  line-height:1.4rem;
  margin: 0 15px 0 15px;
 
}
.p1 {
  text-align:left;
  font-size:10px;
  margin: 0 15px 0 15px;
  font-family:Figtree;
  font-weight:500;
  letter-spacing:.0001rem;
  position:relative;
  top:-2px;
  
}

h1 {
  text-align:left;
  font-size:16px;
  margin: 0 15px 0 15px;
  font-family:Figtree;
  font-weight:800;
}

.p2  {
  text-align:left;
  font-size:10px;
  margin: 0 15px 0 15px;
  font-family:Figtree;
  color:hsl(0, 0%, 50%);
}

.footer {
  margin: 0 15px 0 15px;
  display:inline-flex;
  align-items:center;
  margin-right:15px;
 
}

.icon {
  width:20px;
  display:inline-flex;
  margin-right:7px;
}

.p3 {
    font-family:Figtree;
    font-size:10px;
    font-weight:800;
}


/* <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 300 to 900*/

.figtree-<uniquifier> {
  font-family: "Figtree", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;