* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  font-size: 16px;
}
body {
  padding: 50px 20px;

  /* font-size: 100%; */
  margin: 0 auto;
}
/*=============Responsive Text===================*/
.responsiveText {
  border: 1px solid #efefef;
  padding: 20px 0;
  margin-bottom: 2rem;
}
.responsiveText h1 {
  font-size: clamp(1rem, 5vw + 2px, 4rem);
}
.responsiveText p {
  font-size: clamp(0.8rem, 3vw + 2px, 1.5rem);
}

/*=============Responsive Text issue if vw only and no clamp===================*/
.responsiveTextIssue {
  border: 1px solid #efefef;
  padding: 20px 0;
  margin-bottom: 2rem;
}
.responsiveTextIssue h1 {
  font-size: 5vw;
}
.responsiveTextIssue p {
  font-size: 3vw;
}

/*=============em font units===================*/
.emContainer {
  font-size: 20px;
}
.emContainer p {
  padding: 10px 0;
}

.emContainer p:first-child {
  color: red;
  font-size: 1em;
}

.emContainer p:nth-child(2) {
  color: green;
  font-size: 1.5em;
}
.emContainer p:nth-child(3) {
  color: blue;
  font-size: 2em;
}

/*=============rem font units===================*/

.remContainer p {
  padding: 10px 0;
}

.remContainer p:first-child {
  color: red;
  font-size: 1rem;
}

.remContainer p:nth-child(2) {
  color: green;
  font-size: 1.5rem;
}
.remContainer p:nth-child(3) {
  color: blue;
  font-size: 2rem;
}

/*=============buttons em vs rem ===================*/

.buttonContainer {
  display: flex;
  align-items: flex-end;
  margin-bottom: 20px;
  gap: 10px;
  flex-wrap: wrap;
}

button {
  cursor: pointer;
  outline: none;
  border: none;
  font-size: inherit;
}

.button-em {
  font-size: 40px;
}

.button1-em {
  font-size: 10px;
  padding: 1em;
}
.button1-2em {
  font-size: 10px;
  padding: 2em;
}
.button2-em {
  font-size: 15px;
  padding: 1em;
}
.button3-em {
  font-size: 25px;
  padding: 1em;
}
.button3-2em {
  font-size: 25px;
  padding: 2em;
}
.button4-em {
  font-size: 35px;
  padding: 1em;
}

.button-rem {
  padding: 1rem;
}

.button1-rem {
  font-size: 10px;
}
.button2-rem {
  font-size: 15px;
}
.button3-rem {
  font-size: 25px;
}
.button4-rem {
  font-size: 35px;
}