* {
    font-family: sans-serif;
}

body {
    background-color: #f5eee6;
}

img {
    width: 80px;
}

h1 {
    text-align: center;
}

.navbar {
    background-color: #efe2d0;
    width: 100%;
    position: fixed;
    top: -10px;
    transition: top 550ms;
}

#logo {
    float: right;
    height: auto;
    width: 80px;
}

.navbar {
    background-color: #efe2d0;
    width: 100%;
    position: fixed;
    transition: top 550ms;
}

.navbar a {
    float: left;
    display: block;
    color: #000;
    text-align: center;
    font-size: 15px;
    text-decoration: none;
    font-weight: bold;
    padding: 32px;
}

.navbar a:hover {
    background-color: #628563;
}

.navbar a.active {
    background-color: #774040;
    color: #fff;
}

#logo {
    width: 70px;
    height: 70px;
    float: right;
    padding: 10px;
}

/* SVG diagram CSS */
#diagram {

    margin-top: 0px;

}

#rect1,
#rect2,
#rect3,
#rect4,
#rect5,
#rect6,
#rect7 {

    stroke: white;
    stroke-width: 5;
    stroke-opacity: 0.7;
    fill: #628563;

}

#rect1:hover {

    stroke-opacity: 1.5;

}

#text1,
#text2,
#text3,
#text4,
#text5,
#text6,
#text7 {

    fill: #f5eee6;
    font-size: 20px;
    font-weight: 400;
    font-family: 'Trebuchet MS', sans-serif;
    text-anchor: middle;

}

#text1:hover {

    cursor: pointer;
    font-weight: 900;

}

#text2:hover {

    cursor: pointer;
    font-weight: 900;

}

#text3:hover {

    cursor: pointer;
    font-weight: 900;

}

#text4:hover {

    cursor: pointer;
    font-weight: 900;

}

#text5:hover {

    cursor: pointer;
    font-weight: 900;

}

#text6:hover {

    cursor: pointer;
    font-weight: 900;

}

#text7:hover {

    cursor: pointer;
    font-weight: 900;

}

#l1,
#l2,
#l3,
#l4,
#l5,
#l6,
#l7,
#l8 {

    stroke: black;
    stroke-width: 5;

}