.var-highlight {
    color: #c0ad60;
}

pre {
    text-align: initial;
    align-self: center;
}

.string-highlight {
    color: rgba(253, 149, 90, 0.8);
}

#typewriter {
    font-size: 2em;
    margin: 0;
    font-family: "Courier New";

    &:after {
        content: "|";
        animation: blink 500ms linear infinite alternate;
    }
}

@-webkit-keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

body {
    padding: 25px;
    overflow: hidden;
}

/*background animation*/

html {
    background: linear-gradient(45deg, #121212, #122242);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    height: 100vh;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/*end of background animation*/

.darkgrey {
    color: lightgrey;
}

.orbitron {
    font-family: "Orbitron";
}

body {
    text-align: center;
}

#back {
    text-decoration: none;
    color: grey;
}

ul {
    list-style-type: none;
}

.link {
    color: lightgrey;
}

.link:hover {
    color: white;
}

/*animation*/
#floatdown {
    position: relative;
    animation: down 1.5s ease-out 0s both;
}

@keyframes down {
    0% {
        top: -250px;
    }

    100% {
        top: 0px;
    }
}