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

.my-name {
  background: linear-gradient(to right, #8080ef, #4080FF);
  font-size: 24pt;
  color: white;
}

.greeting {
  background-color: rgb(255,255,0);
  font-size: 36pt;
  color: black;
  height: 700px;
  padding-top: 100px;
}

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {
  .my-name {
     font-size: 10vw;
  }
  .greeting {
     padding-top: 100px;
     height: 700px;
     font-size: 14vw;
  }
}

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) {
  .my-name {
     font-size: 10vw;
  }
  .greeting {
     padding-top: 150px;
     height: 700px;
     font-size: 14vw;
  }
}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) {
  .my-name {
     font-size: 10vw;
  }
  .greeting {
     padding-top: 150px;
     height: 700px;
     font-size: 14vw;
  }
}

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) {
  .my-name {
     font-size: 10vw;
  }
  .greeting {
     padding-top: 150px;
     height: 700px;
     font-size: 14vw;
  }
}

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
  .my-name {
     font-size: 10vw;
  }
  .greeting {
     padding-top: 150px;
     height: 700px;
     font-size: 14vw;
  }
}

/*
@media (min-width: 1365px) {
  .my-name {
     font-size: 7vw;
  }
  .greeting {
     padding-top: 150px;
     height: 950px;
     font-size: 12vw;
  }
}
@media (min-width: 992px) and (max-width: 1365px) {
  .my-name {
     font-size: 10vw;
  }
  .greeting {
     padding-top: 150px;
     height: 700px;
     font-size: 14vw;
  }
}
@media (min-width: 600px) and (max-width: 991px) {
  .my-name {
     font-size: 10vw;
  }
  .greeting {
     padding-top: 100px;
     height: 900px;
     font-size: 14vw;
  }
}
*/