@font-face {
    font-family: 'atkinson';
    src: url('fonts/atkinson.eot');
    src: url('fonts/atkinson.eot?#iefix') format('embedded-opentype'),
          url('fonts/atkinson.woff') format('woff'),
          url('fonts/atkinson.ttf') format('truetype'),
          url('fonts/atkinson.svg#atkinson') format('svg');
          font-weight: normal;
          font-style: normal;
        }



body {color:white; background-color: #161623;margin:0; font-family:arial;}
p {white-space: pre-line; margin:0;}
.text-content {width:50%; margin:auto;margin-bottom: 3em;}
h2 {text-align:center; text-decoration: underline;}

a {color:#adbfd4;}
a:hover {color:#818ca0}

/*header*/

#header {
    box-sizing: border-box;
    display:flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /*sticky*/
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}

#header img, #footer img {height:100%;margin:0 5px;}
#header img:hover, #footer img:hover {opacity:0.6;}

#menu-logo {
    flex-grow: 1;
    display:inline-block; 
    height:3vh;
    padding:1vh;
    background-color: #00000c;
    width: 100%;
    order:1;
}


#menu {
    display: flex;
    align-items: center;
    top: 0;
    flex-grow: 3;
    width:100%;
    order:2;
}
#menu a {
    width:100%;
    height:3vh;
    padding:1vh;
    margin: 0 auto;
    text-align: center;
    display: inline-block;
    color:white;
    text-decoration:none;
    font-size:1.5em;
    background-color: #00000c;
}

.social-links {
    height:3vh;
    padding:1vh;
    display:inline-block;
    flex-grow: 1;
    text-align:right;
    background-color: #00000c;
    line-height: 2em;
    width: 100%;
    order:3;}

/*footer*/
#footer {background-color: #00000c; padding:1vh;text-align:center;}
#footer-links {
    line-height: 1em;
    height:3vh;
    padding:1vh;
    display:none;
}
#copyright {
    height:3vh;
    padding:1vh;
}

/*main (index)*/
#fp-art {background-color:#1b1b33; margin:0; overflow: hidden;}
#fp-hire {background-color:#232342; margin:0; overflow: hidden}
#fp-contact {background-color:#2f314c; margin:0; overflow: hidden}


@media screen and (max-width: 850px) {
.text-content {width: 90%;}
#header {
    flex-direction: column;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;}
#header .social-links {display:none;}
#menu-logo {display:none;}
#menu {order:99;}
#footer-links {display:block;}
}