@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Roboto&display=swap');


html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
}

:root{

  /* font size 14px-18px */
  --step-0-1418: clamp(0.875rem, 0.7727rem + 0.4545vw, 1.125rem);
  --step-1-1418: clamp(1.05rem, 0.9043rem + 0.6477vw, 1.4063rem);
  --step-2-1418: clamp(1.26rem, 1.0563rem + 0.9051vw, 1.7578rem);

  /* font size 12px-15px */
  --step--1-1215: clamp(0.625rem, 0.581rem + 0.1878vw, 0.75rem);
  --step-0-1215: clamp(0.75rem, 0.684rem + 0.2817vw, 0.9375rem);
  --step-1-1215: clamp(0.9rem, 0.8043rem + 0.4085vw, 1.1719rem);

  /* font weight */
  --weight-800:800;

  /* color */
  --grey-whiteish: oklch(0.9672 0 0);
  --grey-fully: oklch(0.6234 0 0);
  --greyish-white: oklch(0.9219 0 0);
  --grey-del: oklch(0.7372 0.0011 197.13);

  /* spacing */
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);

  /* border radius */
  --radius: 10px;
  --radius-form-input:8px;
}

body {
    display: flex;
    justify-content: center;
    /* align-items: center; */
    /* height: 100vh; */
    background-color: var(--grey-whiteish);
    font-family: "Comfortaa", sans-serif;
}

main{
  margin: var(--space-2xs);
  padding: var(--space-s);
  border: #000 solid 2px;
  border-radius: var(--radius);
}

.grid-items-1{
  grid-area: profile;
}

/* -------------------------- Rounded Progress bar css -------------------------- */
.progress-circle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.progress-ring__circle {
    fill: #EEEEEE;
    stroke: #333446;
    stroke-width: 15;
    stroke-linecap: round; /* Rounded edges */
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset 0.5s ease;
}

.progress-circle span {
    position: absolute;
    font-size: 24px;
    font-weight: bold;
    font-family: 'Lato', sans-serif; /* Lato font */
    color: #000; /* Black color */
}
/* ------------------------ end Rounded Progress Bar css ------------------------ */


/* -------------------------- Profile Completeness -------------------------- */
h2{
  font-weight: var(--weight-800);
  padding-block: var(--space-s);
  font-size: var(--step-2-1418);
  display: inline-block;
}

.del-list{
  background-color: var(--greyish-white);
  padding: var(--space-s);
  border-radius: var(--radius);
}

ul li{
  font-weight: var(--weight-800);
  list-style-type: none;
  padding-block: var(--space-3xs);
  font-size: var(--step-0-1418);
}

ul li:not(:last-child){
  color: var(--grey-del);
}
/* -------------------------- end Profile Completeness -------------------------- */


/* ----------------------------- Form Accessible ---------------------------- */
.grid-items-2{
  margin-top: 1rem; /* giving distant between grid-items-1 and grid-items-2 */
  grid-area: form;
}
form{
  display: flex;
  flex-direction: column;
  align-items: center;
}

form label{
  font-size: var(--step-0-1418);
  padding-bottom: .23rem;

}

form label:not(:first-child){
  padding-top: 1rem;
}

form input{
  min-width: 60%;
  padding: var(--space-2xs);
  border: #000 solid 2px;
  border-radius: var(--radius-form-input);
}

form input::placeholder{
  font-size: var(--step-0-1418);
}

.spass{
  margin-top: 1rem;
  /* align-self: flex-start; */
}

.submit-btn{
  margin-top: 1rem;
  min-width: 78%;
  padding: var(--space-2xs);
  border-radius: var(--radius-form-input);
  color: var(--greyish-white);
  background-color: #000;
}

.submit-btn:hover{
  background-color: var(--grey-fully);
}
/* ----------------------------- end Form Accessible ---------------------------- */

.mismatch{
  display: block;
  color: red;
}

.match{
  display: block;
  color: green;
}

.hidden{
  display: none;
}

.list-success{
  margin-left: 2rem;
  color:green;
  font-size: var(--step-0-1215);

}

.list-failed{
  margin-left: 2rem;
  /* max-width: 20%; */
  color: red;
  /* font-size: var(--step-0-1418); */
  font-size: var(--step-0-1215);
}

/* ------------------------------- form submitting ------------------------------ */

form article{
  border: #000 solid 2px;
  border-radius: var(--radius);
  padding: var(--space-xs);
  display: none;
  color: #00A300;
  font-size: var(--step-0-1418);
}

article p:nth-child(1){
  padding-bottom: var(--space-xs);
}


@media screen and (min-width: 668px) {
  .grid-container{
    /* gap: 20px; */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-template-areas:  
      " form profile "
    ;
    }

    form input{
      min-width: 80%;
    }

    form label{
      align-self: flex-start;
      margin-left: 2rem;
    }

    h2{
      font-size: var(--step-1-1418);
    }

    .del-list{
      max-width: 60%;
    }
}