/*============================================================================== 
Resets
================================================================================ */
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
html,body,div,object,iframe,fieldset{margin:0;padding:0;border:0}
ol,ul{list-style:none;margin:0;padding:0}
header,footer,nav,section,article,hgroup,figure{display:block}



:root {
    --textColor(#111)
    --bodyBackgroundColor(#88cfbe)
}


/*============================================================================== 
Typography
================================================================================ */
body:before {
	content: '';
	top: 0;
    bottom: auto;
    height: 6px;
    position: fixed;
    background: url(/background.jpg);
    background-size: cover;
	background-position: center;
	display: block;
    width: 100%;
    z-index: 1;
}

body {
	background-color: var(--bodyBackgroundColor);
    /* 	background: linear-gradient(#fff, #f6f6f6); */
	color: var(--textColor);
	font: 20px/1.4 'futura-pt', 'Lato', 'HelveticaNeue', 'Helvetica', sans-serif;
}

a {
	color: var(--textColor);
	border-bottom: 2px solid;
	text-decoration: none;
}
a:hover {
	background-color: #ffff32;
}
a:focus {
	background-color: #f19e15;
}
p {
	margin: 0 0 1em;
}
li {
    margin-bottom: .35em;
}
img, object, video {
	max-width: 100%;
	border: 0;
}
h1 {
	font-size: 3.5em;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.03em;
	margin-top: 0;
	margin-bottom: 0.3em;
	font-family: "Helvetica", "HelveticaNeue", "Arial", sans-serif;
	color: var(--textColor);
	text-wrap: balance;
	/* Smoothing */
    text-rendering: optimizeLegibility;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
}
h2 {
	font-weight: normal;
	font-size: 20px;
	line-height: 1.1;
	padding-bottom: 0.4em;
	border-bottom: 1px solid #e7e8e7;
}
h3 {
	font-weight: normal;
	font-size: 18px;
	line-height: 1.1;
	padding-bottom: 0.4em;
	border-bottom: 1px solid #ccc;
}
h1 a, h2 a, h3 a {
	display: block;
	color: #000;
}
h1 a:hover, h2 a:hover, h3 a:hover {
	color: #e51837;
}

input, textarea {
	border: 1px solid #000;
}

input[type=search] {
	-webkit-appearance: none;
	border-radius: 0;
}
::-webkit-input-placeholder {
	color: #808080;
}
:-moz-placeholder {  
    color: #808080;
}

::-moz-selection {
    background: yellow;
        color: #333;

}

::selection {
    background: yellow;
    color: #333;
}

button, 
.button {
	color: #fff;
    background: #000;
    display: inline-block;
    margin: 1.5em 0;
    padding: .7em 1.25em;
    transition: all .2s ease;
}

button:hover, 
.button:hover {
	background-color: #fec106;
	color: #fff;
}

button:focus,
.button:focus {
	outline: 0;
	background-color: #f19e15;
	color: #fff;
}

.back-link {
    font-size: 13px;
    border-bottom-width: 0px;
    color: #999;
}
/*============================================================================== 
Structure
================================================================================ */
.container{max-width:56em;margin:0 auto;padding-left: 2em;padding-right: 2em;}
main{padding:2em 0 3em}


/*============================================================================== 
Home
================================================================================ */
.intro{font-size:1.6em;line-height:1.35;margin:.25em 0;color:#333}
.intro a{border-bottom:2px solid}
.core-skills li{margin-bottom:3px;font-size:17px;line-height: 1.55}
.email-note{opacity:0;-webkit-transition:opacity .5s ease-in-out;-moz-transition:opacity .5s ease-in-out;transition:opacity .5s ease-in-out;font-style:italic;font-size:15px;display:inline-block}
.email-note em{border-bottom: 2px solid;margin-right: 24px;}
.email-note:hover{cursor:text}
.email-me{margin: 2.5em 0}
.email-me .button{margin: 0 .75em .75em 0}
.email-me.active .email-note{opacity:1}

.even-more h2:hover {cursor: pointer;color: #333}
.even-more h2:focus{color: #f19e15;}

.even-more:not(.active) h2 {
    border-bottom-color: transparent;
}
.even-more-content {
   transition: max-height .95s ease-in-out;
   max-height: 2500px;
   overflow: hidden;
}
.even-more:not(.active) .even-more-content {
    opacity: 0; 
    max-height: 0;
}

/*============================================================================== 
Footer
================================================================================ */
footer{display:block;background-color:#000;color:#aaa}
footer li{display:block;padding:6px 0 5px;font-size:14px}
footer li:last-child{display: none}



/*============================================================================== 
Media queries
================================================================================ */
@media all and (min-width:40em) {
	h1{font-size:74px;line-height:1.1;margin-top: 60px;}
    main{padding-bottom:6em}
	.intro{padding-right:66px;max-width:1012px}
	.extended-information{padding-right: 66px}
	footer{position:fixed;bottom:0;left:0;width:100%;margin:0;animation-duration:3s;}
	footer ul{display:block;width:100%}
	footer li{display:inline-block;padding:7px 0 4px;font-size:14px}
	footer li:last-child{display:inline-block;float:right}
}


@media all and (min-width: 54em) {
	h1{font-size: 80px}
}

.animated{animation-duration:2s;animation-fill-mode:both}
.fadeIn{animation-name:fadeIn}
@keyframes fadeIn{0%{opacity:0}to{opacity:1}}




body {
    background-color: #fff;
 }


h1 {
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -.015em;
    color: #1d1d1f;
    font-family: -apple-system, BlinkMacSystemFont,"Segoe UI", "Helvetica", "Roboto", "Oxygen", "Ubuntu", "Cantarell","Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}




@media (prefers-color-scheme: dark) {

    body {
        background: #353e48;
        background-color: #353e48; 
        color: #fefefd;
    }
    
    h1,
    a,
    .intro {
        color: #fefefd;
    }
    
	footer {
		background-color: #2f363f;
	}
	
	button, .button {
    	background-color: #fefefd;
    	color: #353e47;
	}
	
	.even-more h2:hover {
    	color: #fec106;
    }
}