CSS: $/*$ the styles for the elements $*/$

$*\{$

margin: $0$;

padding: $0$;

$\}$

html $\{$

background$-$color: white;

$\}$

body $\{$

font$-$family: Arial, Helvetica, sans$-$serif;

font$-$size: $100\%$;

width: $98\%$; $/*$ changed from $800$ pixels $*/$

max$-$width: $960$px;

margin: $0$ auto;

border: $3$px solid #$931420$;

background$-$color: #fffded;

display: grid;

grid$-$template: repeat$(4,$ auto$)/$ auto $1$fr;

grid$-$template$-$areas:

"head head"

"navi navi"

"main main"

"foot foot";

$\}$

a:focus, a:hover $\{$

font$-$style: italic;

$\}$

$/*$ the styles for the header $*/$

header $\{$

padding: $1$em $0\mathrm{.}5$em $0$;

border$-$bottom: $3$px solid #$931420$;

background$-$image: linear$-$gradient$($

$30$deg, #f$6$bb$730\%,$ #f$6$bb$7330\%,$ white $50\%,$ #f$6$bb$7380\%,$ #f$6$bb$73100\%)$;

grid$-$area: head;

$\}$

header h$2\{$

font$-$size: $175\%$;

color: #$800000$;

$\}$

header h$3\{$

font$-$size: $130\%$;

font$-$style: italic;

$\}$

header img $\{$

float: left;

padding: $03\mathrm{.}75\%$;

$\}$

$.$shadow $\{$

text$-$shadow: $2$px $2$px $2$px #$800000$;

$\}$

$/*$ the styles for the navigation menu $*/$

#nav$\_$menu $\{$

grid$-$area: navi;

$\}$

#nav$\_$menu ul $\{$

list$-$style$-$type: none;

margin: $0$;

padding: $0$;

display: grid;

grid$-$template: auto $/$ repeat$(5,1$fr$)$;

align$-$content: center;

$\}$

#nav$\_$menu ul li a $\{$

display: block;

text$-$align: center;

padding: $1$em $0$;

text$-$decoration: none;

background$-$color: #$800000$;

color: white;

font$-$weight: bold;

$\}$

#nav$\_$menu a$.$current $\{$

color: yellow;

$\}$

$/*$ the styles for the main content $*/$

main $\{$

grid$-$area: main;

display: grid;

grid$-$template: auto $/30\%$ auto;

grid$-$gap: $2\mathrm{.}5\%$;

grid$-$template$-$areas:

"side sec$"$;

$\}$

$/*$ the styles for the section $*/$

section $\{$

padding: $03\mathrm{.}7\%20$px $0$;

grid$-$area: sec;

$\}$

section h$1\{$

font$-$size: $150\%$;

padding: $\mathrm{.}5$em $0\mathrm{.}25$em $0$;

margin: $0$;

$\}$

section h$2\{$

color: #$800000$;

font$-$size: $130\%$;

padding: $\mathrm{.}5$em $0\mathrm{.}25$em $0$;

$\}$

section p $\{$

padding$-$bottom: $\mathrm{.}5$em;

$\}$

section blockquote $\{$

padding: $02$em;

font$-$style: italic;

$\}$

section ul $\{$

padding: $00\mathrm{.}25$em $1\mathrm{.}25$em;

list$-$style$-$type: circle;

$\}$

section li $\{$

padding$-$bottom: $\mathrm{.}35$em;

$\}$

$/*$ the styles for the article $*/$

article $\{$

padding: $\mathrm{.}5$em $0$;

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

border$-$bottom: $2$px solid #$800000$;

$\}$

article h$2\{$

padding$-$top: $0$;

$\}$

article h$3\{$

font$-$size: $105\%$;

padding$-$bottom: $\mathrm{.}25$em;

$\}$

article img $\{$

float: right;

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

min$-$width: $150$px;

margin: $\mathrm{.}5$em $01$em $1$em;

border: $1$px solid black;

$\}$

$/*$ the styles for the aside $*/$

aside $\{$

padding: $0020$px $8\mathrm{.}3\%$;

grid$-$area: side;

$\}$

aside h$2\{$

color: #$800000$;

font$-$size: $130\%$;

padding: $\mathrm{.}5$em $0\mathrm{.}25$em $0$;

$\}$

aside h$3\{$

font$-$size: $105\%$;

padding$-$bottom: $\mathrm{.}25$em;

$\}$

aside img $\{$

padding$-$bottom: $1$em;

$\}$

$/*$ the styles for the footer $*/$

footer $\{$

background$-$color: #$931420$;

grid$-$area: foot;

$\}$

footer p $\{$

text$-$align: center;

color: white;

padding: $1$em $0$;

$\}$

#mobile$\_$menu $\{$

display: none;

$\}$

$/*$ screen widths $716$px to $959$px $*/$

@media only screen and $($max$-$width: $959$px$)\{$

section h$1\{$ font$-$size: $135\%$; $\}$

section h$2,$ aside h$2\{$ font$-$size: $120\%$; $\}$

$\}$

$/*$ screen widths $480$px to $715$px $*/$

@media only screen and $($max$-$width: $715$px$)\{$

body $\{$

grid$-$template: repeat$(4,$ auto$)/1$fr;

grid$-$template$-$areas:

"head"

"navi"

"main"

"foot";

$\}$

header img $\{$ float: none; $\}$

header $\{$

display: grid;

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

grid$-$gap: $\mathrm{.}5$em;

text$-$align: center;

padding: $1\mathrm{.}5$em $01\mathrm{.}5$em $0$;

$\}$

header img $\{$

justify$-$self: center;

$\}$

main $\{$

grid$-$template: auto auto $/1$fr;

grid$-$template$-$areas:

"sec"

"side";

$\}$

section $\{$

margin: $02\mathrm{.}5\%$;

padding$-$right: $0$;

$\}$

aside $\{$

padding$-$right: $2\mathrm{.}5\%$;

padding$-$left: $2\mathrm{.}5\%$;

grid$-$row: $2/3$;

$\}$

article img $\{$ max$-$width: $30\%$; $\}$

#speakers $\{$

column$-$count: $2$;

$\}$

#nav$\_$menu $\{$

display: none;

$\}$

#mobile$\_$menu $\{$

display: block;

grid$-$area: navi;

$\}$

$.$slicknav$\_$menu $\{$

background$-$color: #$800000!$important;

$\}$

$\}$

$/*$ screen widths $479$ and less $*/$

@media only screen and $($max$-$width: $479$px$)\{$

body $\{$ font$-$size: $90\%$; $\}$

$\}$