html {
    font-family: "Roboto", sans-serif;
}

h1 {
    font-weight: 400;
    margin-left: 20px;
}

.textarea-wrapper {
  position: relative;
  display: inline-block;
  margin-left: 20px;
}

.textarea-wrapper textarea {
    border-radius: .75em;
    height: 10rem;
    width: 25rem;
    font-size: 1.25em;
    font-family: "Roboto", sans-serif;
    border: 2.25px solid black;
    padding-bottom: 20px;
}

.textarea-wrapper label {
    position: absolute;
    bottom: 5px;
    right: 10px;
    padding: 2px 4px;
    pointer-events: none;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .textarea-wrapper textarea {
        height: 13rem; 
        width: 32.5rem; 
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .textarea-wrapper textarea {
        height: 17rem; 
        width: 42.5rem; 
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    h1 {
        font-size: 2.5em;
    }
    .textarea-wrapper textarea {
        height: 22rem; 
        width: 55rem; 
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px)  {
    h1 {
        font-size: 3em;
    }
    .textarea-wrapper textarea {
        width: 70rem; 
    }
}