html {
    height: 100%;
}
body {
    margin: 0; /* Removes inherited margin from document body */
    overflow: hidden;
    height: 100%;
}
p {
    margin: 0; /* Removes margins from all paragraphs */
}
#vault {
    height: 100%; /* Height 100% of screen */
    width: 100%; /* Width 100% of screen */
}
#top {
    position: relative; /* Positioned relative to default position */
    float: right; /* Element is displayed on the right side of parent element*/
    width: calc(100% - 70px); /* Width 100% minus 70px for side bar */
    height: 70px; /* Height of 70 pixels */
    margin: 0; /* Removes any inherited margin */
    background-color: #333333; /* Sets color to a dark grey */
    transition: 0.5s; /* uses 0.5 second transition */
}
#top form {
    height: 100%; /* Sets height to 100% parent height */
    display: flex; /* Display mode flexible */
    align-items: center; /* Vertically centers contents or children*/
}
#search_box {
    float: left; /* Floats element to left of parent */
    width: 50%; /* Element width 50% of parent width */
    height: 40px; /* Height 40 pixels */
    padding: 0 0 0 10px; /* 10 pixel padding on left for text*/
    border: none; /* No displayable border */
    border-radius: 3px 0 0 3px; /* Rounds corners on element */
}
#search_box_reset {
    height: 40px; /* Heiht 40 pixels */
    width: 40px; /* Width 40 pixels */
    padding: 0; /* Removes padding */
    border: none; /* No displayable border */
    border-radius: 0 3px 3px 0; /* Rounds corners on element*/
    cursor: pointer; /* Changes cursor type to pointer when hovering */
}
#side_navigation {
    position: relative; /* Positioned relative to default position */
    float: left; /* Element is displayed on the left side of parent element*/
    width: 70px; /* Width 70 pixels*/
    height: 100%; /* Height of 100% of the screen */
    padding: 0; /* Removes any inherited padding */
    margin: 0; /* Removes any inherited margin */
    display: inline-block; /* Displays the element with no line break after */
    background-color: #333333; /* Sets color to a dark grey */
    overflow: hidden; /* hides any overflow elements */
    transition: 0.5s; /* uses 0.5 second transition */
}
.side_options {
    position: relative; /* Positioned relative to default position */
    float: left; /* Moves element to left of parent */
    width: 100%; /* Sets width of element to 100% width of parent*/
    max-height: 70px; /* sets maximum height to 70 pixels */
    cursor: pointer; /* Changes cursor type to pointer when hovering */
    color: white; /* Sets color to white */
    overflow: hidden; /* hides any overflow elements */
}
#side_navigation i {
    display: inline-block; /* Displays the element with no line break after */
    line-height: 70px; /* Sets line height to 70px, centres text in element vertically */
    height: 70px; /* Sets height to 70 pixels */
    width: 70px; /* Sets width to 70 pixels */
    text-align: center; /* Centers content inside element */
    cursor: pointer; /* Sets cursor type when hovering*/
    margin: 0; /* Removes margins */
    float: left; /* Moves element to left of parent */
    font-size: 48px; /* Sets the size to 48 pixels */
}
.side_navigation_description {
    display: inline-block; /* Displays the element with no line break after */
    line-height: 70px; /* Sets line height to 70px, centres text in element vertically */
    height: 70px; /* Sets height to 70 pixels */
    width: 180px; /* Sets width to 180 pixels */
    text-align: center; /* Centers content inside element */
    cursor: pointer; /* Sets cursor type when hovering*/
    margin: 0; /* Removes margins */
    float: left; /* Moves element to left of parent */
    font-size: 30px; /* Sets the size to 30 pixels */
}
#vault_body {
    position: relative; /* Positioned relative to default position */
    width: calc(100% - 90px); /* Width 100% minus 90px for side bar and padding */
    height: calc(100% - 80px); /* Height 100% minus 80px for top bar and padding */
    display: inline-block; /* Displays the element with no line break after */
    transition: 0.5s; /* uses 0.5 second transition */
    overflow: scroll; /* Allows user to scroll to overflowing elements */
    overflow-x: hidden; /* Prevents any elements from overflowing max width */
    background-color: #f1f1f1; /* Sets background to hex colour code #f1f1f1 */
    padding: 10px 10px 0 10px; /* 10 pixel padding on inside */
}
.overlay {
    position: fixed; /* Element is restricted from moving due to other elements */
    width: 100%; /* Width 100% of parent element width */
    height: 100%; /* Height 100% of parent element height */
    display: none; /* Display set to none so it is hidden */
    align-items: center; /* Property of display flex, vertical centering */
    z-index: 2; /* Positioned on a different z axis to rest of page */
    background-color: rgba(0,0,0,0.7); /* Dims background to reduce confusion */
}
.overlay_foreground {
    width: 700px; /* Sets width to 700 pixels */
    height: 500px; /* Sets height to 500 pixels */
    margin: auto; /* Sets margin to auto, horizontally centering it */
    border-radius: 5px; /* Curves corners of element */
}
.overlay_head, .overlay_head_button {
    width: 100%; /* Width 100% parent elements width */
    height: 50px; /* Height 50 pixels */
    border-radius: 5px 5px 0 0; /* Curves top left and right corners*/
    background-color: #333333; /*Sets background color to dark grey*/
    color: white;
}
.overlay_head p, .overlay_head_button p, .overlay_head_button button {
    height: 100%; /* Height 100% of parent height */
    margin: auto; /* Vertically centres element */
    text-align: center; /* centres text */
    line-height: 50px; /* Sets line height to 50 pixels, same as element height */
}
.overlay_head p {
    width: 100%; /* Width 100% of parent element */
    border-radius: 5px 5px 0 0; /* curves top right and left corners */
}
.overlay_head_button p {
    width: calc(100% - 100px); /* Sets width to 100% parent width minus 50 pixels*/
    margin-left: 50px; /* LEft margin 50 pixels so text is centered properly */
    border-top-left-radius: 5px; /* Curves top left corner */
    float: left; /* Moves element to left of parent */
}
.overlay_head_button button {
    width: 50px; /* Width 50 pixels */
    border: none; /* Displays no border */
    border-top-right-radius: 5px; /* Curves top right corner */
    cursor: pointer; /* Sets cursor to type pointer when hovered */
    float: right; /* Moves element to right of parent */
    background-color: #333333; /* Sets background colour to dark grey */
}
.overlay_body {
    width: 600px; /* Width 100% of parent width */
    height: calc(100% - 50px); /* Height 100% of parent minus 50 pixels for head */
    border-radius: 0 0 5px 5px; /* Rounded bottom left and right corners */
    background-color: #f1f1f1; /* Sets background color to hex code #f1f1f1 */
    padding: 0 50px; /* Applies 50px padding on the inner left and right side */
}
input[type = email], input[type = password], input[type = text] {
    font-size: 20px; /* Sets font size to 20px for all inputs of these types */
    padding: 0;
}
.overlay_input {
    width: 546px; /* Sets width of items to 546px */
    margin: 0 25px; /* Applies 25px margin to the left and right side */
}
.record_user_details {
    width: 248px; /* Sets username and password inputs to 248px width */
    margin: 0 25px; /* Applies 25px margin to the left and right side */
    display: inline-block; /* Forces items to sit next to each other */
}
.overlay_body button {
    width: 200px; /* Sets width to 200 pixels */
    border: none; /* removes border */
    height: 35px; /* Sets height to 35 pixels */
    cursor: pointer; /* sets cursor type when hovering to pointer*/
    margin: 0 25px; /* Applies 25px margin to the left and right side */
    float: left; /* Automatically flows to the left */
}
#display_save_button, #login_button {
    float: right; /* Automatically flows to the right */
}
.record_div {
    width: 300px; /* Sets width to 300 pixels */
    height: 169px; /* Sets height to 169 pixels, 16:9 aspect ration */
    margin: 10px; /* 10 pixel margin on all sides */
    padding: 0; /* Removes inherited padding */
    display: inline-flex; /* Sets display mode */
    align-items: center; /* Property of display flex, vertical centering */
    background-color: #333333; /* Sets background to dark grey */
}
.record_p {
    width: 250px; /* Sets width to 250 pixels */
    height: 141px; /* Sets height to 141 pixels, 16:9 aspect ratio */
    padding: 0; /* Removes padding */
    text-align: center; /* Horizontally centers text */
    line-height: 141px; /* Sets line height to same as element height 0*/
    cursor: pointer; /* Sets cursor type to pointer on hover */
    background-color: white; /* Sets white background color */
    margin: auto; /* Horizontally centers element */
}
#generated_password {
    margin: 0 0 0 25px;
    width: 522px;
}
#copy_to_clipboard {
    margin: 0 25px 0 0;
    cursor: pointer;
}
#generate_password_options {
    margin: 25px;
}
.password_strength_display {
    height: 10px;
    width: 247px;
}
#generate_password_strength {
    height: 10px;
    margin: 0 0 0 25px;
    width: 526px;
}
#verify_email_message {
    height: 50px;
    width: 100%;
    background-color: green;
    padding: 0 20px;
    display: none;
}
#verify_email_message p{
    line-height: 50px;
    color: white;
    padding: 0 5px;
    cursor: pointer;
}