body {
    font: 14px 'courier new', calibri, arial;
    letter-spacing: 1px;
    color: #000;
    background: #000 url(https://64.media.tumblr.com/2c1ab4e5d1b1e260216fae25503be446/f2d16412df23a92f-38/s1280x1920/382760159b09ff3c48d454e26b65edaab63f5b94.gifv) fixed;
}

@media screen and (max-width: 750px) {
    body {
        background-attachment: unset;
    }
}


#layout {
    margin: 80px auto;
    width: 720px;
}


#header1 {
    width: 720px;
    float: left;
    margin: 0 auto;
}

#header2 {
    height: 40px;
    background: transparent;
    border-bottom: 1px solid #FFADA5;
    margin: 0px;
}


#navigation1 {
    width: 720px;
    float: left;
    margin: 0 auto;
}

#navigation2 {
    height: 20px;
    line-height: 15px;
    background: transparent;
    margin: 0px;
    margin-bottom: 10px;
    padding: 1px;
    padding-top: 0px;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-top: 2px solid #FBFEEA;
}

#navigation2 a {
    width: 80px;
    display: inline-block;
    background: #FCDAD6;
    font: bold 9px 'lato', monospace, georgia;
    text-transform: uppercase;
    padding: 4px;
    letter-spacing: 3px;
    color: #D46666;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

#navigation2 a:hover {
    width: 80px;
    display: inline-block;
    background: #fff;
    font: bold 9px 'lato', monospace, georgia;
    text-transform: uppercase;
    padding: 4px;
    letter-spacing: 3px;
    color: #F07671;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

#content1 {
    /* NOTE(lite) This changes across some pages. See bottom of file. */
    width: 360px;
    float: left;
    margin: 0 auto;
}

#content2 {
    margin: 0px;
    padding: 6px;
}

#left1 {
    width: 180px;
    float: left;
    margin: 0 auto;
}

#left2 {
    margin: 0px;
    padding: 6px;
}

#right1 {
    width: 180px;
    float: left;
    margin: 0 auto;
}

#right2 {
    margin: 0px;
    padding: 6px;
}

#footer1 {
    width: 720px;
    float: left;
    margin: 0 auto;
    clear: both;
}

#footer2 {
    height: 100px;
    line-height: 40px;
    text-align: center;
    margin: 0px;
}


.box {
    background: #fff;
    border: 1px solid #ffada5;
    border-top: 0px;
    box-shadow: 5px 6px #fcdad6;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 8px;
    margin-bottom: 2px;
}

.box-without-title {
    background: #fff;
    border: 1px solid #ffada5;
    box-shadow: 5px 6px #fcdad6;
    border-radius: 5px;
    margin-bottom: 2px;
    /* NOTE(lite) hide anything that overflows outside this element */
    overflow: hidden;
}

/* NOTE(lite) target all img elements inside of elements with the .box-without-title class 
* make them full width to remove any horizontal whitespace
* change their display mode to "block" to remove some whitespace below them (css quirk)
* You don't actually need to wrap them in a <center> tag any more, but I've left it as-is.
*/
.box-without-title img {
    width: 100%;
    display: block;
}

.container {
    display: inline-block;
    /* or block, depending on your layout */
}

.titlereactive {
    font: 10px monospace;
    text-transform: uppercase;
    color: #fff;
    background: #ffada5;
    letter-spacing: 3px;
    text-align: left;
    padding: 2px;
    padding-left: 8px;
    padding-top: 4px;
    margin-bottom: 0px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    display: block;
    /* ensures it stretches to the width of the container */
}

.boxoverflow {
    display: inline-block;
    background: #fff;
    border: 1px solid #ffada5;
    border-top: 0px;
    box-shadow: 5px 6px #fcdad6;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 8px;
    height: 80px;
    margin-bottom: 2px;
    overflow: hide;
}




#sitename a {
    font: 30px 'pixelify sans', courier new;
    color: #f07671;
}

.title {
    font: 10px monospace;
    text-transform: uppercase;
    color: #fff;
    background: #ffada5;
    letter-spacing: 3px;
    text-align: left;
    padding: 2px;
    padding-left: 8px;
    padding-top: 4px;
    margin-bottom: 0px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

a:link,
a:visited,
a:active {
    color: #666;
    text-decoration: none;
}

a:hover {
    color: #f07671;
}

#menu a {
    display: inline-block;
    background: #f07671;
    margin-bottom: 4px;
    padding: 1px;
    padding-top: 2px;
    width: 150px;
    line-height: 12px;
    font: italic 12px georgia, monospace;
    text-transform: lowercase;
    letter-spacing: 3px;
    text-align: center;
    border-radius: 5px;
    color: #fff;
}

#menu a:hover {
    display: inline-block;
    background: #fcdad6;
    margin-bottom: 4px;
    padding: 1px;
    padding-top: 2px;
    width: 150px;
    line-height: 12px;
    font: italic 12px georgia, monospace;
    text-transform: lowercase;
    letter-spacing: 3px;
    text-align: center;
    border-radius: 5px;
    color: #f07671;
}


b {
    color: #d46666;
    font-weight: bold;
}

i {
    font-style: italic;
    color: #aaa;
}

u {
    color: #daac5c;
    text-decoration: none;
}


::-webkit-scrollbar-thumb {
    background-color: #f07671;
    border-radius: 0px;
    border: 0px solid #ccc;
}

::-webkit-scrollbar {
    width: 8px;
    height: 0px;
    background: transparent;
}

textarea {
    font: 10px calibri;
    letter-spacing: 1px;
}

/* ---- Page-specific styles ---- */
/* NOTE(lite) 
* `#devlog i` means all `i` elements that are children of the element with the #devlog id.
* I've added IDs to the `body` tags of each page so you can target specific pages.
*/
#devlog i {
    color: #1f1f1f;
}

#portfolio #content1,
#devlog #content1,
#foxie-blog #content1 {
    /* 360 is default */
    width: 460px;
}

#contact-me #content1 {
    width: 500px;
}

#about-me #content1 {
    width: 375px;
}

/* NOTE(lite) Not sure if this was different intentionally or a typo, the others are 5px. */
#portfolio .box-without-title {
    border-radius: 3px;
}

#about-me #layout {
    width: 780px;
}

#contact-me #navigation2 {
    line-height: 10px;
}

#about-me #left1 {
    width: 360px;
}

#about-me #right1 {
    width: 0px;
}