*{
    margin: 0;
	padding: 0;   
	box-sizing: border-box;
}

body{
    background-color:#d87093;
}

h1{
    color:blue;
    font-size:50px;
    font-style:bold;
    text-align:center;
    margin-top:40px;
}

textarea{
    font-size:25px;
    background-color:#ffe4c4;
    margin-left:30px;
    margin-top:100px;
    padding:10px 10px;
    border-radius:10px 10px 10px 10px;
    resize:none;
}

button{
    font-size:25px;
    margin-left:30px;
    padding:20px 60px;
    border-radius:10px 10px 10px 10px;
    background-color: #ffe4c4;
}

.start:hover,.stop:hover,.speak:hover{
    font-weight:bold;
    transform:scale(1.1);
    transition:to right all 0.5s linear;
}

.start:active{
    color:#90ee90;
    border-bottom:5px solid #90ee90;
}

.stop:active{
    color:#ff0000;
    border-bottom:5px solid #ff0000;
}

.speak:active{
    color:#ff69b4;
    border-bottom:5px solid #ff69b4;
}

@media(max-width:494px){

    h1{
        font-size:40px;
        margin-left:80px;
    }

    textarea{
        width:100%;
        margin-right:50px;
        padding:30px 30px;
    }

    button{
        padding:10px 10px;
        font-size:15px;
    }
}

@media(min-width:1024px){

    h1{
        font-size:40px;
        margin-left:40px;
    }

    textarea{
        width:100%;
        height:50vh;
        margin-right:30px;;
        padding:40px 40px;
    }

    button{
        padding:20px 20px;
        font-size:30px;
    }
}

@media(min-width:494px) and (max-width:1023px){

    h1{
        font-size:60px;
        margin-left:50px;
    }

    textarea{
        width:100%;
        height:40vh;
        margin-right:30px;
        padding:40px 40px;
    }

    button{
        padding:20px 30px;
        font-size:20px;
    }
}