body {
    background-color:  #545454 ;
}
      
.right-align { /*video alignment and non-text element alignment if necesary*/
    display: block;
    margin-left: auto;
    margin-right: auto;
}


.div a {
    float: left; /* to move element to the left */
}

.div b {
    float: right; /* To move element to the right */
}

/* the next stuff is all headings until you reach the .container*/
header {
    padding-left: 10px;
    font-family: Arial, sans-serif;
    color: #d97c8b;
	font-size: 50px; 
    font-weight: 500; 
    margin: 20px;
    }

.customheading {
    font-family: Arial, sans-serif;
    font-weight: bold;
    color: #ffffff;
	font-size: 1.75em;
    font-weight: 500;
    margin-left: 20px;
}
        
.menuheading * {
    font-family: Arial, sans-serif;
    font-weight: 400;
    color: #ffffff;
	font-size: 1.1em;
    text-decoration: none; /* so that links show up normally instead of text*/
} 

.menuheading .excluded {
    font-weight: 700; 
    font-family: Arial, sans-serif;
    color: #000000;
	font-size: 1em;
    text-decoration: none;
} 

.textheading {
    font-family: Arial, sans-serif;
    color: #ffffff;
    font-size: 1em;
    font-weight: 350;
    margin-left: 20px;
    text-decoration: none;
}

.textheadingbold {
    font-family: Arial, sans-serif;
    color: #ffffff;
    font-size: 1em;
    font-weight: 700;
    margin-left: 20px;
}


.contianer * {
    padding-right: 275px;
}

nav {            /* nav bar*/
    background: #777777; 
    float: right;        
    width: 250px;
    height: 500px;
    display: flex;       /* makes flexable organisation (lerned from gpt) */
    flex-direction: column; 
    justify-content: center; /* Where to set the default position of links */
    align-items: center;     /* Where to set the position of other items */
    padding: 0;            
    margin: 0;             
    box-sizing: border-box;
    padding-left: 10px;

}

nav a {
    text-align: center;  
    display: block;      
    margin: 10px 0;      /* margin between links under eachother */
}



.content {                 /* stacks elements next to instead of below eachother in a row*/
    display: flex;           
    flex-direction: row;    
   
}
.content img {
    margin-left: 20px;      /* padding between image and text */
    margin-right: 25px;
    padding-top: 20px;
    height: auto;         /* Keeps image proportions */
}

.contentwitho {                 /* same thing but with no padding!! */
    display: flex;           
    flex-direction: row;    
   
}
.contentwitho img {
    margin-left: 20px;      /* padding between image and text */
    margin-right: 1px;
    padding-top: 10px;
    height: auto;         /* Keeps image proportions */
}

aside {  
         
    float: right;
    width: 255px;
    margin-left: 10px;
    padding: 5px;
          } 

table {
  
    border: 1px solid white; /* Border around table */
}

th, td {
    border: 1px solid white; /* Borders for cells to add style */
    padding: 10px; /* to space text and border */
    text-align: left; 
}

caption {
    font-size: 1.5em; 
    margin-bottom: 10px; /* space between caption and bottom edge */
}


.footer {
    text-align: center;
    padding: 8px;
    background-color: #2f2e2e;
    color: #ffffff;
    max-width: 100%;  /* stretch the footer*/
    margin-left: auto;
    margin-right: auto;
    font-family: Arial, sans-serif;
    box-sizing: border-box; /* max border setting to stabalize for each device and browser*/
}