* {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
    /* head */
    
    .button {
        padding: 5px;
        margin-bottom: -4em;
        margin-right: 8em;
    }
    
    #top-btn {
        border: 3px outset gold;
        padding: 5px;
        text-decoration: none;
        background-color: rgb(49, 49, 48);
        color: aliceblue;
    }
    /* body */
    
    .container {
        background-color: rgb(250, 250, 250);
        margin: 8rem;
        margin-top: 5rem;
        border: 3px double goldenrod;
        padding: 1rem;
        box-shadow: 5px 10px rgb(105, 100, 100);
    }
    
    .prof-pic {
        border: solid gold;
    }
    
    .name,
    h2 {
        text-align: center;
    }
    
    header {
        margin-bottom: -1em;
    }
    
    #addrs:hover {
        text-decoration-line: underline;
        text-decoration-color: goldenrod;
    }
    
    .subheading {
        border: 1px solid rgb(41, 36, 7);
        text-decoration-line: none;
        padding: 5px;
        border-radius: 3px;
        background-color: gold;
        box-shadow: 5px 7px rgb(145, 139, 139);
    }
    
    .subheading:hover {
        border: 1px solid white;
        padding: 3px;
        border: 2px solid rgb(41, 36, 7);
        text-decoration-line: none;
        transition-property: all;
        transition-duration: 300ms;
    }
    
    ul {
        list-style-type: square;
    }
    
    .button2 {
        padding: 5px;
        margin-top: -7em;
        margin-left: 8em;
        margin-bottom: -10em;
    }
    
    #bottom-btn {
        border: 3px outset gold;
        padding: 5px;
        text-decoration: none;
        background-color: rgb(49, 49, 48);
        color: aliceblue;
    }
    /* CONTACT FORM */
    
    #contact {
        margin: 5em;
    }
    
    #contact-wrapper {
        border: 7px outset rgb(24, 39, 24);
        margin: 8em 8em;
        margin-top: 15em;
        background: rgb(209, 228, 209);
        background: url(/images/Screen-shot-2012-06-17-at-3.26.08-AM.png);
        background-size: cover;
        background-blend-mode: darken;
    }
    
    fieldset {
        margin: 3em 7em;
        border: 2px solid gold;
    }
    
    legend {
        margin-bottom: 2em;
    }
    
    input,
    textarea {
        display: inline-block;
        margin-left: 1em;
        border: 2px solid gold;
        width: 20em;
        height: 2.5em;
        box-shadow: 2px 1.5px 10px white;
    }
    
    input {
        color: black;
    }
    
    label {
        color: aliceblue;
    }
    
    #contact-me,
    legend {
        color: aliceblue;
    }
    
    #contact-btn {
        display: block;
        border: 3px outset gold;
        padding: 5px;
        text-decoration: none;
        color: rgb(241, 215, 215);
        background-color: rgb(53, 52, 45);
        margin: auto;
        margin-top: 2em;
        padding: 5px 10px;
    }
    /* js error class */
    
    .error-input {
        border: 1.1px solid red;
        animation: shake 2s;
        animation-iteration-count: 2;
        margin: -20px 10px;
    }
    
     ::placeholder {
        color: darkgray;
    }