@media (min-width:700px) and (min-height:300px) {
    #name {
        float: left;
        font-family: "gill sans", sans-serif;
        font-size: 17vmin;
        background-color: #66fcf1;
        height: 50vh;
        width: 60vw;
    }

    #picme {
        position: relative;
        display: flex;
        justify-content: right;
        align-items: right;
        float: right;
        height: 50vh;
        width: 40vw;
        background-color: #66fcf1;
    }

    #me {
        width: 60%;
        height: auto;
    }

    #intro {
        padding:0px;
        margin:0px;
        font-family: 'Roboto';
        display: flex;
        flex-direction:column;
        align-items: left;
        text-align:left;
        background-color: #45A29E;
        font-size: 2vmax;
        width: 100vw;
        height: 50vh;
    }
}

@media (max-width:700px),
(max-height:300px) {
    #intro {
        padding:0px;
        margin:0px;
        font-family: 'Roboto';
        display: flex;
        flex-direction:column;
        align-items: left;
        text-align:left;
        background-color: #45A29E;
        font-size: 2.5vmax;
        width: 100vw;
        height: 70vh;
    }

    #name {
        float: left;
        font-family: "gill sans", sans-serif;
        font-size: 10vmin;
        background-color: #66fcf1;
        height: 30vh;
        width: 100vw;
    }

    #picme {
        display: none;
    }
}

#home {
    position: relative;
    width: 2%;
    left: 15px;
    bottom:5px;
}

#h{
    display:flex;
    flex-direction:row;
}

.btn-group-xs > .btn, .btn-xs {
    padding: .25rem .4rem;
    font-size: .875rem;
    line-height: .5;
    border-radius: .2rem;
}