body {
    background: #DFE5F2;
}

h1, h3 {
    display: inline;
    color: black;
}

label {
    display: inline-block;
    text-decoration: none;
    margin: 5px 0px;
    font-weight: normal;
    color: #730A1D;
}

textarea {
    border: 2px;
    width: 245px;
    resize: none;
}

#navbar {
    top: 0px;
    width: 85%;
    margin-left: 80px;
}

#navlinkbar {
    margin: inherit 10px;
    margin-left: 40px;
    color: #730A1D;
    text-decoration: none;
}


#about {
    margin-top: -5px;
    margin-bottom: 6px
}

#propic {
    display: inline-block;
    max-width: 86%;
    height: auto;
    margin: 0 10px;
    }

#pic-left {
    margin-left: 15px;
}

#pic-right {
    margin-left: 40px;
}

#contact {
    display: block;
    margin-top: 15px;
}

#contact-form {
    margin-left: 15px;
    margin-bottom: 20px;
}

.navlink {
    margin: 0 10px;
    color: #730A1D;
    text-decoration: none;
}

.navlink:hover {
    background: black;
    color: snow;
    text-decoration: none;
}

.topmargin20 {
    margin-top: 20px;
}

.topmargin15 {
    margin-top: 15px;
}

.content {
    background: snow;
    text-align: justify;
}


.border {
    border: 10px solid snow;
}

.preview {
    max-width: 100%;
    position: relative;
}

.input {
    border-color: #f2f8ff;
    border-style: solid;
    background: snow;
}

.input:focus {
    outline: 0 !important;
}

.button {
    color: red;
    background: snow;
    border: solid 0px #f2f8ff;
    margin-left: -15px
}

.button:hover {
    color:snow;
    background: #730A1D;
}

@media (min-width:300px) {
    .preview {
        width: 78%;
    }
    
    #propic {
        width: 78%;
    }
}

@media (max-width:1200px) {
    #navbar {
        margin: 20px 30px 0 65px;
    }
    
    
}
@media (max-width:1000px) {
    #navbar {
        margin: 20px auto;
        width: 100%;
    }
    
    #navlinkbar {
        margin: 0px auto;
        margin-left: 300px;
    }
   
    .content {
        margin: 0 15px;
    }
    h4, #about {
        text-align: justify;
        margin: 0 15px;
        padding-top: 10px;
    }
    
    #propic {
        display: block;
        margin: 20px auto;
        width: 30%
    }
    
    #portfolio{
        display:block;
        margin-left: 30px;
        margin-top: 0px;
        margin-bottom: 10px;
    }
    
    #pic-left, #pic-right {
        display: block;
        margin: 10px auto;
    }
    
    .topmargin20, .topmargin15 {
        margin-top: 0px;
    }
    
    #contact, #form {
        margin: 10px 15px;
        margin-top: 10px;
        padding-top: 10px;
    }
    
    #message, #messagein {
        display: inline;
        
    }
    
    textarea {
        border: 2px;
        width: 250px;!IMPORTANT 
        resize: none;
    }
    
    #submit-button {
        margin-bottom: 15px;
    }