/******************************************************************************/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< Common >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/******************************************************************************/
:root {
	--primary: #395186;
	--primary-light: #697db6;
	--primary-dark: #002959;
	--secondary: #397887;
	--secondary-light: #6aa7b7;
	--secondary-dark: #004c5a;
    
    --background-one: white;
    --background-two: black;
}

.page-wrap{
    width: 100%;
    color: var(--background-two);
    background-color: var(--background-one);
    
    font-family: 'CelloSansRegular';
}

small {
    font-family: 'CelloSansRegular';
}

.offscreen {
	display: block;
	width: 1px;
	height: 1px;
	text-indent: -9999px;
}

::-moz-selection
{
    background-color: var(--primary-dark);
    color: var(--background-one); 
}
::selection {
    background-color: var(--primary-light);
    color: var(--background-one);
}

/******************************************************************************/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< Headings >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/******************************************************************************/
h1, h2, h3, h4, h5 {
    margin-bottom: 0px;
    margin-top: 0px;
}

h2 {
    color: var(--primary);
}

h3 {
    color: var(--primary);
}

h4 {
    color: var(--primary-dark);
}

p {
    max-width: 45em;
    padding-bottom: 1em;
}

/******************************************************************************/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< Links >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/******************************************************************************/
a {
    color: var(--secondary);
    text-decoration: underline;
    font-style: normal;
}

a:hover {
    color: var(--secondary-light);
    text-decoration: none;
}

a:visited {
    color: var(--secondary-dark);
}

header a {
    color: var(--secondary-light);
    text-decoration: underline;
    font-style: normal;
}

header a:hover {
    color: var(--secondary);
    text-decoration: none;
}

header a:visited {
    color: var(--secondary-dark);
}
/******************************************************************************/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< Lists >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/******************************************************************************/
ul {
    margin-top: 0px;
}

/******************************************************************************/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< Header >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/******************************************************************************/
header {
    background-color: var(--background-two);
    padding-left: 20%;
    
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    
    padding-right: 20%;
}

header h1 {
    display: flex;
    flex-wrap: nowrap;
}

.circle-img {
    border: solid var(--primary) 8px;
    border-radius: 50%;
    align-self: flex-start;
    min-width: 192px;
    margin-bottom: 1em;
    pointer-events: none;
}

header h1 {
    color: var(--background-one);
    padding-top: 0.1em;
    margin-bottom: 0px;
    font-size: 6em;
}

header h2 {
    color: var(--primary-light);
    margin-top: -0.6em;
    margin-bottom: 0px;
    font-size: 4em;
}

header h3 {
    color: var(--primary);
    font-size: 2em;
    margin-top: -0.2em;
    margin-bottom: 0px;
}

address {
    padding-bottom: 1em;
}
/******************************************************************************/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< Navigtion >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/******************************************************************************/
nav {
    background-color: var(--background-two);
    display: flex;
    padding-left: calc(20% - 1em);
}

nav ul {
    margin-bottom: 0px;
    
    list-style-type: none;
    padding-left: 0px;
    
    display: flex;

    flex-wrap: wrap;
}

nav ul li {
    background-color: var(--background-one);
    font-size: 2em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    margin-right: 0.5em;
}

nav ul li a {
    color: var(--secondary);
    text-decoration: underline;
}

nav ul li a:hover {
    color: var(--secondary-light);
}

nav ul li a:visited {
    color: var(--secondary-dark);
}

.current a, .current a:visited {
    color: var(--background-two);
    text-decoration: none;
    pointer-events: none;
}

.current {
    background-color: var(--primary-light);
}
/******************************************************************************/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< Main Content >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/******************************************************************************/
.main {
    display: flex;
    padding-left: 20%;
}

/******************************************************************************/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< Portfolio >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/******************************************************************************/
.portfolio {
    padding-top: 2em;
    padding-bottom: 2em;
    
    width: 100%;
}

.piece {
    max-width: calc(60% * 5 / 3);
}

.piece h2 {
    color: var(--background-two);
}

.portfolio h2, .portfolio h3, .portfolio p {
    margin-top: 0px;
    margin-bottom: 0px;
}

.update {
    font-style: italic;
}

.piece {
    display: flex;
    margin-bottom: 1em;
}

.piece a {
    width: 12%;
}

.description {
    display: flex;
    flex-direction: column;
    margin-left: 8px; /*2x img border*/
    padding-left: 1em;
}

img {
    border: solid var(--secondary) 4px;
    width: 100%;
    min-width: 96px;
    max-width: 192px;
}

img:hover {
    border-color: var(--secondary-light);
}

/******************************************************************************/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< Sidebar >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/******************************************************************************/
.sidebar {
    width: 45em;
    padding-left: 2em;
    padding-right: 12%;
    padding-top: 1.5em;
    padding-bottom: 1em;
    background-color: var(--background-two);
    
    border-top: 0.5em dotted var(--primary-light);
    border-bottom: 0.5em dotted var(--primary-light);
}

.sidebar h1 {
    color: var(--background-one);
    
    font-size: 2em;
}

.sidebar h2 {
    color: var(--primary);
    font-size: 2em;
}

.sidebar h3 {
    color: var(--primary-light);
    margin-top: -0.2em;
    
    font-size: 1em;
}

.sidebar ul {
    color: var(--background-one);
}

#expertise {
    list-style-type: symbols("\26A1" "\1F4F1" "\1F5A5" "\1F3AE"); 
}

#strengths{
    list-style-type: symbols("\1F4C4" "\1F4A1" "\23F1"); 
}

#availability {
    list-style-type: symbols("\1F4C5" "\1F697" "\1F4BC"); 
}
/******************************************************************************/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< Apps >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/******************************************************************************/
/******************************************************************************/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< Blog >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/******************************************************************************/
.blog-image, .app-image {
    border: none;
    max-width: 45em;
    padding-bottom: 1em;
}

.blog-preview-image {
    border-color: var(--background-two);
    pointer-events: none;
}

.blog-list-item p {
    padding-bottom: 0.2em;
}
/******************************************************************************/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< Footer >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/******************************************************************************/
footer {
    color: var(--background-one);
    background-color: var(--background-two);
    padding-left: 20%;
    padding-right: 12%;
    padding-top: 1em;
    padding-bottom: 1em;
}

/******************************************************************************/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< Media queries >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/******************************************************************************/
@media screen and (max-width: 1600px){
    header {
        flex-direction: column;
    }
    
    header img {
        align-self: flex-start;
    }
    
    header h1 {
        font-size: 6em;
    }
    
    header, .main, footer {
        padding-left: 20%;
    }
    
    .sidebar {
        padding-right: 8%;
    }
}

@media screen and (max-width: 1366px){
    .main {
        flex-wrap: wrap;
    }
    
    header, .main, footer {
        padding-left: 20%;
    }
         
    header h1 {
        font-size: 4em;
    }
    
    header h2 {
        font-size: 2em;
    }
    
    header h3 {
        font-size: 1em;
    }

    /*Undo sidebar*/
    .portfolio {
        padding-bottom: 1em;
    }
    
    .piece {
        flex-direction: column;
    }     
    
    p {
        width: 100%;
    }
    
    .piece a {
        width: 33%;
    }
    
    .description {
        padding-left: 0em;
        margin-left: 0px;
    }
    
    .sidebar {
        border-top-style: hidden;
        border-bottom-style: hidden;
        padding-left: 0em;
        background-color: var(--background-one);
    }
    
    .sidebar ul, .sidebar h1 {
        color: var(--background-two);
    }
    
    .sidebar a {
        color: var(--secondary);
    }

    .sidebar a:hover {
        color: var(--secondary-light);
    }

    .sidebar a:visited {
        color: var(--secondary-dark);
    }

}

@media screen and (max-width: 1200px){ /*Big Screen Cutoff*/
    .big-screen-only {
        display: none;
    }
    
    header, .main, footer {
        padding-left: 20%;
    }

    img {
        min-width: 128px;
    }
    
    .description {
        padding-right: 20%;
    }
}

@media screen and (max-width: 800px){
    header h1 {
    }
    
    header h2 {
        font-size: 3em;
    }
    
    header h3 {
        font-size: 1.5em;
    }
    
    #last-name {
       display: none; 
    }

    /* Liftoff! */
    nav {
	    padding-bottom: 1em;
    }

    nav ul li {
	    background-color: var(--background-one);
	    font-size: 1.5em;
	    border-radius: 8px;

	    margin-top: 0.2em;
	    margin-bottom: 0.2em;
    }
}


@media screen and (max-width: 640px){
    header, .main, footer {
        padding-left: 20%;
    }
    
    header h1 {
        font-size: 4em;
    }
    
    header h2 {
        font-size: 2em;
    }
    
    header h3 {
        font-size: 1.2em;
    }
    
    .extra {
        display: none;
    }
}