here is my css file how can i make my website look better please tell me:

$.$photo $\{$

$$ width: $200\%$;

$$ height: $250$px;

$$ border: $7$px solid black;

$$ border$-$radius: $10$px;

$$ object$-$fit: cover;

$$ cursor: pointer;

$\}$

$.$photo:hover $\{$

$$ transform: scale$(1\mathrm{.}05)$;

$$ box$-$shadow: $04$px $6$px grey;

$\}$

$.$upload $\{$

$$ border: solid black $3$px;

$$ padding: $50$px;

$$ width: $300$px;

$$ height: $310$px;

$$ margin: $30$px auto;

$$ border$-$radius: $10\%$;

$$ background$-$color: white;

$\}$

#photoContainer $\{$

$$ display: grid;

$$ grid$-$template$-$columns: repeat$(3,1$fr$)$;

$$ gap: $50$px;

$$ padding: $20$px;

$$ margin: $0$ auto;

$$ justify$-$items: center;

$\}$

#photoContainer div button $\{$

$$ margin$-$top: $15$px;

$\}$

#photoContainer div $\{$

$$ display: flex;

$$ flex$-$direction: column;

$$ align$-$items: center;

$\}$

#photoContainer div p $\{$

$$ background$-$color: white;

$$ padding: $10$px;

$$ margin$-$top: $10$px;

$$ margin$-$bottom: $0$;

$$ white$-$space: nowrap;

$$ border$-$radius: $7$px;

$$ font$-$size: $18$px;

$$ border: $1$px solid black;

$\}$

header $\{$

$$ z$-$index: $1000$;

$$ top: $0$;

$$ width: $97\mathrm{.}6\%$;

$$ display: flex;

$$ position: fixed;

$$ justify$-$content: space$-$between;

$$ align$-$items: center;

$$ background$-$color: #$4267$b$2$;

$$ color: white;

$$ padding: $20$px;

$$ box$-$shadow: $04$px $6$px grey;

$$ margin$-$bottom: $20$px;

$\}$

header h$2\{$

$$ flex$-$grow: $1$;

$$ font$-$size: $50$px;

$$ font$-$weight: bold;

$$ text$-$align: center;

$$ margin: $0$;

$\}$

header a $\{$

$$ background$-$color: #$365890$;

$$ font$-$size: $17$px;

$$ margin$-$right: $10$px;

$\}$

header a:hover $\{$

$$ background$-$color: #$2$c$4877$;

$\}$

body $\{$

$$ padding$-$top: $100$px;

$$ text$-$align: center;

$$ margin: $0$;

$$ color: #$333$;

$$ background$-$color: #bfbfbf;

$\}$

body h$5\{$

$$ font$-$size: $30$px;

$$ margin$-$bottom: $10$px;

$$ background$-$color: white;

$$ border$-$radius: $7$px;

$$ padding: $15$px $20$px;

$$ margin: $20$px auto;

$$ width: fit$-$content;

$\}$

body h$5\{$

$$ font$-$size: $30$px;

$$ margin$-$bottom: $10$px;

$$ background$-$color: white;

$$ border$-$radius: $7$px;

$$ padding: $15$px $20$px;

$$ margin: $20$px auto;

$$ width: fit$-$content;

$\}$

$/*$ Style for links and buttons $*/$

a$,$ button $\{$

$$ background$-$color: #$4267$b$2$; $$

$$ color: white;

$$ border: $1$px solid transparent; $$

$$ border$-$radius: $5$px;

$$ padding: $12$px $20$px; $$

$$ font$-$size: $16$px; $$

$$ cursor: pointer; $$

$$ transition: all $0\mathrm{.}3$s ease; $/*$ Smooth transition for hover and active states $*/$

$\}$

$/*$ Hover state $*/$

a:hover, button:hover $\{$

$$ background$-$color: #$365890$; $$

$$ transform: translateY$(-2$px$)$; $$

$\}$

a:active, button:active $\{$

$$ transform: translateY$(2$px$)$; $$

$\}$

$.$main$-$buttons a$,.$main$-$buttons button $\{$

$$ margin$-$right: $10$px; $$

$\}$

$.$modal $\{$

$$ display: none;

$$ position: fixed;

$$ top: $0$;

$$ left: $0$;

$$ width: $100\%$;

$$ height: $100\%$;

$$ background$-$color: rgba$(0,0,0,0\mathrm{.}8)$;

$$ justify$-$content: center;

$$ align$-$items: center;

$$ z$-$index: $1001$;

$\}$

$.$modal img $\{$

$$ max$-$width: $80\%$;

$$ max$-$height: $80\%$;

$\}$

footer $\{$

$$ margin$-$top: $20$px;

$$ padding: $4$px;

$$ background$-$color: #$4267$b$2$;

$$ color: white;

$$ text$-$align: center;

$\}$

#contactSection $\{$

$$ display: none;

$$ transition: max$-$height $0\mathrm{.}3$s ease$-$out;

$$ overflow: hidden;

$$ border: $10$px;

$\}$

#contactSection.active $\{$

$$ display: block;

$\}$

form $\{$

$$ padding: $25$px;

$$ background$-$color: white;

$$ border: $1$px solid #ddd;

$$ border$-$radius: $8$px;

$$ max$-$width: $350$px;

$$ margin: $40$px auto;

$$ box$-$shadow: $04$px $10$px rgba$(0,0,0,0\mathrm{.}1)$;

$\}$

form input, form textarea $\{$

$$ width: $100\%$;

$$ padding: $12$px $15$px;

$$ margin$-$top: $8$px;

$$ margin$-$bottom: $18$px;

$$ border: $1$px solid #ddd;

$$ border$-$radius: $5$px;

$\}$

h$3\{$

$$ text$-$align: right;

$$ padding$-$left: $20$px;

$$ padding$-$right: $10$px;

$\}$

#logout $\{$

$$ color: white;

$$ background$-$color: #$365890$;

$\}$

#logout:hover $\{$

$$ background$-$color: #$2$c$4877$;

$\}$

$.$main$-$buttons $\{$

$$ display: flex;

$$ gap: $10$px;

$$ position: absolute;

$$ right: $20$px;

$$ top: $20$px;

$\}$