html {
    background-image: linear-gradient(to bottom, var(--ucbPurple), var(--ucbPink));
    text-shadow: .15em .15em .45em rgba(0,0,0,0.3);
}

body {
    margin-left: 6.25em;
    margin-right: 6.25em;
    font-family: Calibri;
}

:root {
    --indigo: #4B0082;
    --darkIndigo: #000113;
    --backgroundColor: #FFF0F5;
    --navHover: #e1d4ec;
    --headerBackground: #b6acc5;
    --ucbPurple: #8a61c3;
    --ucbIndigo: #624181;
    --ucbPink: #c67d9b;
}

a {
    text-decoration: none;
    color: var(--backgroundColor);
    font-family: Calibri;
    padding: .5em;
    font-size: 1em;
}

footer {
    display: table;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    bottom: 0;
    padding: 1em;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--backgroundColor);
    font-family: Calibri;
}

.title {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 50px;
    color: var(--backgroundColor);
}

.logo {
    position: relative;
    height: 75px;
    width: 75px;
    margin-left: 2em;
    z-index: 10;
}

.logo-image {
    border-radius: 50%;
    border: 3px solid var(--backgroundColor);
    margin: 2em;
}


.navbar {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    justify-content: flex-start;
    right: 0;
    top: 0;
    opacity: 97%;
    z-index: 9;
}

.navbar a {
    display: inline-block;
    text-align: center;
    color: var(--backgroundColor);
    padding: 1em;
    transition: .3s;
    text-decoration: none;
    position: relative;
    margin-top: 3em;
    margin-bottom: 3.5em;
}

.navbar a:hover {
    background-color: var(--ucbIndigo);
}

.nav-divider {
    display: inline-block;
    text-align: center;
    border-left: .15em solid var(--backgroundColor);
    background-color: var(--backgroundColor);
    position: relative;
    margin-top: 3em;
    margin-bottom: 3.5em;
}

.nav-socials
{
    padding: .25em;
}

.navbar .icon {
    display: none;
}

.top-divider {
    border-top: .5em solid var(--backgroundColor);
}

.bottom-divider {
    border-bottom: .5em solid var(--backgroundColor);
}

.index-about-container {
    width: 72em;
    height: 16em;
    background-color: var(--navHover);
    position: relative;
}

.index-about-header {
    font-size: 50px;
    margin: 0;
    padding: .15em;
}

.index-about-paragraph {
    font-size: 1.5em;
    margin: 0;
    padding: .5em;
    color: var(--backgroundColor);
}

.index-image {
    width: 100%;
    height: 100%;
    border: solid var(--backgroundColor);
    display: block;
    left: auto;
    right: auto;
}

footer a {
    padding: 0 .5em;
}

@media screen and (max-width: 1024px)
{
    .index-image
    {
        width: 98%;
        height: 98%;
    }
    a, p
    {
        font-size: .25em;
    }
    h1, h2, h3, h4, h5, h6
    {
        font-size: 1em;
    }
    body {
        margin-left: .5em;
        margin-right: .5em;
    }
    .navbar {
        display: block;
        left: -1.5em;
        right: 0;
        width: 100%;
    }
    .navbar .nav-socials {
        display: none;
    }
    .navbar a {
        font-size: .75em;
        bottom: 4.5em;
        left: -2em;
        padding: .5em;
        margin: 0;
        display: inline-flex;
    }
    .logo {
        height: 3em;
        width: 3em;
        left: 0;
    }
    .logo-image {
        border: 1px solid var(--backgroundColor);
    }
    .nav-divider {
        display: none;
    }
}

@media screen and (max-width: 1024px) {
    .navbar a {display: none;}
    .navbar a.icon {
        float: left;
        left: 2.5em;
        display: block;
        top: 3.5em;
        padding: 1em;
    }

    .navbar.responsive .logo {
        display: none;
    }
    .navbar.responsive {
        position: relative;
        padding-bottom: 1.5em;
    }
    .navbar.responsive a.icon {
        position: absolute;
        display: block;
        left: 2em;
        top: -.25em;
        bottom: 16.75em;
        margin: 0;
        padding: .55em;
    }
    .navbar.responsive a {
        left: 2em;
        top: 1.75em;
        float: none;
        display: block;
        text-align: left;
    }
}