:root {
    --purple: #6E44FF;
    --light-purple: #9A7DFF;
    --white: #F2F7FF;
    --text-color: #1B264F
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--white);
}

nav img {
    width: 3.25rem;
    height: 3.25rem;
    position: absolute;
}
nav > a {
    height: 3.25rem;
    margin-left: 1rem;
}

nav {
    display: flex;
    align-items: center;
    background-color: var(--purple);
    padding: 1rem 0;
    width: 100%;
}

ul {
    padding: 0;
    margin: 0 auto;
    position: relative;
    isolation: isolate;
}

li {
    float: left;
    list-style-type: none;
}

li > a {
    font-family: sans-serif;
    text-transform: capitalize;
    font-size: 1.25rem;
    text-decoration: none;
    color: var(--text-color);
    margin: 0 1.5rem;
}

@media (max-width: 900px) {
    body {
        overflow-x: hidden;
    }
    nav img {
        display: none;
        width: 3rem;
        height: 3rem;
    }
    li > a {
        margin: 0 0.75rem;
    }
  
}