*{
  margin:0;
  padding:0;
}
html{
  background-color: #444;
}
body{
  padding-top:150px;
  color:#444;
  background-color: #fbf7f5;
  font-family: Arial;
  letter-spacing: 1px;
}
img{
  width: 100%;
}
ul,ol{
  margin-left: 20px;
}
.header{
  z-index: 3;
  position: fixed;
  top:0;
  height:65px;
}
.header,
.footer{
  width: 100%;
  background-color:#444;
}
nav{
  text-align: center;
  margin-top: 55px;
  color: #444;
  font-size: 11px;
  border-bottom: 2px solid #444;
  background-color: #fbf7f5;
  padding:5px;
}
nav a,
.leave-rec{
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 0 10px;
}
a{
  color: #444;
  text-decoration:none;
}
a:hover{
  text-decoration:underline;
  color:#444;
}
h1{
  text-align: center;
  text-transform: uppercase;
  margin-bottom:150px;
}
.info-section h1{
  margin-bottom:50px;
  text-align: left;
}
.info-section h1 .logo{
    position: relative;
    top:-5px;
  }
.info-section .connect{
  display: inline-block;
  width: 100%;
  margin:50px 0;
  text-align: center;
}
h2{
  padding:10px;
  text-align: right;
  color: #fbf7f5;
  background-color: #444;
}
h3 a{
  margin-left:10px;
  font-size: 10px;
  text-decoration: underline;
}
h3 a:hover{
  text-decoration: none;
}
.resume h3,
.resume h4{
  margin-left: 15px;
}
.sub-header{
  position: relative;
  top: -4px;
  padding: 2px 5px;
  margin-left:5px;
  font-size: 12px;
  font-weight: bold;
  color: #fbf7f5;
  background: #444;
}
ul{
  margin-left: 40px;
  font-size: 12px;
}
.info-section{
  margin:75px 0 250px;
}
.info-section .copy{
  margin-top: 25px;
}
.rounded img{
  border-radius: 10%;
}
.circle{
  border-radius:50%;
}
.section{
  margin-bottom:150px;
}
.section .section{
  margin-bottom:75px;
}
.section .section .section{
  margin-bottom:50px;
}
.section .section .section .section{
  margin-bottom:25px;
}
.caption{
  position: absolute;
  right: 15px;
  bottom: 0;
  padding: 2px 10px;
  font-size:10px;
  color: #444;
  background-color: #fbf7f5;
  box-shadow: -1px -1px 1px 0px rgba(68,68,68,0.5);
}
.caption.centered{
  position: relative;
  right: unset;
  text-align: center;
  box-shadow: none;
}
.info-section .caption{
  font-weight: bold;
}
.code-link{
  display: inline-block;
  position: relative;
  width: 40px;
}
h1 .code-link{
  top:5px;
}
h3 .code-link{
  top:2px;
}
.award{
  padding:5px;
}
.name{
  font-weight: bold;
  font-size:14px;
}
.company{
  text-transform: uppercase;
}
.rec{
  margin: 25px 0 75px;
  text-indent: 20px;
}
.timeframe{
  font-size:12px;
}
.location{
  position: relative;
  top:-15px;
  margin-left:30px;
  font-size:8px;
  text-transform: uppercase;
}
.group{
  position: relative;
  min-height:93px;
  margin-left:-1px;
  border-left:1px solid #444;
}
.group::before,
.group::after{
  content:"";
  position:absolute;
  width:10px;
  height:1px;
  background-color:#444;
}
.group::before{
  top:0;
}
.group::after{
  bottom:0;
}
.leave-rec{
  position: relative;
  font-size:10px;
  font-weight: bold;
}
.plus{
  display: inline-block;
  position: relative;
  top:20px;
  width: 50px;
  height: 50px;
  margin-right:10px;
  border: 2px solid #444;
  border-radius: 50%;
  transition: transform 1s ease-in-out;
}
.plus span{
  position: relative;
  left: 2px;
  top: -8px;
  font-size: 45px;
}
.leave-rec:hover .plus{
  color:#fbf7f5;
  background-color:#444;
  transform: rotate(180deg);
}
.cert{
  margin-bottom: 50px;
}
.skills h3,
.education h3{
  font-size: 16px;
}
.education .timeframe{
  display: block;
}
.logo{
  display: inline-block;
  position: relative;
  top: -2px;
  width: 30px;
  margin-right: 5px;
}
.disclaimer{
  font-size: 10px;
  text-align: center;
  background-color: #fbf7f5;
}
.footer{
  z-index: 2;
  position: relative;
  padding:50px 0;
  margin-top: 100px;
  text-align: center;
}
.footer a{
  display: inline-block;
  vertical-align: middle;
  margin:20px;
}
.github-link {
  width: 70px;
}
.linkedin-link {
  width: 100px;
}
.gdoc-link {
  width: 122px;
}
.copyright{
  margin-top:50px;
  font-size: 8px;
  text-align:center;
  color:#fbf7f5;
}
.card-link{
  margin-top:20px;
  overflow: hidden;
}
.card-link a{
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 20px;
  background-color: #444;
  border: 3px solid #444;
  transition: background-color 0.3s ease-out;
}
.card-link a:hover{
  background-color:#fbf7f5;
}
.card-link span{
  display: inline-block;
  position: absolute;
  bottom: 17px;
  left: 27px;
  width: 100%;
  rotate: -90deg;
  transform-origin: left;
  font-size:10px;
  color:#fbf7f5;
}
.card-link a:hover span{
  color:#444;
}
.project{
  float:none;
  padding: 50px 5px;
  background-color: #fff;
  border:1px solid #444;
  overflow: hidden;
}
.chatgpt-markdown{
  text-align: center;
}
@media (max-width:991px){
  .block-md{
    display: block;
  }
  .copy{
    margin-top:10px;
  }
}
@media (max-width:767px){
  h1,h2{
    text-align: center!important;
  }
  p{
    text-align: justify;
  }
  .info-section{
    margin: 0;
  }
  .info-section h1 .logo{
    display: block;
    margin: 0 auto;
  }
  .timeframe{
    display: block;
  }
}
@media (max-width:470px){
  .block-sm{
    display: block;
  }
}
@media (max-width:320px){
  .plus{
    display: block;
    top: -10px;
    margin: 0 auto;
  }
}