/* Style the video: 100% width and height to cover the entire window */
#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    transform: translateX(calc((100% - 100vw) / 2));
    height: 100vh;
    width: 100vw;
    object-fit: cover;
}

/* Add some content at the bottom of the video/page */
.content {
    position: fixed;
    bottom: 0;
    background: rgba(0, 0, 0, 0.0);
    color: #f1f1f1;
    width: 100%;
    padding: 20px;

}

/* Style the button used to pause/play the video */
#myBtn {
    width: 200px;
    font-size: 18px;
    padding: 10px;
    border: none;
    background: #000;
    color: #fff;
    cursor: pointer;
    float: right;
}

#myBtn:hover {
    background: gray;
    color: black;
}

body{
    font-family: 'Roboto', sans-serif;
    text-shadow: 1px 1px #000;
}

h1{
    display:inline;
}

#myName{
    font-family: 'Amatic SC', cursive !important;
    margin: 0 0;
    padding: 0 0;
    font-size: 3.2em;
}

#myNumber{
    margin-bottom: 10px;
    padding: 0 0;
    font-size: 1.1em;
}


#myNumberLink{
    color: gray;
}

#myNumberLink:visited{
    color: white;
}

#myEmail{
    margin-bottom: 10px;
    padding: 0 0;
    padding-left: 10px;
    font-size: 1.1em;
}


#myEmailLink{
    color: gray;
}

#myEmailLink:visited{
    color: white;
}

a#myEmailLink:hover{
    color: yellow;
}

a#myNumberLink:hover{
    color: yellow;
}

#nethmunson{
    width: 20%;
    height: auto;
}



@media (max-width: 423px) { 
    
    .btn{
        font-size: 2em !important;
        margin: 10px 0;
        display: inline-block;
        vertical-align: middle;
    }
    
    .content{
        margin-bottom:10%;
        text-align:center;
    }
}

@media (max-width: 589px){
    
    #myBtn{
        display:none;
    }
    
    #nethmunson{
        display:none;
    }
    
    #myNumber{
    padding-bottom: 30px !important;
    font-size: 2em;
    }
    
    #myNumberLink{
    color: Yellow;
}
    .contact{
    display:block;
}

    
}