/* all */
  /* Regular */
@font-face {
  font-family: 'Poppins-Regular';
  src: url("../media/fonts/Poppins-Regular.ttf") format('truetype');
}
@font-face {
  font-family: "Poppins-Italic";
  src: url("../media/fonts/Poppins-Italic.ttf");
}
  /* Bold */
@font-face {
  font-family: "Poppins-Bold";
  src: url("../media/fonts/Poppins-Bold.ttf");
}
@font-face {
  font-family: "Poppins-BoldItalic";
  src: url("../media/fonts/Poppins-BoldItalic.ttf");
}
  /* ExtraBold */
@font-face {
  font-family: "Poppins-ExtraBold";
  src: url("../media/fonts/Poppins-ExtraBold.ttf");
}
@font-face {
  font-family: "Poppins-ExtraBoldItalic";
  src: url("../media/fonts/Poppins-ExtraBoldItalic.ttf");
}

:root{
  --Purple: hsl(259, 100%, 65%);
  --LightRed: hsl(0, 100%, 67%);
  --white: hsl(0, 0%, 100%);
  --off-white: hsl(0, 0%, 94%);
  --light-grey: hsl(0, 0%, 86%);
  --smokey-grey: hsl(0, 1%, 44%);
  --Off-black: hsl(0, 0%, 8%);
}
*{
  font-family: "Poppins-Regular";
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
body{
  padding: 0px;
  margin: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--off-white);
  height: 100vh;
}

/* Main start */
main{
  background-color: var(--white);
  padding: 60px;
  --corner-radius: 24px;
  --RB-corner-Radius: 148px;
  border-radius: var(--corner-radius) var(--corner-radius) var(--RB-corner-Radius);
  width: 840px;
  min-width: 300px;
  margin: 40px 40px;
  display: flex;
  flex-direction: column;
}
/* finish Main */

/* start input section */
.inputSection {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 30px;
}
.inputSection div{
  display: flex;
  flex-direction: column;
  max-width: 158px;
  min-width: 80px;
  font-size: 12px;
}
.inputSection div p{
  margin: 0px;
  padding: 0px;
}
.inputSection div label{
  font-family: 'Poppins-Bold';
  color: var(--smokey-grey);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.inputSection div input{
  padding: 10px;
  outline: none;
  caret-color: var(--Purple);
  border: var(--light-grey) 1px solid;
  border-radius: 6px;
  font-family: 'Poppins-ExtraBold';
  font-size: 24px;
}
.not-valid-color{
  color: var(--LightRed) !important;
}
.not-valid-boarder{
  border: var(--LightRed) 1px solid !important;
}
.inputSection > div input:hover{
  border-color: var(--Purple);
}
/* end input section */

/* start separator section */
main > div{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1px;
}
hr{
  width: 100%;
  height: 2px;
  border: none;
  background-color: var(--light-grey);
}
hr:last-child{
  display: none;
}
button{
  outline: none;
  border-radius: 50%;
  background-color: var(--Purple);
  border: none;
  padding: 20px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
button > img{
  width: 45px;
  height: 45px;
}
button:hover{
  background-color: var(--Off-black);
}
/* end separator section */

/* start show data */
article{
  line-height: 124px;
}
article > h1{
  font-size: 116px;
  font-family: "Poppins-ExtraBoldItalic";
  margin: 0px;
  padding: 0px;
  color: var(--Off-black);
}
article > h1 > span{
  color: var(--Purple);
}
/* end show data */

/* Media query */

@media only screen and (max-width: 820px){
  main{
    margin: 20px;
    padding: 40px;
    gap: 10px;
  }
  article{
    line-height: 14vw
  }
  article > h1{
    font-size:14vw;
  }
}
@media only screen and (max-width: 480px){
  main{
    margin: 0px 20px;
    padding: 40px 20px;
    gap: 40px;
    --corner-radius: 12px;
    --RB-corner-Radius: 82px;
    border-radius: var(--corner-radius) var(--corner-radius) var(--RB-corner-Radius);
  }
  button{
    width: 60px;
    height: 60px;
  }
  button > img{
    width: 26px;
    height: 26px;
  }
  .inputSection {
    gap: 10px;
  }
  .inputSection div p{
    font-size: 10px;
  }
  hr:last-child{
    display: block;
  }
}

@media only screen and (max-width: 360px){
  main{
    margin: 0px 5px;
    padding: 40px 20px;
    gap: 40px;
  }
}