popup.css

* {
  margin: 2px;
  box-sizing: border-box;
}

:root{
  --secondary-color:#8989f4;
  --bg-color:#FFFFFF;

  --secondary-color-true: #0cffa1;
  --bg-color-true: #0eb87b;

  --secondary-color-false: #cc4d18;
  --bg-color-false: #ff611e;
}

i{
  font-size: 28px;
}

body{
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-size: 18px;
  font-weight: 400;
  font-style: bold;
  min-width: 400px;
  max-width: 400px;
  min-height: 150px;
  max-height: 400px;
  background-color: var(--bg-color);
}

.HeaderName{
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background-color: var(--secondary-color); 
  border-radius: 6px;
  margin-top: 12px;
  margin-bottom: 12px;
}

.StatusBox{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 125px; 
  background-color: var(--secondary-color); 
  border-radius: 6px;
  margin-bottom: 12px;
  gap:0.5rem
}

.Status{
  display: flex;
  flex-direction: row;
}

.descriptionBox{
  display: flex;
  flex-direction: row;
  padding: 12px;
  min-height: 100px; 
  background-color: var(--secondary-color); 
  border-radius: 6px;
  margin-bottom: 12px;
}

header{
  font-weight: 700;
  display:flex;
  flex-direction: column;
  
}

Button{
  cursor: pointer;
  border: none;
  border-radius: 3%;
  width: 390px;
  padding: 20px 8px;
  font-size: 21px;
  background-color: #bfbfbf;
  margin-bottom: 12px;
}