body{
  background-color: #f7f7f7;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; 
  font-family: 'Poppins', sans-serif;
  overflow: auto;
}
#lyric-blockquote{
  height: auto;
  overflow-y: scroll;
  margin-bottom: 12px;
}

.card{
  /* height: 60vh; */
  height: auto;
  width: 100%;
  border:none;
  border-radius: 5px;
  box-shadow: 0px 0px 10px 0px #0000008c;   
  margin-bottom: 20px;
  background: white;
  font-size: 14px;
  font-weight: 400;
  color: #000;  
}

.output {
  width: 100%;
  border: none;
  background: rgba(82, 82, 82, 0.066);
  font-size: 16px;
  font-weight: 400;
  color: #000;
  height: auto;
  max-height: 60vh;
  overflow: auto;
  padding: 15px;
  margin-bottom: 20px;
}

#output-text {
  max-height: 400px;
  /* overflow-y: auto; */
  white-space: pre-line;
  text-align: left;
}

.btr{
  border-top-right-radius: 5px !important;
}

.btl{
  border-top-left-radius: 5px !important;
}

.btn-dark {
  color: black;
  background-color: #f29d39;
  border-color: black;
}

.btn-dark:hover {
  color: #fff;
  font-weight: 800;
  background-color: #f29d39;
  border-width: 2px;
  border-color: black;
}

.nav-pills{
  display:table !important;
  width:100%;
}

.nav-pills .nav-link {
  border-radius: 0px;
  border-bottom: 1px solid #FFEF0040;
  color: #000;
  font-weight: 400;
}

.nav-item{
  display: table-cell;
  background: #f29d392e;
}

.nav-pills .nav-link.active {
  color: #000;
  background-color: #f29d39;
  border-color: #f29d39;
  font-weight: 800;
}

.form{
  padding: 10px;
  height: auto;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;  
}

.form input{
  margin-bottom: 12px;
  border-radius: 3px;
  box-shadow: none;
  border: 1px solid #ced4da;
  height: 40px;
  padding: 10px; 
}

.form input:focus{
  box-shadow: none;
  border: 2px solid #f29d39;
  outline: none;
}

textarea input:focus{
  box-shadow: none;
  border: 2px solid #f29d39;
  outline: none;
}


.form button{
  margin-top: 20px;
}


@media (max-width: 600px) {
  .row {
    flex-direction: column;
  }

  .col-md-7, .col-md-5 {
    width: 100% !important;
    max-width: 100%;
    flex: 0 0 100%;
  }

  .card,
  .output {
    height: auto !important;
    min-height: unset;
  }

  .output {
    margin-top: 20px;
  }

  #output-text {
    white-space: normal;
    word-break: break-word;
  }

  #lyric-blockquote {
    max-height: 200px;
    overflow-y: auto;
  }
}