header
{
    background-color: darkslategray;
    padding:1%;
    border-top:0.5em solid darkcyan;
}

body
{
    background-color:slategrey;
}

nav>ul>li
{
    display: inline-block;
    padding: 1% 1% 1% 2%;
    font-family: sans-serif;
    color:cornsilk;
}

#logo
{
    vertical-align: middle;
}

li a:link,li a:visited
{
    color:cornsilk;
    text-decoration: none;
}

li a:hover
{
    color:steelblue;
}

h1
{
    font-size: 300%;
}

h2
{
    font-size: 250%;
}

div section
{
    text-align: center;
    padding-top: 10%;
    color:cornsilk;
}

.button
{
    display: inline-block;
    border: 0.2em solid darkslategray;
    padding: 1%;
    margin: 2% 0%;
    border-radius: 2em;
}

/* button
{

} */

#login-button:hover p, #login-button2:hover
{
    color:darkslategray;
}

hr
{
    border-bottom: 0.2em solid cornsilk;
}

p
{
    font-size: 150%;
    color:cornsilk;
}

.box
{
    float: left;
    width: 50%;
    height: 10em;
    box-sizing: border-box;
    text-align:center;
    padding: 3% 2% 0% 0%;
}

li
{
    list-style-type: none;
}

#photo
{
    border: 0.4em solid slateblue;
    padding: 3% 1%;
    margin: 0% 22%;
    background-color: darkcyan;
    border-radius: 6%;
}

#about-me-text
{
    border: 0.5em dashed darkblue;
    margin-top: 6%;
    padding: 3%;
}

.graph
{
    width: 100%;
    height: 100%;
    border: 0.4em solid #aeaeae;
    background-color: #eaeaea;
    padding: 2%;
}

.bar
{
    width: 30%;
    margin: 10% 4% 4% 0%;
    padding:0% 0% 0% 0%;
    display: inline-block;
    position: relative;
    background-color: #aeaeae;
    vertical-align: bottom;
    height:4em;
}

figcaption
{
    color:cornsilk;
}

#python
{
    width: 120%;
    height: 100%;
    right:50%;
    margin: 0 auto;
    position: relative;
    background:yellow;    
}

#java
{
    width: 100%;
    height: 100%;
    right:50%;
    margin: 0 auto;
    position: relative;
    background:lightcoral;
}

#html
{
    width: 95%;
    height: 100%;
    right:52.5%;
    margin: 0 auto;
    position: relative;
    background:orangered;
}

#css
{
    width: 80%;
    height: 100%;
    right:60%;
    margin: 0 auto;
    position: relative;
    background:blue;
}

#edu1, #edu2
{
    height: 20em;
    width: 46%;
    border: 0.3em solid slateblue;
    margin: 2% 2% 4% 2%;
    padding: 2% 5% 10% 5%;
}

#edu1 h2, #edu2 h2
{
    font-size: 175%;
}

#edu1 img, #edu2 img
{
    margin: 0% 20%;
}

#edu2
{
    border: 0.3em dashed darkblue;
}

input, textarea
{
    width:20em;
    height:1.5em;
    padding:2%;
    margin:2%;
    vertical-align: middle;
}

textarea
{
    height:4.5em;
    width: 24em;
    resize: none;
}

fieldset
{
    display:inline-block;
    width: 20em;
    border: 0.2em solid darkslategray;
    padding: 3% 3% 3% 0%;
    margin:1%;
}

#required
{
    border: 0.2em solid red;
}

.login-button2
{
    color:cornsilk;
    background-color: slategray;
    padding:4%;
}

.experience, .extra-curricular, .blog
{
    width: 60%;
    margin:5% 0% 0% 20%;
    padding: 0% 2% 5% 2%;
    border: 0.1em solid black;
    border-radius: 15%;
    background-color: darkslateblue;
}

.extra-curricular
{
    border-radius: 10%;
    background-color: darkslategray;
}

#post
{
    margin-right:5%;
}

.social
{
    height:20%;
}

.projects
{
    padding-bottom:20%;
}

footer
{
    background-color: darkslategray;
    padding:1%;
    border-top:0.5em solid darkcyan;
}

.blog
{
    border-radius: 5%;
    background-color: steelblue;
}