/* PORTFOLIO WEBSITE STYLES */

* {
    margin:0;
    padding:0;
    box-sizing: border-box;
    
}

body {
    background:url("https://64.media.tumblr.com/0f3927f0017e84b9c6ec69901c5a825a/tumblr_n9lwm7N7VX1tz79vpo1_r1_1280.gif");
    background-size:auto;
    background-repeat:repeat-x;
    background-attachment:fixed;
    background-position:bottom;
    font-family: 'vt323regular';
    font-size:1em;
    text-transform: lowercase;
    color: #000690;
    overflow:hidden;
    
}

#wrapper {
    /* width:940px; */
    width:73.4%;
    height:82vh;
    margin:40px auto;

}

#right {
    float:right;
    margin:20px;
    border:2px dotted #55C2ED;
}

#thanks {
    max-width:300px;
    margin:0 130px 20px 130px;
    border:2px dotted #55C2ED;
}

main {
    width: 61.70%;
    float:left;
    background:#FFB7DE;
    border:2px outset #FFDDDF; 
}

aside {
    width:36.17%;
    float:right;
    background:#FFB7DE;
    border:2px outset #FFDDDF; 
}

.third {
    width:33.3%;
    float:left;
    overflow:hidden;
}

.third img {
    width:100px;
    padding:20px;
    
}

iframe {
    margin: 14px 34px;
}

/* HEADERS */

header {
    width:13.3%;
    height:100%;
    position:fixed;
    top:0;
}

header.left {
    left:0;
}

header.right {
    right:0;
}

/* NAVIGATION */

nav li {
    list-style-type: none;
}

nav a {
    text-decoration:none;
}

nav img {
    width:64px;
    margin-left:8px;
}

header.left figure {
    width:80px;
    margin-left:20px;
    margin-top:10px;  
}

header.right figure {
    width:80px;
    position:fixed;
    right:20px;
    bottom:68px;
}

figcaption {
    height:28px;
    line-height:24px;
    /* subtract 4px for border */
    border:2px dotted #000690;
    color:#000690;
    text-align:center;
    font-size: 1.3em;
}

figcaption:hover {
    color:#FFDDDF;
    border:2px dotted #FFDDDF;

}

/* WINDOW */

.window {
    max-height:82vh;
    background:#FFB7DE;
    border:2px outset #FFDDDF; 
}

.window-header {
    background:#FFDDDF;
    border:2px inset #FFB7DE;
    height:44px;
    line-height:38px;
    /* subtract margin/padding top and bottom and add border top and bottom */
    margin:5px;
    overflow:hidden;
}

.window-main {
    max-height:73vh;
    background:#FFDDDF;
    border:2px inset #FFB7DE;
    margin: 5px;
    overflow: auto; 
}

.button {
    float:right;
    background:#FFDDDF;
    height:30px;
    border:2px outset #FFB7DE;
    margin:5px;
}

.button img {
    height:100%;
    padding:4px;
}

/* FOOTER */

footer {
    position:fixed;
    bottom:0;
    right:0;
    width:100%;
    height:auto;
    line-height:38px;
    /* li height 40 subtract margin/padding top and bottom and add border top and bottom */
    background:#FFB7DE;
    border-top: 2px outset #FFDDDF;
    font-size:1.3em;
    text-transform:lowercase;
    padding:2px 0; 
}

footer li {
    list-style-type: none;
    height:40px;
    width:16%;
    float:left;
    text-align:center;
    background:#FFDDDF;
    border:2px outset #FFB7DE;
    margin:1px 0;    
}

footer li:first-of-type {
    width:10%;   
    margin-left:2px;
}

footer a {
    text-decoration:none;
    color:#000690;
    display:block;
}

footer a:hover {
    border:2px inset #FFB7DE;
    height:100%;
}

/* LISTS */

.credit-list li, 
.project-list li {
    margin-left:20px;
    margin-bottom:5px;
    font-size:1.4em;
    list-style-type: none;
}

.credit-list li a,
.project-list li a {
    text-decoration: none;  
    color:#000690;
}

.credit-list li a:hover {
    color:#55C2ED;
}

.project-list li a:hover {
    color:#55C2ED;
}

.credit-list li:last-of-type,
.project-list li:last-of-type {
    margin-bottom:20px;
}

/* FORM */

form {
    max-width: 580px;
    margin:10px 20px 20px 20px;
    
}

fieldset {
    padding:10px;
    border:2px dotted #55C2ED;
}

legend {
    color:#55C2ED;
    font-size:1.5em;
    padding:0 2px;
}

label {
    display:block;
    margin-bottom:5px;
    font-size:1.4em;
}

input {
    margin-bottom: 10px;
    height:30px;
    width:100%;
    font-size:1em;
    border:2px inset #FFB7DE;
}

input[type="submit"] {
    border:2px outset #FFB7DE;
    background:white;
    font-family: 'vt323regular';
    font-size:1.4em;
    height:40px;
    color:#000690;

    
}

input[type="submit"]:hover {
    border:2px inset #FFB7DE;
    color:#FFB7DE;
}

form ul {
    margin-left:15px;
    margin-bottom:10px;
}

form li {
    list-style-type: none;
}

select {
    margin-bottom:10px;
}

textarea {
    width:100%;
    height:150px;
    margin-bottom:10px;
    font-size:1.3em;
    border:2px inset #FFB7DE;

}

/* TYPOGRAPHY */

h1, h2, h3 {
    font-weight: 400;
    margin-left:20px;
}

h1 {
    float:left;
    margin-top:0;
    text-transform: lowercase;
    font-size:1.8em;
}

h2 {
    color:#55C2ED;
    margin:20px 20px;
    font-size:1.6em;
    text-transform: lowercase;
}

aside h2 {
    color:#000690;
    float:left;
    margin-top:0;
    margin-bottom:2px;
    margin-left:15px;
}

h3 {
    color:#9720F1;
    margin-top:10px;
    font-size:1.4em;
    margin-bottom:2px;
    
}

p {
    margin:0px 20px 20px 20px;
    font-family: Helvetica;
    font-weight:100;
    text-transform: none;
    color:#00012b;
}

/* FONT */

@font-face {
    font-family: 'vt323regular';
    src: url('../fonts/vt323-regular-webfont.woff2') format('woff2'),
         url('../fonts/vt323-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}