* {
    box-sizing:border-box;
}
html,body {
    width:100%; height:100%;
    margin:0; padding:0;
}
body {
    background-color:black; color:white;
    font-family:"Avenir Next",Avenir,"Open Sans", Roboto, Verdana, sans-serif;
    font-weight:400;
    padding:5%;
    font-size:2.5vw;
    display: table;
    min-height: 100%;
}
h1, h2 {
    font-weight:300;
    margin:0; padding:0;
}
h1 {
    font-size:7.5vw;
}
h2 {
    padding-top:0.5em;
    font-size:3.5vw;
}
a {
    color:white;
}
p {
    margin:0; padding:0;
}
h1 a, .email, #social a {
    text-decoration:none;
}
#cardcontainer {
    display: table-cell;
    vertical-align: middle;
    width:100%;
    position:relative;
}
#card1{
    width:46.875vw;
    float:left;
    text-align:center;
}
#projects {
    text-align:left;
}
ul {
    margin-top:0;
}
#avatar {
    position:absolute; right:0; width:36vw; margin-top:-18vw; top:50%; border-radius:99999px;
}

@media all and (orientation:portrait)
{
    body {
        display:block;
        font-size:5vw;
    }
    #card1 {
        width:auto;
        float:none;
    }
    h1 {
        font-size:15vw;
    }
    h2 {
        font-size:7vw;
    }
    #avatar {
        display:block; position:static; width:70%; margin:2em;
    }
}
