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

body {
  background-color: var(--white);
  color: var(--slate-gray);
  font-size: 1.6rem;
  line-height: 1.75;
}

main {
   display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15rem;
}
.main-section{
 
  max-width: 60vw;
  display: flex;
  flex-direction: column;
  align-items:start;
}

/* For mobile devices */
@media only screen and (max-width: 768px) {
  .main-section {
    max-width: 90vw;

  }
}

/* For tablet devices */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .main-section {
    max-width: 80vw;

  }
}