#recordBtn {
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    font-size: 26px;
    letter-spacing: 1px;
    font-weight: 500;
    background: linear-gradient(#171717 0%, #313131 100%);
    color: white;
    border-color: linear-gradient(180deg, #171717 0%, #313131 100%);
    border-width: 2px;
    border-radius: 15px;
    box-shadow: 12px 12px 24px #575757a3;
    cursor: pointer;
    transition: all 0.3s ease-in-out 0s;
}
#recordBtn::before {
    border-radius: 1000px;
    width: 100%;
    height: 40px;
    box-shadow: 0 0 60px #575757a3;
    position: absolute;
    top: 100%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 0.25s ease;
}
#recordBtn:hover {
  background: linear-gradient(#242424 0%, #343434 100%);
  border-width: 0px;
  transform: translateY(-6px);
  transform: scale(1.01);
}
#recordBtn.recording {
    background: linear-gradient(#252525 0%, #494949 100%);
    border-width: 3px;
    padding: 44px;
    animation-duration: 1500ms;
    animation-iteration-count:infinite;
    animation-name: recording-speak;
}
@keyframes recording-speak {
    25%,
    50% {
        scale: 100%
    }
    75% {
        scale: 99%
    }
}
#recordBtn.processing {
  background: linear-gradient(#242424 0%, #343434 100%);
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-name: processing;
  
}
@keyframes processing {
    25%,
    50% {
        scale: 100%
    }
    75% {
        scale: 99%
    }
}
body {
    background: linear-gradient(45deg,#ffffff 0%, #f1f1f1 50%, #ffffff 100%);
    margin: 0;
    padding: 20px;
    font-family: 'Nunito', sans-serif;
}
.sentence-block { 
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin: 10px 0;
    background: linear-gradient(#dcdcdc 0%, #ededed 100%);
    border-radius: 10px;
    font-size: 20px;
    transition: all 0.3s ease-in-out 0s;
}
.text-content {
    flex-grow: 1;
    text-align: left;
    margin-right: 15px;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.2s;
}
.text-content:hover {
    background: #f0f0f0;
}
.sentence-block.is-updating {
    background: linear-gradient(#ffe0e0 0%, #ffc7c7 100%);
}
.copy-btn {
    background: linear-gradient(#252525 0%, #494949 100%);
    color: white;
    border: 2px solid #171717;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.copy-btn:hover {
    background: linear-gradient(#252525 0%, #494949 100%);
}
.copy-btn.copied-state {
    background: #4CAF50;
    border-color: #4CAF50;
}