body{
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
}
*{
    color:white;
}
.logo{
    margin:3px;
    height:40px;
    width:45px;
    border-radius: 90%;
}
.navbar{
  display: flex;
  justify-content: space-between;
  border:2px solid black;
  color: white;
  background-color: black;
  margin:0px;
}
.navbar a i{
    margin: 2px;
}
.navbar a{
    margin: 12px;
    justify-content: space-evenly;
    text-decoration:none;
    color:#fff;
    margin-right: 7px;
    
}
.ref{
    display: flex;
    justify-content: space-evenly; 
}
.head{
    text-align: center;
    flex:1;
    margin-top: 11px;
    margin-left: 133px;
}
.hea{
background: linear-gradient(90deg, hsla(339, 100%, 55%, 1) 0%, hsla(197, 100%, 64%, 1) 100%);
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 20vh;
}
.Main{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin:0rem 0rem;
    width:100%;
    background: linear-gradient(90deg, hsla(239, 94%, 14%, 1) 100%, hsla(190, 68%, 50%, 1) 0%);
}
.use{
    justify-content: center;
    align-items: center;
    text-align: start;
    background: linear-gradient(90deg, hsla(252, 40%, 29%, 1) 0%, hsla(270, 77%, 71%, 1) 100%);
    width:70%;
    margin: 1rem 15rem;
}
.use p{
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
}

.textbox{
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    border:2px solid black;
    margin: 1rem 0rem;
    background: linear-gradient(90deg, hsla(252, 40%, 29%, 1) 0%, hsla(270, 77%, 71%, 1) 100%);         
    width: 70%;
    border-radius: 7px; 
    
}
label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: 1rem;
}
.char-counter {
  font-size: 0.9rem;
  font-weight: normal;
}
textarea {
  width: 95%;
  margin:0rem 0.2rem;
  border: 2px solid black;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  background: linear-gradient(90deg, hsla(239, 94%, 14%, 1) 100%, hsla(190, 68%, 50%, 1) 0%);
  resize: vertical;
  color:white;
}

textarea:focus {
  outline: none;
}
.voice{
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 70%;
    background: linear-gradient(90deg, hsla(252, 40%, 29%, 1) 0%, hsla(270, 77%, 71%, 1) 100%);  border:2px solid black;
    margin: 1rem 15rem;
    border-radius: 7px;
}
.voice select{
    border:2px solid black;
    border-radius: 5px;
    margin:1rem;
    background: linear-gradient(90deg, hsla(239, 94%, 14%, 1) 100%, hsla(190, 68%, 50%, 1) 0%);
    
}
.voice select option{
   background-color:black;
}
.roller{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border:2px solid black;
    background: linear-gradient(90deg, hsla(252, 40%, 29%, 1) 0%, hsla(270, 77%, 71%, 1) 100%);
    margin: 1rem 15rem;
    width: 70%;
    border-radius: 7px;
}
.roller input{
    border:2px solid black;
    border-radius: 5px;
}
.clicker{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    border:2px solid black;
    width: 70%;
    background: linear-gradient(90deg, hsla(252, 40%, 29%, 1) 0%, hsla(270, 77%, 71%, 1) 100%);
    border-radius: 7px;
}
.clicker button{
    background: linear-gradient(90deg, hsla(239, 94%, 14%, 1) 100%, hsla(190, 68%, 50%, 1) 0%);
    border:2px solid black;
    border-radius: 5px;
    margin: 1rem 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 1.2rem;
    cursor: pointer;
    background-color: lightblue;
}
.ss, .pp{
    display: flex;
    justify-content:space-around;
    margin: auto;
    width: 100%;

  
}
.status{
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    width:100%;
    color:#fff;
    background: linear-gradient(90deg, hsla(239, 94%, 14%, 1) 100%, hsla(190, 68%, 50%, 1) 0%);
    height: 5vh;
}