style.css

html {
    font-family:sans-serif;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
}
body {
    margin:0;
    background-color: #faf0ff;
    color: #333;
}
h1 {
    color: #333;
    font-size:5em;
    margin:0.67em 0;
    text-align:center;
    padding-top: 0.33em;
} 
a {
    color: #E790E7
}
a:visited {
    color: #E790E7
}
a:hover {
    color: #F2D3F2;
    background: #333
}
@media only screen and (max-width: 768px) {
    p {
        font-size:20px;
        text-align:center;
    }
    .info > div {
        margin-left:20px;
        margin-right:20px;
    }
    h1 {
        margin: 0.2em;
    } 
}
#paper {
    background-color: #fff;
    width:90%;
    height:40%;
    max-width:800px;
    margin:0 auto;
    animation: fadein 1s;
    transition: all .2s ease-in-out;
    box-shadow: 10px 10px 25px #ccc;
    animation-timing-function: ease-in-out;
}

@keyframes fadein {
    from { 
        opacity: 0; 
        transform: scale(1.1, 1.1);
        box-shadow: 50px 50px 50px #ccc;
    }
    to { 
        opacity: 1; 
        transform: scale(1, 1);
    }
}



.left {
    margin-left:50px;
    text-align:left;
}
.mid {
    text-align:center;
}
.right {
    margin-right:50px;
    text-align:right;
}
.spaced {
    margin-top: 40px;
}
.bottom {
    padding-bottom: 1em;
}

@media (prefers-color-scheme: dark) {

    @keyframes fadein {
        from { 
            opacity: 0; 
            transform: scale(1.1, 1.1);
            box-shadow: 50px 50px 50px rgb(36, 36, 36);
        }
    }

    body {
        background-color: #4e4452;
        color: #252525;
    }
    h1 {
        color: #252525;
    } 
    a {
        color: #773277
    }
    a:visited {
        color: #773277
    }

    #paper {
        background-color: rgb(129, 129, 129);
        box-shadow: 10px 10px 25px rgb(36, 36, 36);
    }
}