/*This CSS is changing the font for all the text in the body to be arial and sans-serif and changes text color.Changes the line-height, and adjust the width, margin, and padding to the default settings. Also changes the whole background to the image given*/
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; }

/* Adds a transperent white overlay to the image making the borders stand out*/
body::before { content: ""; position: fixed; inset: 0;
background: rgba(255,255,255,0.65); z-index: -1; }

/* Adss spacing between these sections by adding a marign to the bottom */
section, p, div, footer { margin-bottom: 20px; }

/* Styles the page to allow space between the sidebar and main body pargraphs due to
the padding and margin also adjust the size to fit for responsive web desing due to max-
width and box-sizing*/
.page-wrapper { margin-left: 260px;padding: 20px;
max-width: calc(100% - 280px); box-sizing: border-box; }

/*Adjust padding and margin for the 3 headers */
h1, h2, h3 { margin-top: 0; padding: 4px 8px;}

/* Adds a border around the main headers, changes the color of the borders background, adjust the size and placement of the border due to padding, border radius, and margin-bottom. Makes the borde a solid blue line */
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 size of the text and changes the color to a dark blue for all header1*/
h1 { font-size: 2.4rem; color: #003366; }

/*Changes header2's text size and text color to a blue */
h2 { font-size: 1.7rem; color: #0055aa;}

/*Changes header3's text size and color to a dark blue, Also adds a border to seperate it
from the main paragrpahs/information */
h3 { font-size: 1.5rem; color: #003366; border-bottom: 1.5px solid #0055aa;
padding-bottom: 4px; margin-bottom: 12px; }


/*Adds the borders around each section in order to seperate the paragraph adjust the radius of the borders, adjust location with padding, and the bord line and background color */
.summary, .preamble, .explanation, .participation, .benefits,
.requirements { background: rgba(255, 255, 255, 0.92);
border: 1.5px solid #004c99; border-radius: 10px;
padding: 16px; margin-bottom: 25px; box-sizing: border-box; }


/*Adjust the location of the sidebar to be on the left, sets its postition to fixed so it
doesnt move when scrolling, adds a border around the sidebar that has a different background color, adds a shadow to the border and adjust the size of the border*/
.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; }

/*Alignts header to the center and changes the text color to a dark blue */
.sidebar h3 { text-align: center; color: #003366; }

/* Adjust links in the sidebar to have different text color, and makes the text bold */
.sidebar a { color: #004c99; font-weight: bold; text-decoration: none; }

/*Styles the links in the sidebar to be underlined when being hovered over*/
.sidebar a:hover { text-decoration: underline; }


/*Changes the color of the links that arent in sidebar */
a { color: #005bbb; text-decoration: none; }

/*Links that arent in sidebar, when hovered over get undlined */
a:hover { text-decoration: underline; }


/*Styles the footer by adjusting its location with padding, moves all text
to the center, adds a border that has a different background color, and makes the borders postion relative, changes the color of the border outline*/
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; }

/*Changes the links in footer adjust the margin, makes the text bold and changes the color
of the text */
footer a { margin: 0 8px; font-weight: bold; color: #003366; }


/* Used for responsive web desgin adjust the size of the webpage when being used on
small screen devices does this to the whol webapge and the page wrapper*/
@media (max-width: 900px) { .sidebar { position: static;
width: auto; margin-bottom: 20px; transform: none; }

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