body {
    background-color: #111;
    font-family: "Open Sans","Helvetica","Arial","sans-serif";
    font-size: 14px;
    color: #999;
}
  
h1#vanity {
  text-align: center;
  color: #aaa;
  margin-bottom: 10px;
}

#subtitle {
  font-family: "monospace";
  font-size: 30px;
  text-align: center;
  color: #444;
  display:table; 
  margin: 0 auto;
  overflow: visible;

}

#fullname {
  display:inline-block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;
}

#cursor{
  width:0;
  display:inline-block;
  position: relative;
  overflow: visible;
  animation: blinking;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
  white-space:nowrap;
}

#cursor::after{
  content: '_';
  position:relative;
  text-decoration: none;
}

.typed {
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: typing;
  animation-duration: 2.1s;
  animation-iteration-count: 1;
  animation-timing-function: steps(21, end);
  animation-fill-mode: forwards;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blinking {
    0% {opacity: 0}
    50% {opacity: 100%}
    100% {opacity: 0}
}

@media only screen and (min-width: 700px) {
  h1#vanity {
    font-size: 100px;
  }
}

@media only screen and (min-width: 300px) and (max-width: 700px) {
  h1#vanity {
    font-size: calc(40px + 0.15 * (100vw - 300px) );
  }
}

@media only screen and (max-width: 300px) {
  h1#vanity {
    font-size: 40px;
  }
}

@media only screen and (max-width: 450px) {
  #subtitle {
    font-size: 20px;
  }
}

 
@media only screen and (max-height: 700px) {
  .fnc {
    position: relative;
    margin: 10px 0 0 0;
  }
}

@media only screen and (min-height: 700px) {
  .fnc {
    position: relative;
    margin: 188px 0 0 0;
  }
}

div.text-wrapper {
 margin: 10px;
}
  
div.introtext {
  position: relative;
  width: auto;
  margin: 0 0 60px 0;
  padding: 0;
  text-align: center;
  color: #999;
  font-size: 18px;
  line-height: 1.5
}

div.maintext {
  position: relative;
  width: auto;
  margin: 0;
  padding: 0 10px 10px 0;
  text-align: left;
  color: #999;
  font-size: 14px;
  line-height: 1.5
}

h2 {
 color: #999;
 text-align:center;
 width:auto;
 margin: 12px 0 12px 0;
 padding-bottom: 5px;
 font-size: 30px;
/* border-bottom: 1px solid; */
}

p.list-note {
  padding-left: 15px;
}

div.footer {
  width: 100%;
  margin: 0;
  text-align: center;
}

details.bouncy, summary.bouncy {
  display: inline;
}

details:not([open]).bouncy {
  animation-name: to-and-fro;
  animation-duration: 0.5s;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

details:not([open]):hover.bouncy {
  animation-name: to-and-fro;
  animation-duration: 0.2s;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

summary:hover.bouncy {
  color: #eee;
}

@keyframes to-and-fro {
  from { transform: rotate(3deg); }
  to { transform: rotate(-2deg); }
}

a:link,  a:visited {
  color: #ddd;
  text-decoration: none;
}

a:hover {
  color: #eee;
  text-decoration: underline;
}

a.portfolio-title {
  font-size: 1.1em;
  font-weight: bold;
}