stylesheet.css

/* from GPI github with heavy edits
https://raw.githubusercontent.com/cmugpi/personal-website/master/example.css

Inspired by bradleyzhou.me
*/

html, body {
  /* overflow-y: hidden; */
  overflow-x: hidden;
}


/* #862e9c */
body {
  background-color: #ffffff;
  color: #000000;
  font-family: 'Maven Pro', sans-serif;
  font-size: 120%;
}

h1, h2, h3, h4, h5, h6 {
  color: #000000;
  font-family: Helvetica;
}


a, a:active, a:focus, a:hover, a:visited {
  color: #000000;
  text-decoration: none;
}

a:hover {
  color: #00000f;
}

div.wrapper {
  width: 80%;
  margin-top: 50px;
  margin-bottom: 50px;
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  /* overflow-x: scroll; */
  overflow: auto;
}

header {
  height: 100%;
  float: left;
  width: 50%;
  padding: 60px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

header-home {
  height: 100%;
  float: left;
  width: 50%;
  padding: 60px;
  margin: 0 auto;
  text-align: center;
  position: relative;

}

main {
  height: 100%;
  /* margin-left: 45%; */
}

ul {
  padding-left: 60px;
}

hr {
  border: none;
  border-bottom: 1px solid #e9ecef;
}

.logo {
  width: 200px;
  height: 200px;
  display: inline-block;
  background-size: cover;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  /* border: 2px solid #F8F7F5; */
  /* box-shadow: 0 0 0 3px #46433A; */

}
.logo:hover {
   box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.18), 0 0px 12px 0 rgba(0, 0, 0, 0.15);
   opacity: 0.9;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 25%;
  text-align: left
}

  .animated {
   animation: fade-in-down 0.6s;
   animation-delay: 0.3s;
   animation-fill-mode: both;
}

.socials {
   margin-top: 20px;
   margin-bottom: 20px;
   text-align: center;
   overflow: none;
}

.about {
  text-align: center;
  overflow: none;
  font-size: 2.00rem;
  font-weight: 300;
  font-family: Helvetica;
  color: #0e76a8;
  width: 90%;
  margin: 30px auto;
  letter-spacing: 2px;
  display: flex;
  justify-content: space-between;
}

.projects {
  text-align: center;
  overflow: none;
  font-size: 2.00rem;
  font-weight: 300;
  font-family: Helvetica;
  color: #0e76a8;
  width: 90%;
  margin: 30px auto;
  letter-spacing: 2px;
  display: flex;
  justify-content: space-between;
}

.projects > .link{
  margin-top: 20px;
  margin-bottom: 20px;
  float: left;
  overflow: none;
  font-size: 1.80rem;
  font-weight: 300;
  font-family: Helvetica;
  color: #0e76a8;
  width: 100%;
  letter-spacing: 2px;
  text-align: center;
}

.projects > .link:hover {
  color: #000000;
}

.projects > .text{
  margin-top: 10px;
  margin-bottom: 10px;
  overflow: none;
  font-size: 1.30rem;
  font-weight: 300;
  font-family: Helvetica;
  color: #000000;
  width: 100%;
  letter-spacing: 1px;
  text-align: left;
}


.socials > .link {
   margin: 0;
   padding: 5px;
   text-decoration: none;
   position: relative;
   display: inline-block;
   height: 55px;
   width: 55px;
}

.icon {
   display: inline-block;
   width: 25px;
   height: 25px;
   fill: #000;
   text-align: center;
   color: #000;
   margin: 7px auto;
}
.icon:hover {
   fill: #0077CC !important;
}

.description {
   font-size: 1.25rem;
   font-weight: 300;
   font-family: Menlo;
   color: #C0C0C0;
   width: auto;
   margin: 0 auto 5px;
   letter-spacing: 0.75px;

   /* animation */
   white-space: nowrap;
   text-align: center;
   overflow: hidden;

   animation:
     typing 4.5s steps(60, end),
     blink-caret .75s step-end infinite;
}

   /* The typing effect */
@keyframes typing {
   from { width: 0% }
   to { width: 100% }
}

   /* The typewriter cursor effect */
@keyframes blink-caret {
   from, to { border-color: transparent }
   50% { border-color: orange; }
}

   /* animation: typewriter 1.5s steps(44) 1s 1 normal both,
              blinkTextCursor 0.5s steps(44) infinite normal; */


}

.animated {
   animation: fade-in-down 0.6s;
   animation-delay: 0.3s;
   animation-fill-mode: both;
}
@keyframes fade-in-down {
   0% {
   opacity: 0;
   transform: translateY(-10px);
   }
   100% {
   opacity: 1;
   transform: translateY(0);
   }
}

.animated-down {
   animation: fade-in-down 0.6s;
   animation-delay: 0.3s;
   animation-fill-mode: both;
}
@keyframes down {
   0% {
   transform: translateY(-10px);
   }
   100% {
   transform: translateY(0);
   }
}

.typewriter {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation:
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0% }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

img {
  border-radius: 5%;
  max-width: 50%;
  height: auto;
}

.socials > .link:hover:before {
   opacity: 1;
   display: inline-block;
   transform: translate3d(0, -8, 0);
   white-space: nowrap;
   overflow: auto;
}
.socials > .link:before {
   content: attr(data-title);
   display: none;
   position: absolute;
   bottom: -10px;
   left: auto;
   margin: 0 auto;
   font-size: 13px;
   padding: 0px 10px;
   background: #222;
   color: #fff;
   border-radius: 2px;
   height: 22px;
   line-height: 22px;
   opacity: 0;
   transition: opacity 150ms linear, transform 150ms linear, -webkit-transform 150ms linear;
   transform: translate3d(0, -8px, 0);
   z-index: 99;
   overflow: auto;
}
.socials > .link:after {
   content: "";
   position: absolute;
   top: 40px;
   left: 27px;
   width: 0;
   height: 0;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-bottom: 6px solid #222;
   opacity: 0;
   transition: opacity 150ms linear, transform 150ms linear, -webkit-transform 150ms linear;
   transform: translate3d(0, -8px, 0);
   z-index: 100;
   overflow: auto;
}
.socials > .link:hover:after {
   opacity: 1;
   transform: translate3d(0, 0, 0);
}

.nav {
  font-size: 2.00rem;
  font-weight: 300;
  font-family: Helvetica;
  color: #0e76a8;
  width: 80%;
  margin: 30px auto;
  letter-spacing: 15px;
  text-align: center;
}
.nav > .link {
  font-size: 1.5rem;
  font-weight: 300;
  font-family: Helvetica;
  color: #0e76a8;
  width: 80%;
  margin: auto 20px;
  letter-spacing: 1px;
  text-align: center;
}

.nav > .link:hover {
  color: #000000;
}

.footer-stuff {
  font-size: 0.75rem;
  font-weight: normal;
  font-family: sans-serif;
  color: #CCC;
}

.title{
  font-size: 2.5rem;
  font-weight: 500;
  font-family: Helvetica;
  color: #000;
  letter-spacing: 7px;
}

.about{
  font-size: 2.5rem;
  font-weight: 500;
  font-family: Helvetica;
  color: #000000;
  letter-spacing: 1px;
}

.flex-container {
  display: flex;
  flex-direction: column;
  background-color: transparent;
  align-items: center;
}

.flex-container > div {
  background-color: #fff;
  width: 100%;
  margin: 10px;
}

.eastereggs {
  font-size: 1.25rem;
  font-weight: 300;
  font-family: Menlo;
  color: #C0C0C0;
  border: 0;
  text-align: center;
}
.eastereggs:focus {
    outline-width: 0;
}