:root {
    --main-color: #cb4b16;
    --secondary-color:#268bd2;
    --tertiary-color:#93a1a1;
    --subheader-color: #eee8d5;
    --text-color: #657b83;
    --bg-color: #fdf6e3;
    --link-color: #2aa198;
    --accent-color: #d33682;

}

* { padding:0; margin:0; }
/* 
@font-face {
	font-family: 'hiragino_maru_gothic_prow4';
    src: url('/fonts/hiraginomarugothicprow4-webfont.woff2') format('woff2'),
         url('/fonts/hiraginomarugothicprow4-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
} */

body {
    font-family: 'Raleway', Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color:var(--text-color);
}

h2 { color:var(--main-color); margin-bottom:1rem; }
h3 { color:var(--secondary-color); margin-bottom:1rem; }

#content {
    padding: 5rem 1.5rem 0;
}
#content, footer { max-width:1200px; margin:0 auto; }

header h1 { color:var(--main-color); line-height:1; font-size:2.25rem; }
header h2 { color:var(--secondary-color); line-height:1; font-size:1.5em; margin-top:0.75rem; margin-bottom:0rem; }
header h3 { color:var(--text-color); line-height:1; font-size:1.25em; margin-top:0rem; }
header .tagline { max-width:22rem; }

header .social-links { margin-top:3rem; display:flex; }
header .social-links a { margin-right:1rem;}
header .social-links svg { height:25px; fill:var(--text-color); }
header .social-links a:hover svg { fill:var(--accent-color); }

#logo {
    position: absolute;
    top:1.5rem; left:1.5rem;

}

#logo img {
    height:30px;
}

#bio { max-width:40rem; }

a { font-weight:bold; color:var(--link-color); }
p { margin: 1rem 0; }
main { margin-top:5rem; }
main section { margin-bottom:3rem; }
main section h3 { line-height: 1; margin-bottom:0.5rem;}

.work-experience a { text-decoration: none;}

.project { margin:0; padding-bottom:1.5rem; padding-top:1.5rem; }

.project .header { display: flex; }
.project .logo { margin-right:1rem;  }
.project .logo img { border-radius: 0.5rem; overflow: hidden; }
.project .info { display:flex; flex-direction: column; justify-content: center;}
.project img { width:70px; }
.project a { text-decoration: none;}
.project .type { font-weight:bold; font-size:0.8rem;}
.project .tags { display: flex; flex-wrap:wrap; gap:0.5rem; }
.project .tags .tag { font-size:0.8rem; background:var(--accent-color); color:#FFF; font-weight:bold; padding:0.25rem 0.5rem; border-radius:1rem; }

footer { padding-bottom: 1rem; }

@media (min-width:640px) {

    #logo { left:3rem; }
    
    
    #content, footer { padding-left: 3rem; padding-right:3rem; }
    header h1 { font-size:3rem;}

    .work-experience { display: flex; gap:1rem;}
    .work-experience .date { flex-basis: 120px;  }
    .work-experience .information { width: 25rem;} 

    .project { display:flex; gap:1rem; }
    .project .header { flex-direction: column; flex-basis: 120px;}
    .project .content { width:25rem; }
    .project .content>p { margin-top:0; }

}

@media (min-width:1024px) {
    #content { display:flex;}

    .summary, #logo { position:fixed; }
    main { margin-top:0rem; margin-left:28rem;  }
}