@import url("https://rsms.me/inter/inter-ui.css");
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');

body {
  position: relative;
  margin: 0;
  padding: 0;
  font-family: "Inter UI", sans-serif;
  text-align: center;
  color: white;
}

.background {
  position: absolute;
  width: 100%;
  background-image: linear-gradient(-180deg, #000000 0%, #255835 100%);
  overflow: hidden;
  z-index: 1;
  top: -10%;
  height: 120%;
  min-height: 120vh;
  margin-bottom: -20%;
}

.stars {
  position: absolute;
  top: 0;
  width: 300vw;
  height: 100vh;
  transform: translate(0%, 0%);
  background-size: contain;
  background-repeat: repeat;
  transform-origin: top left;
}

.stars1 {
  background-image: url("stars1.svg");
  background-size: 890px;
  height: 750px;
  animation: panning-stars 200s linear infinite alternate;
}

.stars2 {
  background-image: url("stars2.svg");
  height: 530px;
  animation: panning-stars 300s linear infinite alternate;
}

.stars3 {
  background-image: url("stars3.svg");
  height: 370px;
  animation: panning-stars 400s linear infinite alternate;
}

@keyframes panning-stars {
  from {
    transform: translate(-20%, 0%);
  }
  to {
    transform: translate(-80%, -40%);
  }
}

.mycontainer {
  position: relative;
  z-index: 2;
  padding: 104px 0 24px 0;
  width: 95%;
  max-width: 600px;
  margin: auto;
}

h1 {
  display: block;
  font-size: 80px;
  margin: 0 0 24px 0;
}

@media (max-width: 500px) {
  h1 {
    font-size: 14vw;
  }
}

h2 {
  font-weight: 500;
  font-size: 24px;
}

h3 {
  font-weight: 400;
  font-size: 15px;
}

h4 {
  font-weight: 500;
  font-size: 45px;
}

h5 {
  font-weight: 400;
  font-size: 15px;
}

h6 {
  line-height: 2;
  text-align: left;
  font-weight: 400;
  font-size: 18px;
}

h7 {
  display: block;
  font-size: 50px;
  margin: 0 0 0 0;
}

a {
  color: inherit;
  text-decoration: underline;
}

.boxed-title {
  font-weight: bolder;
  color: #020103;
  letter-spacing: -6.7px;
  text-transform: uppercase;
  padding: 0 16px;
  background: #255835;
}

.lined-title {
  display: inline-block;
  font-weight: bold;
  color: #255835;
  letter-spacing: -4.5px;
  text-transform: uppercase;
  padding: 0 16px;
  border-color: #9b00f5;
  border-top: 8px solid;
  border-bottom: 8px solid;
  line-height: 1;
}

code {
  display: block;
  box-sizing: border-box;
  text-align: left;
  font-size: 18px;
  width: 100%;
  padding: 16px 24px;
  background: rgba(44, 37, 44, 0.8);
  border: 1px solid #7f797f;
  border-radius: 8px;
  margin-bottom: 16px;
  margin-top: -50px;
}

code:hover{
  background: rgba(149, 165, 166, 1);
}

code:focus {
  background: rgba(149, 165, 166, 1);
}

code1 {
  display: block;
  box-sizing: border-box;
  text-align: left;
  font-size: 18px;
  width: 100%;
  padding: 16px 24px;
  background: rgba(44, 37, 44, 0.8);
  border: 1px solid #7f797f;
  border-radius: 8px;
  margin-bottom: 16px;
}

.header {
  margin-bottom: 104px;
}

.projects {
  margin-top: 64px;
}

.introduction {
  margin-top: 10px;
}

.introduction img {
  height: auto;
  width: auto;
}

.footer {
  margin-top: 100px;
}

.topnav {
  background-color: #333;
  overflow: hidden;
  margin-bottom: 50px;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a:focus {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #255835;
  color: white;
}

.topnav b {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 5px 7px;
}

.topnav c {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 5px 7px;
}

.topnav c:hover {
  background-color: #f2f2f2;
  color: rgba(149, 165, 166, 1);
}

.topnav .icon {
  display: none;
}

.img-container {
  text-align: center;
}


.container{
	max-width: 600px;
	display:flex;
	justify-content: space-evenly;
	flex-wrap:wrap;
}
  
 #leftbox, #rightbox { 
 	margin-top: 10%;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: -5%;
 }

 .typewriter h4 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid rgba(211, 211, 211, 0.75); /* 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: rgba(211, 211, 211, 0.75);; }
}

.card-footer {
  background: transparent;
  border-top: 0px;
}

.my-card{
  border:1px solid gray;
}

.my-card:hover{
  border-color:black;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/* Fade In Animation */
.fade-in {
  animation: fadeIn ease 3s;
  -webkit-animation: fadeIn ease 3s;
  -moz-animation: fadeIn ease 3s;
  -o-animation: fadeIn ease 3s;
  -ms-animation: fadeIn ease 3s;
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

/* Footer CSS */
.footer-basic {
  padding:40px 0;
  background-color:#ffffff;
  color:#4b4c4d;
}

.footer-basic ul {
  padding:0;
  list-style:none;
  text-align:center;
  font-size:18px;
  line-height:1.6;
  margin-bottom:0;
}

.footer-basic li {
  padding:0 10px;
}

.footer-basic ul a {
  color:inherit;
  text-decoration:none;
  opacity:0.8;
}

.footer-basic ul a:hover {
  opacity:1;
}

.footer-basic .social {
  text-align:center;
  padding-bottom:25px;
}

.footer-basic .social > a {
  font-size:24px;
  width:40px;
  height:40px;
  line-height:40px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
  border:1px solid #ccc;
  margin:0 8px;
  color:inherit;
  opacity:0.75;
}

.footer-basic .social > a:hover {
  opacity:0.9;
}

.footer-basic .copyright {
  margin-top:15px;
  text-align:center;
  font-size:13px;
  color:#aaa;
  margin-bottom:0;
}

html, body{
  background-color: #c4bec6;
  display: border-box;
}

.container {
  z-index: 1;
  perspective:3000px;
}

.container .book {
  position: relative;
  display: block;
  width: 400px;
  height: 550px;
  margin: 5% auto;
  border-radius: 2px 4px 4px 2px;
  background: linear-gradient(45deg,  #DAD5DC 0%, #f2ebf4 100%);
  font-family: acumin-pro, sans-serif;
  -webkit-box-shadow: 13px 13px 8px 0px rgba(151, 146, 153,0.6);
  -moz-box-shadow: 13px 13px 8px 0px rgba(151, 146, 153,0.6);
  box-shadow: 13px 13px 8px 0px rgba(151, 146, 153,0.6);
  font-weight: 400;
  color: #2b2b2b;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform .5s;
  -moz-transition: -moz-transform .5s;
  transition: transform .5s;
}

.container .book:hover {
  -webkit-transform: rotate3d(0,1,0,45deg);
  -moz-transform: rotate3d(0,1,0,45deg);
  transform: rotate3d(0,1,0,45deg);
}

.container .book > div,
.container .front > div {
  display: block;
  position: absolute;
}

.container .front {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  -webkit-transition: -webkit-transform .5s;
  -moz-transition: -moz-transform .5s;
  transition: transform .5s;
  -webkit-transform: translate3d(0,0,20px);
  -moz-transform: translate3d(0,0,20px);
  transform: translate3d(0,0,20px);
  z-index: 10;
}

.container .front > div {
  width: 400px;
  height: 550px;
}

.container .left-side{
  width: 40px;
  left: -20px;
  height: 550px;
  background-color: rgba(232,229,234);
  -webkit-transform: rotate3d(0,1,0,-90deg);
  -moz-transform: rotate3d(0,1,0,-90deg);
  transform: rotate3d(0,1,0,-90deg);
}

.cover svg{
  position: absolute;
  top: 50%;
  left: 45%;
  margin-top: -100px;
  margin-left: -110px;
  width: 300px;
}

#eye-right {
  padding-left: 185px;
}

.cover .num-up{
  position: absolute;
  top: 64px;
  left: 47px;
  letter-spacing: 50px;
  transform: rotate(-90deg);
}

.cover .num-down{
  position: relative;
  top: 65px;
  left: -95px;
  transform: rotate(-90deg);
}

.author{
  font-family: acumin-pro, sans-serif;
  font-weight: 400;
  position: absolute;
  top: 475px;
  left: 50px;
  opacity: .8;
  }

.container .front > div {
  border-radius: 0 3px 3px 0;
  box-shadow: 
    inset 4px 0 10px rgba(0, 0, 0, 0.1);
}

.container .front:after {
  content: '';
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: -1px;
  width: 1px;
}

.container .cover:after {
  content: '';
  position: absolute;
  top: 0;
  left: 10px;
  bottom: 0;
  width: 3px;
  background: rgba(0,0,0,0.1);
  box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1);
}

.container h2 {
  width: 500px;
  height: 40px;
  color: #2b2b2b;
  font-size: 15px;
  line-height: 40px;
  padding-right: 10px;
  text-align: right;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: rotate(90deg) translateY(-40px);
  -moz-transform: rotate(90deg) translateY(-40px);
  transform: rotate(90deg) translateY(-40px);
}

.cover {
 background: linear-gradient(45deg,  #DAD5DC 0%, #f2ebf4 100%);
}


.left-side h2 span:first-child {
  font-weight: 400;
  font-size: 13px;
  padding-right: 20px;
}

.left-side h2 span:last-child{
  font-family: acumin-pro, sans-serif;
} 

.clear-card {
  /* create a custom class so you 
     do not run into specificity issues 
     against bootstraps styles
     which tends to work better than using !important 
     (future you will thank you later)*/
  
    background-color: rgba(245, 245, 245, 1);
    opacity: 0;
  }
  
  typewriting {
    font-size: 23px;
    width: 400px;
  }

  .img-fluid {
    padding: 30%;
    max-width: 40%;
    height: auto
  }
  .custom-img-size {
  max-width: 80%;
  height: auto;
  }
  .img-logo {
    padding: 5%;
    max-width: 30%;
    height: auto
  }