@keyframes typing {
    from {
        width: 0;
    }
}

:root {
    --background: #f8f8f2;
    --text: #282a36;
}

@font-face {
    font-family: "Terminal";
    src: url("TerminusTTF-4.39.ttf");
}

html {
    background: var(--background);
}

body {
    /* margin-top: 25%; */
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Creates the 'terminal' look for text */
a,
p,
#format {
    color: var(--text);
    margin-left: 10px;
    font-size: 20px;
    font-family: Terminal;
    line-height: 25px;
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0rem; /* Space between list and canvas */
    position: fixed;
    inset: 0;
    margin: auto;
    width: auto; /* Remove fixed width */
    height: auto; /* Remove fixed height */
    top: -20vb;
    /* top: clamp(100px, 25vh, 300px); /*    /* or */
}

.list-con {
    margin: 0;
}

.list {
    float: none; /* Remove float */
    width: auto;
    height: auto;
}

.canvas-con {
    float: none; /* Remove float */
    margin-right: -150px;
}

#canvas {
    margin-top: 50%;
    width: 600px;
    height: 600px;
}

/* Mobile */
@media screen and (max-width: 900px) {
    html,
    body {
        height: 100vh;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    body {
        display: flex;
        padding-top: 0;
    }

    .center {
        position: fixed;
        top: 30%; /* This creates the 70/30 split from the top */
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
    }

    .canvas-con {
        display: none;
    }

    #list {
        padding-top: 50%;
        padding-left: 100%;
        float: none;
        width: 100%;
        margin: 0;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    a,
    p,
    #format {
        font-size: calc(16px + 2vw);
        line-height: 1.5;
        margin: 10px 0;
        display: flex;
        align-items: center;
    }

    p > a {
        margin-left: 10px; /* Adjust this value for desired spacing */
    }
}

/*
 Debugging
*/
/*#canvas,
  #main {
  border:2px solid #CC0000;
}*/

/*
For old animation
*/
/*#canvas {
  width: 600px;
  height: 400px;
}
*/

/* Credit:  https://twitter.com/lukemeyrick?lang=en */
.glitch,
.glitch * {
    -webkit-animation: glitch 6s infinite steps(50);
    animation: glitch 6s infinite steps(50);
}
@-webkit-keyframes glitch {
    2% {
        font-weight: 600;
        font-style: normal;
        text-decoration: underline;
        text-transform: none;
    }
    4% {
        font-weight: 600;
        font-style: normal;
        text-decoration: underline;
        text-transform: none;
    }
    6% {
        font-weight: 700;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    8% {
        font-weight: 200;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    10% {
        font-weight: 200;
        font-style: normal;
        text-decoration: none;
        text-transform: uppercase;
    }
    12% {
        font-weight: 500;
        font-style: normal;
        text-decoration: none;
        text-transform: uppercase;
    }
    14% {
        font-weight: 100;
        font-style: normal;
        text-decoration: underline;
        text-transform: capitalize;
    }
    16% {
        font-weight: 200;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    18% {
        font-weight: 200;
        font-style: normal;
        text-decoration: none;
        text-transform: lowercase;
    }
    20% {
        font-weight: 100;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    22% {
        font-weight: 700;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    24% {
        font-weight: 700;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    26% {
        font-weight: 400;
        font-style: normal;
        text-decoration: line-through;
        text-transform: none;
    }
    28% {
        font-weight: 200;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    30% {
        font-weight: 600;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    32% {
        font-weight: 400;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    34% {
        font-weight: 600;
        font-style: italic;
        text-decoration: none;
        text-transform: none;
    }
    36% {
        font-weight: 100;
        font-style: normal;
        text-decoration: line-through;
        text-transform: lowercase;
    }
    38% {
        font-weight: 200;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    40% {
        font-weight: 400;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    42% {
        font-weight: 500;
        font-style: normal;
        text-decoration: line-through;
        text-transform: lowercase;
    }
    44% {
        font-weight: 500;
        font-style: normal;
        text-decoration: underline;
        text-transform: uppercase;
    }
    46% {
        font-weight: 600;
        font-style: normal;
        text-decoration: none;
        text-transform: capitalize;
    }
    48% {
        font-weight: 500;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    50% {
        font-weight: 700;
        font-style: normal;
        text-decoration: line-through;
        text-transform: none;
    }
    52% {
        font-weight: 300;
        font-style: normal;
        text-decoration: none;
        text-transform: lowercase;
    }
    54% {
        font-weight: 500;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    56% {
        font-weight: 400;
        font-style: normal;
        text-decoration: none;
        text-transform: lowercase;
    }
    58% {
        font-weight: 200;
        font-style: normal;
        text-decoration: underline;
        text-transform: lowercase;
    }
    60% {
        font-weight: 200;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    62% {
        font-weight: 600;
        font-style: italic;
        text-decoration: none;
        text-transform: none;
    }
    64% {
        font-weight: 600;
        font-style: italic;
        text-decoration: none;
        text-transform: none;
    }
    66% {
        font-weight: 300;
        font-style: italic;
        text-decoration: underline;
        text-transform: none;
    }
    68% {
        font-weight: 200;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    70% {
        font-weight: 400;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    72% {
        font-weight: 500;
        font-style: italic;
        text-decoration: none;
        text-transform: none;
    }
    74% {
        font-weight: 600;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    76% {
        font-weight: 400;
        font-style: italic;
        text-decoration: none;
        text-transform: lowercase;
    }
    78% {
        font-weight: 100;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    80% {
        font-weight: 300;
        font-style: italic;
        text-decoration: none;
        text-transform: uppercase;
    }
    82% {
        font-weight: 300;
        font-style: normal;
        text-decoration: underline;
        text-transform: none;
    }
    84% {
        font-weight: 500;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    86% {
        font-weight: 700;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    88% {
        font-weight: 300;
        font-style: italic;
        text-decoration: none;
        text-transform: none;
    }
    90% {
        font-weight: 700;
        font-style: italic;
        text-decoration: none;
        text-transform: uppercase;
    }
    92% {
        font-weight: 600;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    94% {
        font-weight: 200;
        font-style: italic;
        text-decoration: none;
        text-transform: none;
    }
    96% {
        font-weight: 400;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    98% {
        font-weight: 300;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
}
@keyframes glitch {
    2% {
        font-weight: 600;
        font-style: normal;
        text-decoration: underline;
        text-transform: none;
    }
    4% {
        font-weight: 600;
        font-style: normal;
        text-decoration: underline;
        text-transform: none;
    }
    6% {
        font-weight: 700;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    8% {
        font-weight: 200;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    10% {
        font-weight: 200;
        font-style: normal;
        text-decoration: none;
        text-transform: uppercase;
    }
    12% {
        font-weight: 500;
        font-style: normal;
        text-decoration: none;
        text-transform: uppercase;
    }
    14% {
        font-weight: 100;
        font-style: normal;
        text-decoration: underline;
        text-transform: capitalize;
    }
    16% {
        font-weight: 200;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    18% {
        font-weight: 200;
        font-style: normal;
        text-decoration: none;
        text-transform: lowercase;
    }
    20% {
        font-weight: 100;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    22% {
        font-weight: 700;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    24% {
        font-weight: 700;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    26% {
        font-weight: 400;
        font-style: normal;
        text-decoration: line-through;
        text-transform: none;
    }
    28% {
        font-weight: 200;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    30% {
        font-weight: 600;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    32% {
        font-weight: 400;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    34% {
        font-weight: 600;
        font-style: italic;
        text-decoration: none;
        text-transform: none;
    }
    36% {
        font-weight: 100;
        font-style: normal;
        text-decoration: line-through;
        text-transform: lowercase;
    }
    38% {
        font-weight: 200;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    40% {
        font-weight: 400;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    42% {
        font-weight: 500;
        font-style: normal;
        text-decoration: line-through;
        text-transform: lowercase;
    }
    44% {
        font-weight: 500;
        font-style: normal;
        text-decoration: underline;
        text-transform: uppercase;
    }
    46% {
        font-weight: 600;
        font-style: normal;
        text-decoration: none;
        text-transform: capitalize;
    }
    48% {
        font-weight: 500;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    50% {
        font-weight: 700;
        font-style: normal;
        text-decoration: line-through;
        text-transform: none;
    }
    52% {
        font-weight: 300;
        font-style: normal;
        text-decoration: none;
        text-transform: lowercase;
    }
    54% {
        font-weight: 500;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    56% {
        font-weight: 400;
        font-style: normal;
        text-decoration: none;
        text-transform: lowercase;
    }
    58% {
        font-weight: 200;
        font-style: normal;
        text-decoration: underline;
        text-transform: lowercase;
    }
    60% {
        font-weight: 200;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    62% {
        font-weight: 600;
        font-style: italic;
        text-decoration: none;
        text-transform: none;
    }
    64% {
        font-weight: 600;
        font-style: italic;
        text-decoration: none;
        text-transform: none;
    }
    66% {
        font-weight: 300;
        font-style: italic;
        text-decoration: underline;
        text-transform: none;
    }
    68% {
        font-weight: 200;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    70% {
        font-weight: 400;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    72% {
        font-weight: 500;
        font-style: italic;
        text-decoration: none;
        text-transform: none;
    }
    74% {
        font-weight: 600;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    76% {
        font-weight: 400;
        font-style: italic;
        text-decoration: none;
        text-transform: lowercase;
    }
    78% {
        font-weight: 100;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    80% {
        font-weight: 300;
        font-style: italic;
        text-decoration: none;
        text-transform: uppercase;
    }
    82% {
        font-weight: 300;
        font-style: normal;
        text-decoration: underline;
        text-transform: none;
    }
    84% {
        font-weight: 500;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    86% {
        font-weight: 700;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    88% {
        font-weight: 300;
        font-style: italic;
        text-decoration: none;
        text-transform: none;
    }
    90% {
        font-weight: 700;
        font-style: italic;
        text-decoration: none;
        text-transform: uppercase;
    }
    92% {
        font-weight: 600;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    94% {
        font-weight: 200;
        font-style: italic;
        text-decoration: none;
        text-transform: none;
    }
    96% {
        font-weight: 400;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
    98% {
        font-weight: 300;
        font-style: normal;
        text-decoration: none;
        text-transform: none;
    }
}