$/*$ Resetting default margin and padding $*/$

body,

h$1,$

h$2,$

h$3,$

p$,$

ul$,$

li $\{$

margin: $0$;

padding: $0$;

$\}$

body $\{$

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

$\}$

$/*$ Header styles $*/$

header $\{$

background: #$3$feefb;

display: flex;

$\}$

$.$header $\{$

height: $18$vh;

width: $100\%$;

padding: $02\%$;

position: relative;

$\}$

nav$\{$

display: flex;

align$-$items: center;

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

$\}$

$.$logo$\{$

width: $100$px;

$\}$

h$1\{$

font$-$family:cursive;

font$-$size: $50$px;

color:#ff$8888$;

$\}$

nav ul $\{$

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

padding: $0$;

display: flex;

justify$-$content: right;

align$-$items: right;

font$-$size: $25$px;

$\}$

nav ul li $\{$

display: inline;

margin$-$right: $10\%$;

$\}$

$/*$ Main styles $*/$

main $\{$

display: flex;

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

padding: $20$px;

$\}$

$.$container$-$img $\{$

width: $100\%$;

height: auto;

$\}$

$.$container$-$content $\{$

flex: $2$;

padding: $200$px $50$px;

$\}$

$.$container$-$content p $\{$

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

font$-$style: italic;

font$-$size: $30$px;

text$-$align: center;

line$-$height: $2$;

$\}$

$/*$ Responsive styles $*/$

@media $($max$-$width: $768$px$)\{$

main $\{$

flex$-$direction: column;

$\}$

$.$container$-$content $\{$

padding: $20$px $0$;

$\}$

$\}$

$/*$Products page styl$*/$

main $\{$

display: flex;

flex$-$wrap: wrap;

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

padding: $20$px;

$\}$

$.$container$-$product$-$img $\{$

width:$100\%$;

height: auto;

border$-$radius: $10$px;

$\}$

$.$container$-$content $\{$

padding: $020$px; $/*$ Add padding to content $*/$

$\}$

$/*$ Dropdown Menu $*/$

$.$dropdown $\{$

width:$20$px;

height:$10$px;

position: relative;

display: inline$-$block;

$\}$

$.$dropdown$-$content $\{$

display: none;

position: absolute;

background$-$color: #f$9$f$9$f$9$;

min$-$width: $160$px;

font$-$size: $20$px;

z$-$index: $1$;

$\}$

$.$dropdown$-$content a $\{$

color: #$333$;

padding: $20$px $25$px;

text$-$decoration: none;

display: block;

$\}$

$.$dropdown:hover $.$dropdown$-$content $\{$

display: block;

$\}$

$.$container $\{$

max$-$width: $1200$px;

margin: $0$ auto;

padding: $0$;

$\}$

$.$container$-$content $\{$

display: flex;

flex$-$wrap: wrap;

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

align$-$items: left;

$\}$

$.$container$-$img $\{$

flex: $0048\%$; $/*$ Adjust width as needed $*/$

margin$-$bottom: $20$px;

$\}$

$.$container$-$text $\{$

flex: $0048\%$; $/*$ Adjust width as needed $*/$

$\}$

$.$download$-$button $\{$

text$-$align: right;

margin$-$top: $20$px;

$\}$

$/*$contacts styling$*/$

$.$social$-$icons $\{$

display: flex;

justify$-$content: center;

align$-$items: center; $/*$ Align icons vertically center $*/$

margin$-$top: $20$px;

$\}$

$.$social$-$icons a $\{$

margin: $010$px; $/*$ Add some spacing between icons $*/$

$\}$

$.$social$-$icons a i $\{$

font$-$size: $50$px; $/*$ Adjust the size of the icons $*/$

$\}$

iframe$\{$

width: $80\%$;

height: $100$px;

width: $100\%$;

height: $80$vh;

display: flex;

align$-$items:center;

justify$-$content:center;

flex$-$direction: column;$\}$

$/*$ Responsive styles $*/$

@media $($max$-$width: $768$px$)\{$

$.$container$-$img,

$.$container$-$content $\{$

flex$-$basis: $100\%$; $/*$ Full width on smaller screens $*/$

$\}$

$\}$

$/*$ Form Styling $*/$

form $\{$

max$-$width: $400$px;

margin: $0$ auto;

background: #fff;

padding: $20$px;

border$-$radius: $5$px;

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

$\}$

form div $\{$

margin$-$bottom: $15$px;

$\}$

input$[$type$=$"text"$],$

input$[$type$=$"password"$],$

textarea $\{$

width: $100\%$;

padding: $10$px;

border: $1$px solid #ccc;

border$-$radius: $4$px;

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

$\}$

input$[$type$=$"submit"$]\{$

background$-$color: #$05$bdca;

color: #fff;

border: none;

padding: $10$px $20$px;

cursor: pointer;

border$-$radius: $4$px;

$\}$

input$[$type$=$"submit"$]$:hover $\{$

background$-$color: #$333$;

$\}$

$.$forgot$-$password,

$.$new$-$user $\{$

text$-$align: left;

margin$-$top: $10$px;

$\}$

$.$forgot$-$password a$,$

$.$new$-$user a $\{$

color: #$007$bff;

text$-$decoration: none;

$\}$

$.$forgot$-$password a:hover,

$.$new$-$user a:hover $\{$

text$-$decoration: underline;

$\}$

$/*$ Footer styles $*/$

footer $\{$

grid$-$area: footer;

background$-$color: #$3$feefb;

color:#$000000$;

padding: $10$px;

width:$100\%$;

bottom: $0$;

display: flex;

justify$-$content: center;

align$-$items: center;

$\}$

LeBeza's Bakery Recipe Hub