/*RESET*/
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, font, 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 {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

:root {

  /* fonts */
  --primary-font-family: Helvetica Neue, Helvetica, Arial;
  --hacker-type: Lucida Console, Courier, Monotype;

  --lighter: #eee;
  --light: #7f7f7f;

  --darkest: #111;
  --darker: #222;
  --dark: #333;

  --primary-color: #0f0;
  --secondary-color: #0d0;

  --rainbow: linear-gradient(to right, rgba(255, 0, 255, 1), rgba(0, 0, 255, 1), rgba(0, 255, 255, 1), rgba(0, 255, 0, 1), rgba(255, 255, 0, 1), rgba(255, 0, 0, 1));
  --rainbow-vertical: linear-gradient( rgba(255, 0, 255, 1), rgba(0, 0, 255, 1), rgba(0, 255, 255, 1), rgba(0, 255, 0, 1), rgba(255, 255, 0, 1), rgba(255, 0, 0, 1));
  --drop-gradient: linear-gradient( rgba(96, 96, 96, .1) 50%, rgba(48, 48, 48, .5));

  --transparency-value: rgba(256,256,256,.5);
  --cover-height: 100vh;

}

body {
  font-size: 1em;
  font-family: var(--primary-font-family);
  width: 100%;
  color: var(--lighter);
}

h1, h2, h3, h4 {
  margin-top: 1em;
  font-family: var(--hacker-type);
  font-weight: lighter;
  font-variant: all-small-caps;
  color: var(--lighter);
}

h1 {
  font-size: 2em;
  line-height: 2em;
}

h2 {
  font-size: 1.7em;
  line-height: 2.5em;
}

h3 {
  font-size: 1.5em;
  line-height: 2em;
}

h4 {
  font-size: 1.3em;
  line-height: 1.5em;
  text-decoration: underline;
}

p {
  text-align: left;
  padding: .5em;
  margin: auto;
  line-height: 1.5em;
  color: #bbb;
  width: 60%;
  min-width: 30em;
}

.magic {
  transition: all .5s ease-in-out;
  text-decoration: underline;
}

.rainbow {
  background: var(--rainbow-vertical);
  color: var(--darker);
  text-shadow: 2px black;
  border-radius: 1em;
  padding: .2em .6em;
  border: 1px
}

a {
  text-decoration: none;
  color: #f5f5f5;
}

a:hover {
  color: var(--lighter);
}

/************* HEADER **********************/

.header {
  position: relative;
  height: var(--cover-height);
  background: var(--rainbow-vertical);
}

.cover {
  text-align: center;
  position: absolute;
  top:0;
  margin-top: 2em;
  height: var(--cover-height);
  width: 100%;
  height: 100%;
}

.matrix {
  font-size:1.05em;
  text-align:center;
  width:1em;
  padding:0px;
  margin:0px;
}

#matrix {
  font-family: var(--hacker-type);
  width: 15em;
  height: 10px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  margin: auto;
  z-index: 11;
  transform: translateY(1.5em);
  transition: all .2s linear;
}

#headshot {
  height: 12em;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  margin: auto;
  z-index: 11;
  transform: translateY(-4em);
  transition: all .2s linear;
}

#headshot:hover {
  height: 13em;
}

/************* NAVIGATION **********************/

nav {
  font-family: var(--hacker-type);
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
  color: var(--dark);
  z-index: 10;
  margin: auto;
  background: var(--secondary-color);
  border-bottom: 2px solid #666;
}

.navbar-fixed {
  position: fixed;
  top: 0;
  bottom: inherit;
  margin-top: 0;
  z-index: 11;
}

nav li {
  display: inline-block;
  font-variant: all-small-caps;
  padding: .8em 0;
  width: 12%;
  min-width: 6em;
  font-size: 1.05em;
  letter-spacing: .1em;
  transition: all .6s ease;
  color: var(--dark);
}

nav li:hover {
  background: #0e0;
  transition: all .3s ease;
  color: var(--darkest);
}

nav li.active {
  width: 15%;
  min-width: 7em;
  background: var(--primary-color);
}

.active {
  color: var(--darkest);
}

.active:hover {
  color: var(--lighter) !important;
}

.in-view {
  width: 14%;
  min-width: 6em;
}

#flyout-menu {
  display: none;
  z-index: 10;
}


/************* CONTENT **********************/

.content {
  position: relative;
  z-index: 10;
}

section {
  margin: 5em 0;
  border-top: 2px solid #666;
  border-bottom: 2px solid #666;
  text-align: center;
  width: 80%;
  padding-bottom: 2.5em;
  width: 100%;
  background: linear-gradient(to right, rgba(48, 48, 48, .2), rgba(96, 96, 96, .8) 15%,rgba(96, 96, 96, .8) 85%, rgba(48, 48, 48, .2));
}

.divider {
  width: 40%;
  /* border-bottom: 1px solid #aaa; */
  margin: auto;
  margin-bottom: 1em;
  height: 1px;
  background: linear-gradient(to right, rgba(256,256,256,1) ,  rgba(1,1,1,0) 50%, rgba(256,256,256,1) );
}



.more-info {
  margin: 1em inherit;
}

details {
  transition: all 300 ease;
}

summary {
  list-style: none;
}

details summary::-webkit-details-marker {
  display:none;
}

details summary::-moz-details-marker {
  display:none;
}


/************* Cards **********************/

.card {
  vertical-align: top;
  margin: 0 1em;
  text-align: center;
  display: inline-block;
  background: var(--light);
  width: 16em;
  height: 16em;
  overflow: hidden;
  transition: all 300 ease;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,.7);
}

.card-overlay {
  background: rgba(1,1,1,.1);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  opacity: 1;
  transition: all 300 ease;
}

.icon {
  margin: auto;
  margin-top: 1.5em;
  position: absolute;
  height: 10em;
  transform: translateX(-50%);
  z-index:11;
  border-radius: 10em;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,.7);
  transition: all .2s linear;

}

.icon:hover {
  height: 10.5em;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,1);
}

.plus {
  width: 100%;
  height: 100%;
  position: relative;
  display: none;
}

.plus img {
  position: absolute;
  height: 2em;
  margin: auto;
  bottom: 1em;
  transform: translateX(-50%);
  transition: all .3s ease;
}

.card-content {
  margin: auto;
  color: var(--darker);
  top: 10.5em;
  position: relative;
  padding: 1em;

}

/************* EDUCATION **********************/

#school p {
  text-align: center;
  width: 100%;
  margin: auto;
  padding: 0;
}

.courses li {
  margin: auto;
  text-align: left;
  font-size: .8em;
  line-height: 1.2em;
  list-style: lower-roman;
  width: 80%;
}


  .card {
    margin-top: 1em;
    text-align: center;
    height: auto;
    border-radius: 2em;
  }

  .card h3{
    font-size: 1.2em;
    font-variant: normal;
    padding-top: 7em;
  }

  .card h3, .card h4 {
    margin-top: 0;
  }

  .card h4 {
    font-size: .9em;
  }

  .icon {
    height: 6em;
    transform: translateX(-50%);
  }

  .icon:hover {
    height: 6em;
  }

  .courses {
    top: 0em;
    margin: 0 1.5em 1.5em 1.5em;
  }

  .courses summary {
    margin-bottom: 1em;
  }

/************* SKILLS **********************/

section#skills p {
  text-align: center;
}



/************* PROJECTS **********************/

.project {
  align-items: center;
  background: rgba(48,48,48,.7);
  width: 50%;
  margin: 0 auto;
  border-radius: 2em;
  margin: 5% 5%;
  display: grid;
  grid-row-gap: 1em;
  grid-template-columns: 1fr;
  grid-template-rows: .5fr .2fr 2fr;
  grid-template-areas:
    "proj-title"
    "proj-links"
    "proj-info";
}

.proj-pic {
  display: hidden;
  grid-area: proj-pic;
  height: 10em;
  align-self: center;
}

.proj-links {
  grid-area: proj-links;
  height: 2em;
}

.proj-title {
  font-variant: normal;
  grid-area: proj-title;
}

.proj-info {
  justify-items: center;
  margin: 0 5%;
  padding: 2em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 1em;
  grid-template-areas:
  "proj-type proj-type "
  "proj-date proj-pos  "
  "proj-desc proj-desc "
  "proj-langs proj-langs";
}

.git-link {
  grid-area: git-link;
}

.git-link-icon {height: 2em;}

.proj-type {
  grid-area: proj-type;
}
.proj-date {grid-area: proj-date;}
.proj-date::before {content: "When: ";}

.proj-langs {
  font-weight: lighter;
  color: #50df50;
  grid-area: proj-langs;
}
.proj-langs::before {content: "Languages Used: ";}

.proj-pos {grid-area: proj-pos;}
.proj-pos::before {content: "Role: ";}

.proj-desc {grid-area: proj-desc;}

.project p {
  padding: 0 !important;
  width: 100%;
  min-width: 100%;
  font-size: 1em;
  line-height: 1.2em;
  overflow-wrap: normal;
}

/************* Flickity Carousel **********************/


.project-carousel {
}

.is-selected {
  background: rgba(48,48,48,1);


}

.flickity-page-dots .dot {
  background: #eee;
  opacity: .4;
}

.flickity-page-dots .dot.is-selected {
  background: #0d0;
}



/************* CONTACT **********************/

#links {
  color: #00ed00;
  display: inline-block;
  padding: 2em;
  font-family: var(--hacker-type);
}

 #links li {
   display: inline-block;
   height: 2em;
   width: 5em;
   padding: 2em;
   text-align: center;
 }

 img.icon-link {
   height: 3em;
   padding: .2em;
 }

.email {
}

/************* Form ****************/

#prompt {
  padding-bottom: 2em;
  color: #bbb;
}

form {
  background-color: var(--darker);
  max-width: 60%;
  min-width: 340px;
  margin: auto;
  border-radius: 5px;
  padding: 1em;
  padding-top: 2em;
  border: 2px solid #666
}

input, textarea, button {
  margin: 5px 0;
  padding: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #bbb;
  background-color: #dedede;

}

input.field, textarea {
  margin: 2em 0;
  margin-top: 0;
  min-width: 330px;
  max-width: 50%;
}

textarea {
  height: 8em;
}

::-webkit-input-placeholder {
   text-align: center;
}

:-moz-placeholder { /* Firefox 18- */
   text-align: center;
}

::-moz-placeholder {  /* Firefox 19+ */
   text-align: center;
}

:-ms-input-placeholder {
   text-align: center;
}

/************* FOOTER **********************/
.top-link {
  text-align: center;
  padding-bottom: 2.5em;
  margin: 2em;
}

.top-link:hover {
  text-decoration: underline;
}

.footer {
  font-size: .8em;
  text-align: center;
  color: var(--dark);
  background: var(--secondary-color);
  z-index: 10;
  padding: 1em;
  position: relative;
}




@media only screen and (min-width : 320px) and (max-width : 480px) {

  #matrix {
    display: none;
  }

  #headshot {
    z-index: 9;
    transform: translateY(-2em);
  }

  /****  NAVIGATION ****/

  nav, .navbar-fixed {
    display: none;
  }

  /************* Fly-Out Menu **********************/

  li, a {
    text-align: left;
    line-height: 1em;
  }

  ul.menu, li.start  {
    background: #0d0 !important;
    border-radius: 2em;
  }

  li.start {
    border-radius: 1.6em;
  }

  ul.menu li a {
    color: var(--darker);
    padding: .3em .2em;
  }

  ul.menu li a:hover {
    background: var(--ternary-color);
  }

  input.menu-trigger:checked+ul.menu {
    height: inherit;
    width: 8em;
    text-align: center;
  }

  ul.menu ul:last-child {
    padding-bottom: .5em;
  }

  #flyout-menu {
    display: block;
    position: fixed;
    z-index: 11;
    transform: translate(.5em, .5em);
  }

  #flyout-menu .menu {
  }

  /****  CONTENT  ****/

  p {
    width: auto;
    min-width: auto;
    margin: 1em;
  }

  section {
    width: 100%;
    height: 100%;
    background: #333;
    margin: 5em auto;
  }

  /****  EDCUATION  ****/

  #school p {
    margin: 1em auto;
    width: 75%;
  }

  .card {
    margin-top: 1em;
    text-align: center;
    height: auto;
    border-radius: 2em;
  }

  .card h3{
    font-size: 1.2em;
    font-variant: normal;
    padding-top: 7em;
  }

  .card h3, .card h4 {
    margin-top: 0;
  }

  .card h4 {
    font-size: .9em;
  }

  .icon {
    height: 6em;
    transform: translateX(-50%);
  }

  .icon:hover {
    height: 6em;
  }

  .courses {
    top: 0em;
    margin: 0 1.5em 2.5em 1.5em;
  }

  .courses summary {
    margin-bottom: 1em;
  }

  /****  TECHNICAL SKILLS  ****/

  section p {
    margin: auto;
    width: 75%;
  }

  /****  PROJECTS  ****/

  .project {
    width: 90%;
    margin: 5%;
    background: rgba(96,96,96, 1);
    height: 22em;
    overflow: scroll;
  }
  .proj-pos::before, .proj-date::before {content: "";}

  .proj-langs {
    color: #2e2;
  }

  .proj-info {
    margin: 0;
  }

  /****  Flickity Carousel  ****/

  .flickity-button {
    transform: translateY(-13em);
  }

  .flickity-prev-next-button.previous { left: 2em;}
  .flickity-prev-next-button.next { right: 2em;}

  .project-carousel {
    margin: 0;
  }


  /****  CONTACT  ****/


  form{
    min-width: inherit;
  }

  input.field, textarea{
    min-width: auto;
    width: 90%;
    max-width: 300px;
  }

  form {
    min-width: 20px;
    max-width: 100%;
  }

  #links {
    padding: .5em;
  }

  #links li {
    padding: 2em 0 0 0;
    transform: translateY(-.5em);
  }

  .email {
    letter-spacing: .05em;
  }

  .header {
    background: var(--primary-color);
  }


  .container {
    margin: auto 1em;
  }
}

/* LARGE SCREENS */
@media screen and ( min-width: 768px ) {

}