:root {
    --dark_gray: #15151B;
    --light_blue: #849DC1;
    --cyan: #448AA0;
    --dark_blue: #2D3549;
    --slate: #B1B9CC;
}

html {
    background-color: var(--light_blue);
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

img {
    width: 100%;
    object-position: center;
}

nav {
    background-color: var(--dark_blue);
}

nav ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    border-left: 2px solid rgba(236, 227, 208, 0.2);
}

nav li:last-child {
    border-right: 2px solid rgba(236, 227, 208, 0.2);
}

nav a{
    display: block;
    padding: 9px 18px;
    color: var(--slate);
    font-size: 17px;
    letter-spacing: 2px;
    text-decoration: none;
}

nav a:hover {
    background-color: var(--cyan);
}

h2, h3 {
    text-align: center;
}

p {
    color: var(--dark_gray);
    text-align: center;
    padding: 10px;
}

footer {
    text-align: center;
    background-color: var(--dark_blue);
}

footer p {
    color: lightblue;
}

footer a {
    text-decoration: none;
    color: var(--slate);
}

footer a:hover {
    color: var(--light_blue);
}

.project1 {
    display: flex;
    justify-content: center;
}

.project1 a {
    text-decoration: none;
    color: var(--dark_blue);
    font-weight: bold;
}

.project1 a:hover {
    color: var(--slate);
}

.cause {
    text-indent: 20px;
    text-align: left;
    padding-left: 20%;
    padding-right: 20%;
}

h3 a {
    text-decoration: none;
    color: var(--dark_blue);
    font-weight: bold;
}

h3 a:hover {
    color: var(--slate);
}