@media only screen and (max-width: 768px) and (orientation: portrait) {
  body {
    background-color: darkslateblue;
    max-width: 100vw;
    font-family: 'Montserrat';
    background-color: darkslateblue;
  }
  #flex-container4 {
    margin: 2rem auto;
    width: 100vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  img {
    height: 6rem;
    width: 6rem;
  }
  ::-webkit-input-placeholder {
    font-size: 1.4rem;
  }
  :-ms-input-placeholder {
    font-size: 1.4rem;
  }
  ::-ms-input-placeholder {
    font-size: 1.4rem;
  }
  ::placeholder {
    font-size: 1.4rem;
  }
  #text {
    background-color: white;
    padding: 1rem;
    margin: 6rem auto;
    width: 80vw;
    height: 50vh;
    margin: 2rem auto;
    border: 11px solid #f5b235;
    border-radius: 2rem;
    font-size: 1.6rem;
    overflow: scroll;
    line-height: 4rem;
  }
  /*input field */
  #words {
    width: 80%;
    border: 3px solid #f5b235;
    margin: 3rem auto;
    font-size: 1rem;
    min-height: 1.4rem;
    padding: 0.8rem;
  }
}

/* ) #######################################################################################
############################################################################################
################################################################################################*/
@media only screen and (max-width: 768px) and (orientation: landscape) {
  body {
    background-color: darkslateblue;
    width: 100vw;
    font-family: 'Montserrat';
    font-weight: 600;
    background-color: darkslateblue;
  }
  #flex-container4 {
    margin: 1rem auto 0 auto;
    width: 100vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  img {
    height: 6rem;
    width: 6rem;
  }
  ::-webkit-input-placeholder {
    font-size: 2rem;
  }
  :-ms-input-placeholder {
    font-size: 2rem;
  }
  ::-ms-input-placeholder {
    font-size: 2rem;
  }
  ::placeholder {
    font-size: 2rem;
  }
  #text {
    background-color: white;
    padding: 1rem;
    width: 80%;
    height: 70vh;
    margin: 1rem auto;
    border: 11px solid #f5b235;
    border-radius: 2rem;
    font-size: 1.6rem;
    overflow: scroll;
    line-height: 4rem;
  }
  /*input field */
  #words {
    width: 80%;
    border: 3px solid #f5b235;
    margin: 3rem 10%;
    font-size: 1.4rem;
    min-height: 1.8rem;
    padding: 1rem;
  }
}

/* ) #######################################################################################
############################################################################################
################################################################################################
################################################################################################*/
@media only screen and (min-width: 768px) and (max-width: 1298px) and (orientation: portrait) {
  body {
    background-color: darkslateblue;
    width: 100vw;
    font-family: 'Montserrat';
    font-weight: 600;
  }
  #flex-container4 {
    margin-top: 4rem;
  }
  img {
    height: 7rem;
    width: 7rem;
  }
  ::-webkit-input-placeholder {
    font-size: 2rem;
  }
  :-ms-input-placeholder {
    font-size: 2rem;
  }
  ::-ms-input-placeholder {
    font-size: 2rem;
  }
  ::placeholder {
    font-size: 2rem;
  }
  #text {
    background-color: white;
    padding: 1rem;
    margin: 10rem 4rem;
    width: 80%;
    height: 60vh;
    margin: 2rem auto;
    border: 11px solid #f5b235;
    border-radius: 2rem;
    font-size: 1.4rem;
    overflow: scroll;
    line-height: 10rem;
  }
  /*input field */
  #words {
    width: 80%;
    border: 3px solid #f5b235;
    margin: 2rem 10%;
    font-size: 1.2rem;
    min-height: 1.8rem;
    padding: 0.6rem;
    position: fixed;
    bottom: 2rem;
  }
}

/* ) #######################################################################################
############################################################################################
################################################################################################
################################################################################################*/
@media only screen and (min-width: 768px) and (max-width: 1298px) and (orientation: landscape) {
  body {
    background-color: darkslateblue;
    width: 100vw;
    font-family: 'Montserrat';
    font-weight: 600;
  }
  #flex-container4 {
    margin-top: 4rem;
  }
  img {
    height: 7rem;
    width: 7rem;
  }
  ::-webkit-input-placeholder {
    font-size: 2rem;
  }
  :-ms-input-placeholder {
    font-size: 2rem;
  }
  ::-ms-input-placeholder {
    font-size: 2rem;
  }
  ::placeholder {
    font-size: 2rem;
  }
  #text {
    background-color: white;
    padding: 1rem;
    margin: 10rem 4rem;
    width: 80%;
    height: 50vh;
    margin: 2rem auto;
    border: 11px solid #f5b235;
    border-radius: 2rem;
    font-size: 1.6rem;
    overflow: scroll;
    line-height: 12rem;
  }
  /*input field */
  #words {
    width: 80%;
    border: 3px solid #f5b235;
    margin: 3rem 10%;
    font-size: 1.4rem;
    min-height: 1.8rem;
    padding: 1rem;
    position: fixed;
    bottom: 1rem;
  }
}

/* ) #######################################################################################
############################################################################################
################################################################################################
################################################################################################*/
@media only screen and (min-width: 1299px) and (max-width: 1799px) {
  body {
    background-color: darkslateblue;
    width: 100vw;
    font-family: 'Montserrat';
    font-weight: 600;
    background-color: darkslateblue;
  }
  #flex-container4 {
    margin-top: 4rem;
  }
  img {
    height: 7rem;
    width: 7rem;
  }
  ::-webkit-input-placeholder {
    font-size: 2rem;
  }
  :-ms-input-placeholder {
    font-size: 2rem;
  }
  ::-ms-input-placeholder {
    font-size: 2rem;
  }
  ::placeholder {
    font-size: 2rem;
  }
  #text {
    background-color: white;
    padding: 1rem;
    margin: 10rem 4rem;
    width: 90%;
    height: 50vh;
    margin: 2rem auto;
    border: 11px solid #f5b235;
    border-radius: 2rem;
    font-size: 1.6rem;
    overflow: scroll;
    line-height: 12rem;
  }
  /*input field */
  #words {
    width: 80%;
    border: 3px solid #f5b235;
    margin: 3rem 10%;
    font-size: 1.6rem;
    min-height: 2rem;
    padding: 1rem;
    position: fixed;
    bottom: 1rem;
  }
}

/* ) #######################################################################################
############################################################################################
################################################################################################
################################################################################################*/
@media only screen and (min-width: 1800px) and (max-width: 2299px) {
  body {
    background-color: darkslateblue;
    width: 100vw;
    font-family: 'Montserrat';
    font-weight: 600;
    background-color: darkslateblue;
  }
  #flex-container4 {
    margin-top: 4rem;
  }
  img {
    height: 12rem;
    width: 12rem;
  }
  ::-webkit-input-placeholder {
    font-size: 2rem;
  }
  :-ms-input-placeholder {
    font-size: 2rem;
  }
  ::-ms-input-placeholder {
    font-size: 2rem;
  }
  ::placeholder {
    font-size: 2rem;
  }
  #text {
    background-color: white;
    padding: 1rem;
    margin: 10rem 4rem;
    width: 90%;
    height: 50vh;
    margin: 2rem auto;
    border: 11px solid #f5b235;
    border-radius: 2rem;
    font-size: 2rem;
    overflow: scroll;
  }
  /*input field */
  #words {
    width: 80%;
    border: 3px solid #f5b235;
    margin: 5rem 10%;
    font-size: 2rem;
    min-height: 4rem;
    padding: 1rem;
    position: fixed;
    bottom: 1rem;
  }
}

/* ) #######################################################################################
############################################################################################
################################################################################################
################################################################################################*/
@media only screen and (min-width: 2300px) and (max-width: 3000px) {
  body {
    background-color: darkslateblue;
    width: 100vw;
    font-family: 'Montserrat';
    font-weight: 600;
    background-color: darkslateblue;
  }
  #flex-container4 {
    margin-top: 4rem;
  }
  img {
    height: 18rem;
    width: 18rem;
  }
  ::-webkit-input-placeholder {
    font-size: 2rem;
  }
  :-ms-input-placeholder {
    font-size: 2rem;
  }
  ::-ms-input-placeholder {
    font-size: 2rem;
  }
  ::placeholder {
    font-size: 2rem;
  }
  #text {
    background-color: white;
    padding: 1rem;
    margin: 10rem 4rem;
    width: 90%;
    height: 60vh;
    margin: 2rem auto;
    border: 11px solid #f5b235;
    border-radius: 2rem;
    font-size: 2.5rem;
    overflow: scroll;
  }
  /*input field */
  #words {
    width: 80%;
    border: 3px solid #f5b235;
    margin: 5rem 10%;
    font-size: 2rem;
    min-height: 4rem;
    padding: 1rem;
    position: fixed;
    bottom: 1rem;
  }
}

/* ) #######################################################################################
############################################################################################
################################################################################################
################################################################################################*/
@media only screen and (min-width: 3001px) {
  body {
    background-color: darkslateblue;
    width: 100vw;
    font-family: 'Montserrat';
    font-weight: 600;
    background-color: darkslateblue;
  }
  #flex-container4 {
    margin-top: 4rem;
  }
  img {
    height: 20rem;
    width: 20rem;
  }
  ::-webkit-input-placeholder {
    font-size: 2rem;
  }
  :-ms-input-placeholder {
    font-size: 2rem;
  }
  ::-ms-input-placeholder {
    font-size: 2rem;
  }
  ::placeholder {
    font-size: 2rem;
  }
  #text {
    background-color: white;
    padding: 1rem;
    margin: 10rem 4rem;
    width: 90%;
    height: 60vh;
    margin: 2rem auto;
    border: 11px solid #f5b235;
    border-radius: 2rem;
    font-size: 3rem;
    font-weight: 700;
  }
  /*input field */
  #words {
    width: 80%;
    border: 3px solid #f5b235;
    margin: 5rem 10%;
    font-size: 2rem;
    min-height: 4rem;
    padding: 1rem;
    position: fixed;
    bottom: 1rem;
  }
}
/*# sourceMappingURL=card-writer.css.map */