@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;500;600&family=IBM+Plex+Sans&display=swap');

body {
    background-color: #161616;
    color: whitesmoke;

    h1, h2, h3, h4, h5, h6 {
        font-family: 'IBM Plex Mono', monospace;
    }
    
    p {
        font-family: 'IBM Plex Sans', sans-serif;
    }
}

.page-container {
    height: 100vh;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-direction: column;
}

.fade-onload {
    $time: .5s;
    -webkit-animation: fadein $time; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein $time; /* Firefox < 16 */
     -ms-animation: fadein $time; /* Internet Explorer */
      -o-animation: fadein $time; /* Opera < 12.1 */
         animation: fadein $time;


    @keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* Firefox < 16 */
    @-moz-keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* Safari, Chrome and Opera > 12.1 */
    @-webkit-keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* Internet Explorer */
    @-ms-keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* Opera < 12.1 */
    @-o-keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}