/*Styles body to change the font to arial, san-serif. Changes the line height by 1.6, set's padding and margin to default
settings.Changes text color and width. Adds the background with the link and covers the whole page. */
body {font-family: Arial, sans-serif; line-height: 1.6; margin: 0;
padding: 0; color: #222; width: 100%;
background: url("https://images.unsplash.com/photo-1503264116251-35a269479413?auto=format&fit=crop&w=1600&q=60") no-repeat center center fixed;
background-size: cover; }

/*Styles the body to have the white overlay over the picture to make paragrpahs pop out */
body::before { content: ""; position: fixed; inset: 0;
background: rgba(255,255,255,0.65); z-index: -1; }

/*Changes the margin-bottom for section, paragrpahs, div, and footers */
section, p, div, footer { margin-bottom: 20px; }

/* Styles the class page-wrapper by changing the margin left, adjust the padding, and the width of the borders*/
.page-wrapper { margin-left: 260px; padding: 20px; max-width: calc(100% - 280px); box-sizing: border-box; }

/* Styles all headers by adjust the padding, and sets margin to deafault*/
h1, h2, h3 { margin-top: 0; padding: 4px 8px; }

/*Styles the headers by adding a border with a different background color. Also adjust the size of the border
by changng the radius, margin, and padding*/
header { border: 2px solid #004c99; background: rgba(255, 255, 255, 0.9);
padding: 12px; border-radius: 10px; margin-bottom: 25px;
box-sizing: border-box; }

/*Changes the font sizes and colors of all fonts but h3 adjust the location by changing the padding and magin */
h1 { font-size: 2.4rem; color: #003366; }

h2 { font-size: 1.7rem; color: #0055aa; }

h3 { font-size: 1.5rem; color: #003366; border-bottom: 1.5px solid #0055aa;
padding-bottom: 4px; margin-bottom: 12px; }

/*Styles class box by changing the background color, the size and location of the border due to the radius, padding
and margin*/
.box { background: rgba(255, 255, 255, 0.92); border: 1.5px solid #004c99;
border-radius: 10px; padding: 16px; margin-bottom: 25px; box-sizing: border-box; }

/*Styles class sidebar by making it have a fixed location, also adjust the postition of the border and size to make
it fit better into the webpage, adds a box shadow to make it pop*/
.sidebar { position: fixed; top: 50%; left: 20px; transform: translateY(-50%);
width: 240px; background-color: rgba(255, 255, 255, 0.95);
border: 2px solid #004c99; border-radius: 10px; padding: 12px;
max-height: 80vh; overflow-y: auto; box-shadow: 0 0 10px rgba(0,0,0,0.25);
box-sizing: border-box; }

/*Styles the header and links in the sidebar by centering the text and changing the color of the text. As for the links
changes the color of the text for the link and whiole being hoivered over underlines the link */
.sidebar h3 { text-align: center; color: #003366; }

.sidebar a { color: #004c99; font-weight: bold; text-decoration: none; }

.sidebar a:hover { text-decoration: underline; }

/*Styles other links that arent in sidebar by changing the text color and while being
hivered over adds a underline*/
a { color: #005bbb; text-decoration: none; }

a:hover { text-decoration: underline; }

/*Styles the footer by adding and border, aligns all text to the center, and adjust postion of the border to be
relative, adn changes the background color*/
footer { width: 100%; padding: 12px 0; text-align: center; border-top: 2px solid #004c99; margin-top: 30px; background: rgba(255, 255, 255, 0.9);
position: relative; box-sizing: border-box; }


/*Responsive webdesign used to adjust the webpage to fit onto smaller devices, adjust the sidebar and page warpper
in order to fit*/
@media (max-width: 900px) { .sidebar { position: static;
width: auto; margin-bottom: 20px; transform: none; }

.page-wrapper { margin-left: 0; max-width: 100%; padding: 15px; } }