/* Reset & Basic style */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

/* Icon Fonts
================================ */

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

@font-face {
  font-family: 'tetris';
  src: url('../fonts/tetris.ttf');
}

[data-icon]::before {
  font-family: 'icomoon';
  content: attr(data-icon);
  margin-right: 8px;
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}

/*================================ */

body {
  font-size:17px;
  line-height:17px;
  height:100%;
  width: 100%;
  font-family: "Century Gothic",Helvetica,Arial,sans-serif;
  letter-spacing:3px;
  text-rendering: optimizeLegibility;
  text-align: center;
  text-transform:uppercase;
}

#sailboat {
  float:left;
  margin-left: 3%;
  width:50px;
  height: 100px;
  z-index: 100;
  cursor: url(../images/cursor.png), auto;
}

p {
  font-size: 13px;
  float:left;
  font-family: "Oleo Script", sans-serif;
  color: #006BB2;
}

.wrap {
  width:800px;
  margin: 0 auto;
  margin-top: 5%;
  text-align:center;
}

#logo {
  width:90px;
  height:60px;
  display:block;
  margin:0 auto 3%;
  background:url(../images/titlelogo.png) no-repeat 50% 50%;
}

h1 {
  margin-top: 2%;
  font-size: 30px;
  font-weight: 100;
  /*color:#a3c2ff;*/
  letter-spacing: 5px;
}

h2 {
  font-size:15px;
  margin-top:10px;
  letter-spacing:3px;
  /*color:#FFAAAA;*/
}

h3 {
  font-size:13px;
  margin-top:2%;
  letter-spacing:1px;
  color:black;
}

h4 {
  font-size:11px;
  margin-top: 0.5%;
  letter-spacing:1px;
  color:#666;
}

h3 em,
h4 em {
  font-size:8px;
  position:relative;
  top:-1px;
  color:#aaa;
}

nav {
  width: 100%;
  margin: 0 auto;
  list-style: none;
  text-align: center;
  display: block;
}

nav ul {
  display: inline-table;
}

nav ul li {
  float: left;
  color: black;
  padding: 5px;
  font-size: 12px;
  display: inline;
}

nav a {
  color: black;
  text-decoration: none;
  text-align: center;
  display: inline-block;
}

nav a:hover,
nav a:hover,
nav a:active {
  color: black;
  text-decoration: underline;
}

#profile {
  display: block;
  margin: 0 auto;
  padding: 2%;
}

.links {
  display: block;
  margin-top:5%;
  text-align:center;
}

.links [data-icon]::before {
  font-size: 38px;
}

.links a,
.links a:visited {
  padding: 0.5%;
  text-decoration: none;
  color: black;
  width:40px;
  height:40px;
  opacity: 0.8;
}

.links a:hover,
.links a:active {
  opacity: 1;
}

.links a.twitter {
  color:#55ACEE;
}

.links a.linkedin {
  color:#1D87BE;
}


/*for portfolio page*/

.showcase {
  display: block;
  margin: 0 auto;
  width: 100%;
  margin-bottom: 15px;
}

.showcase img {
  margin-top: 25px;
  border-radius: 25px;
  border: 1px dashed #8c8c8c;
}

.showcase a {
  color: black;
}

.site {
  display: inline-block;
  width: 45%;
  margin-right: 2%;
}

.site a {
  opacity: 0.7;
}

.site a:hover {
  opacity: 1;
}

/*for resume page*/

.resume {
  font-family: 'Josefin Sans', sans-serif;
  color: black;
  text-align: center;
  margin: 0 auto;
  width: 800px;
  height: 1035px;
}

.resume #tetris {
  width: 60%;
  height: 85%;
  border: 2px solid black;
  display: inline-block;
  vertical-align: top;
}

.resume h3,
.resume .sidebar li,
#tetris li {
  font-size: 11px;
}

.resume #status {
  width: 25%;
  height: 85%;
  display: inline-block;
}

.resume .sidebar {
  width: 100%;
  margin-bottom: 10%;
  border: 2px solid black;
}

.resume .sidebar ul {
  list-style: none;
}

#status {
  height: 15%;
}

#tetris {
  text-align: left;
  padding: 0.5%;
}

#tetris hr {
  margin-top: 1%;
  margin-bottom: 1%;
}

#tetris li {
  letter-spacing: 1px;
  text-transform: none;
  font-weight: 600;
}

#tetris h1,
#tetris h2,
#tetris h3 {
  margin-top: 0.6%;
  display: inline;
}

#tetris h1 {
  font-size: 15px;
}

#tetris h2 {
  font-size: 13px;
}

#tetris h3 {
  font-size: 11px;
}

#tetris .location,
#tetris .time {
  display: inline;
  text-align: right;
}

#tetris #work {
  margin-bottom: 10%;
}

#tetris #pieces {
  font-family: 'tetris', Helvetica,Arial,sans-serif;
  font-size: 35px;
}