html{
    font-family:'Verdana';
}

body{
    background-color: #c898e5;
    text-align:center;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: white;
    padding:0;
    margin:0;
}

a:hover{
    text-decoration: underline;
}

a:active{
    color: #826996;
}

.boxed{
    background-color: #a354d4;
}
section{
    background-color: #b177d4;
    flex-grow: 1;
    max-width: 90vw;
    margin-bottom:30px;
    margin-left:5vw;
    margin-top:30px;
}
nav{
    padding: 1em;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1;
} /* I know I shouldn't be using a table for this, but this is how I did it originally, and I'm
    too lazy to test if flexbox works in sandbox. */

.boxed  p{
    margin: 3px;
}

a{
    color: #e2bfff;
}

header  h1{
    margin:0; /* This fixes the gap between the header and the top of the page. Idk how, but it does. */
}
.img{
    padding-top:20px;
}
a.social{
    font-size:30px;
}
@keyframes python-bar{
    from {width:0px;}
    to{width:90%;}
}
@keyframes java-bar{
    from {width:0px;}
    to {width:10%;}
}
@keyframes html-bar{
    from {width:0px;}
    to {width:30%;}
}
.progress-back{
    background-color:lightgrey;
    border-radius:10px;
    margin-left:25vw;
    margin-right:25vw;
}
.progress-front{
    background-color:lightgreen;
    border-radius:10px;
    color:#054503;
    animation-duration:2.5s;
    animation-timing-function:ease-in-out;
}
.skills p{
    margin-top:0px;
}