My styles.css file:html$,$

body,

section,

p$,$

header,

nav,

footer,

div,

article,

aside,

ol$,$

ul$,$

li$,$

h$1,$

h$6\{$

margin: $0$;

padding: $0$;

box$-$sizing: border$-$box;

$\}$

body $\{$

background$-$color: #E$6$E$6$E$6$;

font$-$family: Verdana, Geneva, Tahoma, sans$-$serif;

$\}$

div#container $\{$

width: $940$px;

background$-$color: #FFF;

border$-$radius: $8$px;

margin: $10$px auto;

padding: $10$px;

box$-$shadow: $1$px $1$px $2$px #A$2$A$2$A$2,-1$px $-1$px $2$px #A$2$A$2$A$2$;

display: grid;

grid$-$template$-$columns: $1$fr $3$fr;

$\}$

nav$\{$

grid$-$column: $1/-1$;

display: flex;

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

align$-$items: center;

$\}$

#navTop$\{$

display: flex;

align$-$items: flex$-$end;

$\}$

nav #navTop$>$ul$\{$

display: flex;

list$-$style: none;

$\}$

nav #navTop$>$ul$>$li::after$\{$

content: $\text{'}|\text{'}$;

padding: $\mathrm{.}4$rem;

$\}$

nav #navTop$>$ul$>$li:last$-$child:after$\{$

content: $\text{'}\text{'}$;

$\}$

#navTop ul a$\{$

text$-$decoration: none;

color: rgb$(0,138,230)$;

$\}$

header$\{$

grid$-$column: $1/-1$;

$\}$

header img$\{$

width: $100\%$;

height: $400$px;

$\}$

#navMiddle$\{$

background$-$color: rgb$(0,91,220)$;

line$-$height: $30$px;

$\}$

header #navMiddle ul$\{$

list$-$style: none;

display: flex;

justify$-$content: center;

align$-$items: center;

$\}$

#navMiddle ul$>$li::after$\{$

padding: $\mathrm{.}5$rem;

content: $\text{'}|\text{'}$;

color: white;

line$-$height: $20$px;

text$-$align: middle;

$\}$

#navMiddle ul$>$li$>$a$\{$

color: white;

text$-$transform: uppercase;

text$-$decoration: none;

font$-$size: $14$px;

font$-$weight: bold;

$\}$

#navMiddle ul$>$li:last$-$child::after$\{$

content: $\text{'}\text{'}$;

$\}$

aside ul$\{$

display: flex;

flex$-$direction: column;

list$-$style: none;

height: $400$px;

$\}$

aside ul$>$li$\{$

width: $250$px;

background$-$color: #A$2$A$2$A$2$;

border: $2$px solid #bfbfbf;

$\}$

aside ul$>$li$>$a$\{$

padding: $\mathrm{.}6$rem;

color: #$000$;

text$-$transform: uppercase;

text$-$decoration: none;

font$-$weight: $600$;

line$-$height: $30$px;

$\}$

$.$asideMessage$\{$

display: flex;

gap: $10$px;

margin$-$top: $5$rem;

padding$-$top: $2$rem;

border$-$top: $2$px solid #a$2$a$2$a$2$;

$\}$

main$\{$

padding$-$top: $10$px;

margin$-$left: $2$rem;

margin$-$bottom: $2$rem;

text$-$align: justify;

$\}$

main hr$\{$

background$-$color: #A$2$A$2$A$2$;

height: $1\mathrm{.}5$px;

$\}$

main $.$details$\{$

display: flex;

margin$-$top: $4$rem;

gap: $2$rem;

$\}$

$.$details ul$>$li$\{$

padding:$\mathrm{.}8$rem $2$rem;

list$-$style: none;

font$-$weight: bold;

$\}$

$.$details ul$>$li$>$a$\{$

text$-$decoration: none;

color: rgb$(0,138,230)$;

$\}$

$.$detailsImage$\{$

border: $2$px solid #A$2$A$2$A$2$;

padding: $\mathrm{.}5$rem;

text$-$align: justify;

$\}$

footer$\{$

grid$-$column: $1/-1$;

text$-$align: center;

margin:$2$rem $01$rem $0$;

$\}$

footer #navBottom ul$\{$

display: flex;

list$-$style: none;

justify$-$content: center;

align$-$items: center;

$\}$

footer #navBottom$>$ul$>$li$>$a$\{$

text$-$decoration: none;

color: rgb$(0,138,230)$;

$\}$

footer #navBottom$>$ul$>$li::after$\{$

content: $\text{'}|\text{'}$;

padding:$\mathrm{.}6$rem ;

$\}$

footer #navBottom$>$ul$>$li:last$-$child:after$\{$

content: $\text{'}\text{'}$;

$\}$

$.$blue$\{$

color: rgb$(0,138,230)$;

$\}$

My html file: