.typewriter h1:after {
    content: "";
    border-right: 0.15em solid var(--base1);
    white-space: nowrap;
    overflow: hidden;
}

.typewriter h1:after {
    width: 10.3ch;
    opacity: 0;
    -webkit-animation:
        type3 3s steps(20, end),
        blink 0.5s step-end infinite alternate;
    animation:
        type3 3s steps(20, end),
        blink 0.5s step-end infinite alternate;

    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes type3 {
    0% {
        width: 0;
    }
    1% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

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

@keyframes blink {
    50% {
        border-color: transparent;
    }
}
@-webkit-keyframes blink {
    50% {
        border-color: tranparent;
    }
}

/* Stolen from https://css-tricks.com/snippets/css/typewriter-effect/ */

:root {
    --base03: #002b36;
    --base02: #073642;
    --base01: #586e75;
    --base00: #657b83;
    --base0: #839496;
    --base1: #93a1a1;
    --base2: #eee8d5;
    --base3: #fdf6e3;

    --yellow: #b58900;
    --orange: #cb4b16;
    --red: #dc322f;
    --magenta: #d33682;
    --violet: #6c71c4;
    --blue: #268bd2;
    --cyan: #2aa198;
    --green: #859900;
}

* {
    box-sizing: border-box;
}

*::selection {
    background: var(--blue);
    color: var(--base02);
}

body {
    font-family: "Fira Code";

    min-height: 100%;

    background: var(--base03);
    color: var(--base0);
}

.container {
    width: 80%;
    max-width: 800px;
    margin: 60px auto;
    padding: 20px;
    background: var(--base02);
    border: 2px dotted var(--base00);
}

.projects-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.project {
    background: var(--base03);
    padding: 20px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}

h1 {
    font-size: calc(2vw + 2rem);
    /* color: var(--base01); */
    color: var(--cyan);
}

h2 {
    font-size: calc(1vw + 1.5rem);
    color: var(--magenta);
}

h3 {
    font-size: calc(0.5vw + 1.5rem);
}

h4 {
    font-size: calc(0.3vw + 0.9rem);
    color: var(--green);
}

button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 10px 12px;

    background: var(--base01);
    color: var(--base02);

    transition: all 0.2s;
}

button:hover {
    background: var(--base00);
}

button img {
    width: 27px;
    padding-right: 10px;
}

a {
    color: var(--blue);
    display: inline-block;
}

.button-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
}

.button-container a button {
    width: 100%;
    height: 100%;
}

@media only screen and (max-width: 768px) {
    .button-container {
        grid-template-columns: 1fr;
    }
}

.button-container button {
    width: 100%;
}

hr {
    margin: 15px 0;
    border: 0.5px solid var(--base01);
}