ReactでCSSを読み込もうとしても反映されない

実現したいこと

reactでCSSを反映させたい

発生している問題・分からないこと

CSSが動いていない
検証で確認したがCSSが反映されていない

エラーメッセージ

error
1エラーはでておりません。

該当のソースコード

style.css
1.App{
2  font-family: Arial, sans-serif;
3  background-color: #ce1010;
4  margin: 0;
5  padding: 0;
6}
7
8form{
9  max-width: 500px;
10  margin: 50px auto;
11  padding: 30px;
12  background-color: #802323;
13  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
14  border-radius: 8px;
15}
16
17form label{
18  display:block;
19  margin-bottom: 10px;
20  font-weight: bold;
21  color: #45a049;
22}
23
24form input,
25form textarea{
26  width: 90%;
27  padding: 10px;
28  margin-bottom: 20px;
29  border-radius: 4px;
30}
31
32form button{
33  background-color: #4caf50;
34  color: white;
35  padding: 12px 20px;
36  border: none;
37  border-radius: 4px;
38  cursor: pointer;
39}
40
41form button:hover{
42  background-color: #45a049;
43}
44
45p.hidden{
46  color:green;
47  display: none;
48}

App.js
1import React,{useState} from "react";
2import{db} from "./firebase";
3import {collection,addDoc} from "firebase/firestore";
4import './style/style.css';
5
6function App(){
7  const [catName, setCatName] = useState('');
8  const [contact, setContact] = useState({
9    name:'',
10    email:'',
11    message:'',
12  });
13  const [contactSent, setContactSent] = useState(false);
14
15const handleCatSubmit = async (e) => {
16  e.preventDefault();//ページの動きを止めながらデータを送信する関数
17  try{
18    await addDoc(collection(db, "cats"),{
19      name: catName,
20      createdAt: new Date(),
21    });
22    alert("猫の情報を登録しました！");
23    setCatName('');//入力フォームを空にする
24  } catch(error){
25    alert("登録中にエラーが発生しました：" + error);
26  }
27};
28
29const handleContactChange = (e) =>{//処理が行われたとき
30  setContact({...contact,[e.target.name]: e.target.value});
31};
32
33const handleContactSubmit = (e) =>{
34  e.preventDefault();
35
36  setContactSent(true);
37};
38
39return(
40  <div className="App"> 
41    <h1>猫登録アプリ</h1>
42    <p>猫との大切な時間をメモリに残そう！</p>
43    <p>まずは猫の情報を登録してみよう</p>
44
45    <form onSubmit={handleCatSubmit}>
46      <label htmlFor="cat-name">猫の名前</label>
47      <input
48        type="text"
49        id="cat-name"
50        value={catName}
51        onChange={(e) => setCatName(e.target.value)}//入力欄に何か実行されたら発動するイベント
52        required//必ず入力して下さいという意味
53      />
54      <button type="submit">登録する</button>
55    </form>
56
57    <form
58      id="contact-form"
59      action="https://formspree.io/f/mzzvdeee"
60      method="POST"
61      onSubmit={handleContactSubmit}
62    >
63    <label>名前</label>
64    <input
65      type="text"
66      name="name"
67      value={contact.name}
68      onChange={handleContactChange}
69      required
70    />
71    <label>メールアドレス：</label>
72    <input
73      type="email"
74      name="email"
75      value={contact.email}
76      onChange={handleContactChange}
77      required
78    />
79    <label>メッセージ</label>
80    <textarea
81      name="message"
82      value={contact.message}
83      onChange={handleContactChange}
84      required
85    ></textarea>
86
87    <button type="submit">送信</button>
88    {contactSent && <p>送信が完了しました！</p>}
89  </form>
90  </div>
91);
92}
93
94export default App;