style.css

:root {
    --defaultColor: #404040;
    --scaler: 50vw;
    --highlightColor: hsl(40, 60%, 50%);
    --backgroundColor:hsl(150deg 30% 60%);
}
* {
    box-sizing: border-box;
}

html,body {
    margin:0;
    padding:0;
}

body {
    background: var(--backgroundColor);
    color: var(--defaultColor);
    font-family: "Maname", serif;
    font-size: 20px;
    max-width: 700px;
    margin: 0 auto;
}

header h1 {
  @import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');
body {
  margin: 0px;
  padding: 0px;
  font-family: "Courier Prime", monospace;
  background-color: #fdfdfe;
}
header {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

header h1 {
  font-size: 70px;
  font-weight: 500;
  color: #553c9a;
  border-right: 4px solid #000;
  animation: cursor 1s infinite step-end, typing 15s infinite steps(16);
  white-space: nowrap;
  overflow: hidden;
}
    
@keyframes cursor{
  0%, 100%{border-color: transparent;}
  50%{border-color: #000;}
}
    
@keyframes typing{
  0%{ width: 0ch} /*Text is hidden*/
  30%{ width: 16ch;} /*The enitre header will be typed out*/
  80%{ width: 16ch;} /*Text stays visible*/
  90%{ width: 0ch;} /*Text is deleted*/
  100%{ width: 0ch;} /*Text stays hidden*/
}
}
/*

Clickable links, or anchors, have five separate pseudoclasses to style. It's
useful to make these distinct for usability and accessibility.

:link    - The default style
:visited - Styles applied if the value of the `href` attribute is present in
           a users browse history.
:hover   - Applied when a reader moves the mouse cursor over the link.
:focus   - Applied when a reader uses keyboard navigation (e.g. tab) to select
           the link.
:active  - Applied once a user clicks or activates a link.

*/
a:link,
a:visited {
    color: var(--highlightColor);
    text-decoration:none;
}
a:hover,
a:focus {
    color: var(--defaultColor);
}
a:active {

}

a {
    margin:0;
}

a+a:before {
    content: " · ";
    color: var(--defaultColor);
    display:inline;
}

#banner {
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 1rem 0;
}

#banner h1,
#banner nav {
    font-weight: 500;
    font-size: 1rem;
    margin:0;
}

main:before {
    display:block;
    background: #e6b31a;
    width: 3rem;
    height: 0.125rem;
    margin: 4rem auto;
    content: '';
}