html {
  scroll-behavior: smooth;
}

a {
  color:white;
}

div {
  font-family: 'Roboto Mono', monospace;
  font-size: 120%;
}

#header h1{
    font-family: 'Press Start 2P', system-ui;
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0%;
    margin-top: 3%;
    font-size: 200%;
}

#header h2 {
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
    font-size: 70%;
    margin-bottom: 0%;
}

h3 {
  
  font-family: 'Press Start 2P', system-ui;
  font-size: 60%;
  margin-left: 18%;
  margin-right: 18%;
  
}

.typewriter {
  margin-bottom: 5%;
  margin-top: 5%;
}

.typewriter h1 {
    font-size: smaller;
    margin-bottom: 0%;
    margin-left: auto;
    margin-right: auto;
    max-width: fit-content;
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid black; /* The typwriter cursor */
    white-space: nowrap; 
    /* 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: black }
  }

  /* Pixel Button */
  .container {
    font-size: 90%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
    max-width: fit-content;
    text-transform: lowercase;
    white-space: nowrap;
  }
  
  .pixel, .pixel2 {
    font-size: 25px;
    color: white;
    height: auto;
    margin: 10px;
    
    
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-transform: uppercase;
    
    cursor: pointer;
    
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  .pixel:active, .pixel2:active {
    top: 2px;
  }
  
  .pixel {
    line-height: 0;
    
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: -o-crisp-edges; /* Opera */
    image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
    
    border-style: solid;
    border-width: 20px;
    -moz-border-image: url(https://i.imgur.com/sREM8Yn.png) 20 stretch;
    -webkit-border-image: url(https://i.imgur.com/sREM8Yn.png) 20 stretch;
    -o-border-image: url(https://i.imgur.com/sREM8Yn.png) 20 stretch;
    border-image: url(https://i.imgur.com/sREM8Yn.png) 20 stretch;
  }
  
  .pixel p {
    font-family: 'Press Start 2P', system-ui;
    display: inline-block;
    vertical-align: top;
    position: relative;
    width: auto;
    text-align: center;
    margin: -20px -20px;
    line-height: 20px;
    padding: 10px 20px;
    
      background: #000000;
      background:
          linear-gradient(135deg, transparent 10px, #000000 0) top left,
          linear-gradient(225deg, transparent 10px, #000000 0) top right,
          linear-gradient(315deg, transparent 10px, #000000 0) bottom right,
          linear-gradient(45deg,  transparent 10px, #000000 0) bottom left;
      background-size: 50% 50%;
      background-repeat: no-repeat;
      background-image:
          radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #000000 15px),
          radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #000000 15px),
          radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #000000 15px),
          radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #000000 15px);
  }
  
  .pixel h1 {
    font-family: 'Press Start 2P', system-ui;
    display: inline-block;
    vertical-align: top;
    position: relative;
    width: auto;
    text-align: center;
    margin: -20px -20px;
    line-height: 20px;
    padding: 10px 20px;
    
      background: #000000;
      background:
          linear-gradient(135deg, transparent 10px, #000000 0) top left,
          linear-gradient(225deg, transparent 10px, #000000 0) top right,
          linear-gradient(315deg, transparent 10px, #000000 0) bottom right,
          linear-gradient(45deg,  transparent 10px, #000000 0) bottom left;
      background-size: 50% 50%;
      background-repeat: no-repeat;
      background-image:
          radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #000000 15px),
          radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #000000 15px),
          radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #000000 15px),
          radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #000000 15px);
  }

  .pixel2 {
    font-family: 'Press Start 2P', system-ui;
    position: relative;
    display: block;
    margin: 10px;
    
    font-size: 25px;
    color: white;
  }
  
  .pixel2::before {
    content: "";
    display: block;
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: -10px;
    right: -10px;
    background: black;
    z-index: -1;
  }
  
  .pixel2::after {
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: -6px;
    right: -6px;
    background: black;
    z-index: -1;
  }
  
  .pixel2 {
    padding: 10px 10px;
    position: relative;
    background: black;
    width: auto;
    z-index: 2;
  }

  /*Content*/

  p {
    font-family: 'Roboto Mono', monospace;
    font-size: 70%;
    margin-left: 18%;
    margin-right: 18%;
  }

  h1 {
    margin-top: 5%;
    font-family: 'Press Start 2P', system-ui;
    font-size: 90%;
    margin-left: 15%;
    margin-right: 15%;
  }

  .flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;

    margin-left: 18%;
    margin-right: 18%;
  }

  .card {
    border: 1px #000000;
    max-width: 33%;
    margin: fit-content;
    text-align: center;
    box-sizing: border-box;

    font-family: 'Roboto Mono', monospace;
    font-size: 70%;
  }

  
  .card h1 {
    font-family: 'Roboto Mono', monospace;
  }
  
  .card a {
    color : #000000;
  }