Responsiveness Added to Website

As per suggested, I have added responsiveness to the website

Author: iamabir04

Projects/Vowel Checker/style.css

@@ -10,68 +10,34 @@ body{
     background-position: center;
 }
 
-@keyframes bounce{
-    0%{
-        transform: translateY(-700px);
-    }
-
-    70%,100%{
-        transform: translateY(0);
-    }
-    80%{
-        transform: translateY(-15px);
-    }
-}
-
-@keyframes fade {
-    0%{
-        opacity: 0;
-        
-    }
-    100%{
-        opacity: 1;
-    }
-    
-}
-
-@keyframes headi{
-    0%{
-        font-size: 20px;
-    }
-    100%{
-        font-size: 36px;
-    }
-}
-
 .container{
     background-color: rgba(255,255,255,0.40);
-    /* backdrop-filter: blur(0px); */
     box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.3);
     border-radius: 40px;
     padding: 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: 600px;
-    height: 400px;
-    
+    width: 50vw;
+    height: 50vh;
 }
 
 .container:hover{
 
     box-shadow: rgb(255, 102, 179) 0px 20px 30px -10px;
 }
 
-.container h1{
+h1{
     font-size: 36px;
     margin-bottom: 20px;
     color: black;
+    text-align: center;
 
 }
 
 textarea{
-    width: 500px;
-    height: 350px;
+    width: 40vw;
+    height: 40vh;
     margin: 10px auto;
     display: block;
     font-size: 24px;
@@ -80,20 +46,9 @@ textarea{
     border-radius: 5px;
     resize: none;
     opacity: 70%;
-    animation: fade 2.5s ease-in 1s 1 normal none;
 }
 
 textarea:hover {
-    width: 500px;
-    height: 350px;
-    margin: 10px auto;
-    display: block;
-    font-size: 24px;
-    padding: 10px;
-    border: 1px solid #dddddd;
-    /* background-color: #D3EFBD; */
-    border-radius: 5px;
-    resize: none;
     opacity: 100%;
 }
 
@@ -108,7 +63,6 @@ button{
     cursor: pointer;
     transition: background-color 0.3s ease;
     margin-top: 20px;
-    animation: bounce 0.75s ease-in 1s 1 normal none;
 }
 
 button:hover{
@@ -120,6 +74,18 @@ button:hover{
     margin-top: 20px;
     color: #000000;
     font-weight: bold;
-    animation: fade 0.5s ease-in 1s 1 normal none;
 }
 
+@media (max-width: 600px)
+{
+    h1{
+        font-size: 30px;
+    }
+
+}
+@media (max-width: 430px) {
+    h1 {
+        font-size: 20px;
+    }
+
+}