:root {
    --background-color: #1d212c;
    --accent-color: lightblue;
    --text-color: white;
    --link-color: cornflowerblue;
    --hover-color: cornflowerblue;
}

html {
    background: var(--background-color);
    color: var(--text-color);
    font-family: Georgia, serif;
    font-size: 14pt;
    line-height: 1.5;
}

h1 {
    text-align: center;
    font-size: xxx-large;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--accent-color);
}

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

a:hover  {
    color: var(--hover-color);
    text-decoration: underline
}

main {
    border-radius: 10px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
}

nav {
    text-align: left;
    top: 30%;
    position: fixed;
    font-size: xx-large;
}

nav ul {
    margin: 0;
    padding: 0;
}

nav ul li {
    text-indent: .5em;
}

@media (max-width:1200px) {
    nav {
        position: relative;
        top:auto;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
        padding: 5px;
        font-size: x-large;
    }

    nav ul {
        text-align: center;
    }

    nav ul li {
        display: inline-block;
        min-width: min-content;
        padding-right: .2em;
        text-indent: .2em;
    }
}

#car {
    animation: MoveCloser 5s linear 1;
}

@keyframes MoveCloser {
    0% {
        width: 30px;
    }
    100% {
        width: 150px;
    }
}

.flex-container {
    display: flex;
}

blockquote {
    line-height: 1.5;
    border: 1px solid grey;
    padding: 5px;
}

code {
    color: darkgreen;
    padding: 5px;
}

#profileImage {
    border: 4px solid var(--accent-color);
    padding: 10px;
    float: right;
}

@media (max-width: 550px) {
    #profileImage {
        width: 20%;
    }

    nav {
        font-size: large;
    }
}

@media (max-width: 380px) {
    #profileImage {
        visibility: hidden;
    }
}

#links img,footer img, li img, h1 img, h2 img, h3 img, p img, .dropme img {
    height: 1em;
}