/* fine imports __________________ */
@import url(/css/normalize.css);
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@700&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght@700&family=Source+Sans+Pro:ital,wght@0,600;0,700;1,600;1,700&display=swap');




/* body __________________________ */

html, body {
	font-family: 'Source Sans Pro', sans-serif;
	line-height: 1.8em;
    font-size: 18px;
	color: #04383a;
	text-rendering: optimizeLegibility;
	font-smooth:always;
	-webkit-font-smoothing: subpixel-antialiased;
    background: #F4FBFA;
	}

/* links __________________________ */
a {
	text-decoration:none;
	color: #04383a;
	font-weight: 700;
	}
a:link {
    -webkit-tap-highlight-color: #04383A;
    -webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	transition: 0.5s; }
a:visited { color: #B6A885;}
a:hover{ color: #B6A885;}

/* typography __________________________ */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inknut Antiqua', serif;
	font-weight: 700;
    }
h1{
    font-size: 3em;
    line-height: 1.4em;
    color: #B6A885;
    margin: 3rem 0;
    }

h2 { font-size: 1.8em; line-height: 0.8em; }

ol { list-style-type: decimal; margin-left: 0;}
ul { list-style-type: circle; margin-left: 0;}
li {margin-left: 0;}
p {padding: 0rem 0; }
small { 
    font-size: 1em;     
    font-family: 'Source Sans Pro', sans-serif;
    color: #3F4849;
    }
    
strong { 
    display:block !important;
    text-transform: uppercase;
    font-weight: 700;
    color: #3F4849;
    }

hr {
    max-width: 80%;
    border: 1px solid #BFC8C8;
}
/* layout __________________________ */
.intro {padding: 0rem 1rem;}
    #ic_info {width: 0.5rem;}
    .info:hover {fill: #B6A885;
        -webkit-transition: 0.5s;
	    -moz-transition: 0.5s;
	    transition: 0.5s;
    }

.right {float:right;}

section { }
    section.project, .intro { padding: 0rem 1rem;}
    .project img {width:100%;}
    .detail {margin: 0 auto;}
    .detail h2, .detail p {padding: 0.6rem 2rem;}
    .detail img {margin: 0 auto;}
    .resume {
                background: #ECEEEE; 
                padding: 3.4rem;
                margin: 2rem 0rem;
              }
article, footer header, aside { margin: 1.8rem; }

footer { padding: 2rem 0; }

@media screen and (min-width: 950px) {
    h1 {font-size: 8em; }
    article, aside {  width: 50%; margin: 0.8rem ; }
    footer header { margin: 0 12rem; }
    .detail p, .detail h2, ol{width: 60%; margin: 0 auto;}
    .detail img, .detail h1, .detail p {padding: 0.6rem 0 1rem 0;}
    }
@media screen and (min-width: 900px) {
    h2 { font-size: 2.5em; line-height: 1.2em; }
    section.project { padding: 2rem 12rem;}
    article, aside {  width: 50%; margin: 0 12rem;}
    .resume {margin: 3.4rem 12rem;}
    .intro { padding: 0rem 12rem; }
    }
    
/* forms __________________________ */

button, input[type="button"], input[type="reset"], input[type="submit"],.btn {
	padding: 0.6rem 2rem;
	text-align: center;
	font-size: 1em;
	font-weight: bold;
	color: #2ce2b1;
    border: 0;
    background: #ECEEEE;
    border-radius: 4px;
    box-shadow: 0px 0px 4px 1px rgba(29, 29, 29, 0.1);
    margin: 2rem 0;
    display:block !important;
	}
button:hover { background: #2ce2b1; color: #eee; }

/* media __________________________ */
img {  }
.detail img {width: 100%; }
.cover {object-fit: cover; }
video {margin: 0 auto;}

.smartphone {
  position: relative;
  margin: auto;
  border: 8px #f9f9f9 solid;
  border-top-width: 24px;
  border-bottom-width: 24px;
  border-radius: 24px;
  box-shadow: 0px 0px 8px 4px rgba(29, 29, 29, 0.3);
}


.aspect360 {
  width: 360px;
  height: 640px; 
}

.aspect476 {
    width:476px;
    height: 960px;
}
.smartphone .content {
  background: white;
  border: 2px #eee solid;
  border-radius: 8px;
}

.chrome {
  border: 8px #f9f9f9 solid;
  border-radius: 24px;
  box-shadow: 0px 0px 8px 4px rgba(29, 29, 29, 0.3);
}

/* more __________________________ */
.container:after {
  content:"";
  display:table;
  clear:both;
}

/* print is dead __________________________

@media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }
a, a:visited { color: #444 !important; text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3{ page-break-after: avoid; }
*/