@charset "UTF-8";
/* CSS Document 
> Aboutme.css is intended for use in conjuction with photography.css. Aboutme.css 
> only contains the specific changes from photography.css to aboutme.css. */

/*~~~~~ Notes ~~~~~
- Colors used:
    Black = rgb(12, 12, 12)
    White = rgb(256, 256, 256) or #FFFFFF
    Off-white = #f1f1f1
    Grey = #757575
    Teal = #c34a18
    Burgundy = #c34a18


/**********************
Smartphone size
**********************/

.mainContent {
    text-align: center;
    color: white;
    padding: 0 6%;
    text-rendering: optimizeLegibility;
}

.mainContent h1 {
    font-size: 2em;
    font-family: iAWriterDuospace-Bold;
}

.mainContent h2 {
    font-size: 1.4em;
    margin-top: 2em;
}

.mainContent h3 {
    font-size: 1.1em;
}

.mainContent p {
    font-size: 1em;
    text-align: left;
    text-indent: 3em;
    line-height: 1.4em;
}

.mainContent a:link {
    color: white;
    text-decoration: underline #c34a18;
}

.mainContent a:visited {
    color: white;
    text-decoration: underline #c34a18;
}

.mainContent a:hover {
    color:  white;
    background-color: #c34a18;
    text-decoration: underline white;
}

form {
    margin-top: 25px;
}

.formField {
    margin-bottom: 1em;
}

.formField input::-webkit-input-placeholder {
    opacity: 0.7;
}

.formField input::-ms-input-placeholder {
    opacity: 0.7;
}

.formField input::-moz-input-placeholder {
    opacity: 0.7;
}

.formField input::placeholder {
    opacity: 0.7;
}

.formField input, textarea {
    width: 75%;
    height: 2em;
    margin: .5em 0;
    padding: 0 5px;
    font-size: 1em;
}

.formField textarea {
    padding: 5px;
    height: 8em;
    resize: vertical;
}

.formField textarea::-webkit-input-placeholder {
    opacity: 0.7;
}

.formField textarea::-ms-input-placeholder {
    opacity: 0.7;
}

.formField textarea::-moz-input-placeholder {
    opacity: 0.7;
}

.formField textarea::placeholder {
    opacity: 0.7; 
}

#submit {
    font-family: iAWriterDuospace-Regular, "Courier New", monospace;
    font-size: 1.2em;
    color: black;
    background-color: white;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
    border: 2px solid transparent;
    padding: 5px;
}

#submit:hover {
    border: 2px solid #c34a18;
    color: rgb(12, 12, 12);
    text-decoration: underline;
    text-decoration-color: #c34a18;
    -moz-text-decoration-color: #c34a18;
    -webkit-text-decoration-color: #c34a18;
    transition: none;
}


/**********************
Tablet size
**********************/
@media screen and (min-width: 768px) {

    .mainContent {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }

}
/**********************
Desktop size
**********************/
@media screen and (min-width: 1024px) {
    
    .formField input, textarea {
        width: 50%;
        padding: 0 8px;
    }

    .formField textarea {
        padding: 8px;
    }

}

/**********************
1440p width size
**********************/
@media screen and (min-width: 1440px) {
    
}