* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui;
    background-color: #eff1f5;
}

/* Position and style the close button (top left corner) */
.sidenav .closebtn {
    font-size: 36px;
}

/* Position and style the open button (top left corner) */
.openbtn {
    font-size: 36px;
}

/* Style the side navigation */
.sidenav {
    height: 100%;
    width: 230px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #9ca0b0;
    overflow-x: hidden;
    align-items: left;
    align-content: left;
}


/* links */
a {
    color: #4c4f69;
    padding: 16px;
    text-decoration: none;
    /* display: block; */
    display: flex;
    align-items: left;
    justify-content: left;
    font-family: system-ui;
    font-weight: bold;
}

/* Change color on hover */
.sidenav a:hover {
    background-color: #179299;
    color: #e6e9ef;
}

/* Style the content */
.content {
    margin-left: 230px;
    padding-left: 20px;
}

h1 {
    color: #4c4f69;
}

h2 {
    color: #5c5f77;
}


p {
    color: #6c6f85;
}

.sidenav img {
    width: 30px;
    height: 30px;
}

.image {
    flex-basis: 10%;
}

.text {
    font-size: 20px;
    padding-left: 10px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}
  
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}