*{
  background-color: black;
  font-family: 'Common Pixel', sans-serif;
}

.text {
  text-align: center;
  position: relative;
  width: 800px;
  color: aliceblue;
  left: 400px;
}

.box {
  text-align: center;
  position: absolute;
  left: 780px;
  color: aliceblue;
}



  
  /* DEMO-SPECIFIC STYLES */
  .typewriter h1 {
    color: rgb(10, 239, 255);
    font-family: 'Common Pixel', sans-serif;
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid purple; /* 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(30, end),
      blink-caret .5s 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: purple }
  }

  #container{
    height: 100vh;
    width: 50%;
    background-image: url(images/roman\ numerals.png);
    background-size: cover;
    background-position: center;
    position:relative;
    left: 400px;
    -webkit-animation: rotating 20s linear infinite;
    -moz-animation: rotating 20s linear infinite;
    -ms-animation: rotating 20s linear infinite;
    -o-animation: rotating 20s linear infinite;
    animation: rotating 10s linear infinite;
}

.name{
  color: aliceblue;
  text-align: center;
}


.shape-shift{
    margin: 3em auto;
    text-align: center;
    font-size: 3em;
   border: 3px solid white;
   width: 7em;
  background-repeat: no-repeat;
  background-size:90% 100%;
  background-position-x:0.1em ;
position: relative;
  transition: all 0.2s;
}

h4{
   width: 10em;
   margin: 1.3em -1.5em;
}



@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

img{
  cursor:url("images/cursor.png"), url("images/cursor.cur"), default;
}

body {
  margin: 0;
  background-color: black;
}

.section {
  perspective: 1000px;
}

.container {
  width: 680px;
  margin: auto;
  display: flex;
  flex-wrap: wrap; 
  justify-content: center;
  align-items: center;
  height: 100vh;
  transition: 1s;
  transform: rotateX(55deg) rotateZ(-45deg) rotateY(10deg);
  transform-style: preserve-3d;
}

.container-origin {
  transform: rotate(0);
}

img {
  max-width: 100%;
}

.card {
  width: 200px;
  margin: 10px;
  transition: 0.3s;
}
.card:hover {
  cursor: pointer;
  transform: translateZ(10px);
}