@font-face{
    font-family: DroidSans;
    src: url('../fonts/DroidSans.ttf');
}
@font-face{
    font-family: Ubuntu;
    src: url('../fonts/Ubuntu-Regular.ttf');
}
@font-face{
    font-family: Roboto;
    src: url('../fonts/Roboto-Regular.ttf');
}
@font-face{
    font-family: OpenSans;
    src: url('../fonts/OpenSans-Regular.ttf');
}

* {
    box-sizing: border-box;
}

body{
    margin: 0;
    padding: 0;
    background-color: #E6ECF0;
}

.header{
    margin: none;
    padding: none;
    top: 0; left: 0;
    width : 100%; height : 20vw;
    background-image : url("../img/background.jpeg");
    background-size : cover;
}

.header h1{
    font-size: 6vw;
    text-align: center;
    font-family: Ubuntu;
    margin: auto;
}

.info{
    margin-right:none;
    margin-top:3vw;
    width: 70%;
    float: right;
}

.links{
    width: 15vw;
    margin: auto;
}

.links img{
    width: 4vw;
    height: 4vw;
    margin: auto;
}

#headshot{
    position : relative;
    float: left;
    border-radius : 50%;
    top: 3vw; left: 3vw;
    width: 15%;
}

.quickbar{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #222;
}
.quickbar li{
    display: inline-block;
    width: 49%;
}
.quickbar a{
    display: block;
    color: #ddd;
    text-decoration: none;
    text-align: center;
    font-size: 16px;
    font-family: Roboto;
    padding: 10px 1vw;
}
.quickbar a:hover{
    background-color: #111;
    color:white;
}

#about{
    padding: 1vw 8vw;
    font-family: DroidSans;
}
#about p{
    font-size: 20px;
    color: #333;
}
#about a{
    color: black;
}

@media screen and (max-width: 600px){
    .header {height: 90vw;}
    .header h1 {font-size: 12vw; text-shadow: 1px 1px 2px white, -1px -1px 2px white;}
    .info {font-size: 12vw; width: 100%;}
    .links {width: 38vw;}
    .links img{width: 10vw; height: 10vw;}
    #headshot {display: block; width:50%; left: 25%;}
    .quickbar li {display: block; width: 100%;}
    #about p {font-size: 4vw;}
}