body {
    color: #222;
    background-image: url('./light.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    font: 100% system-ui;
    margin: 5%;
}
a {
    color: #2c7eb5;
}

img {
    height: auto;
    width: 30%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
}

@media (prefers-color-scheme: dark) {
    body {
        color: #eee;
        background-image: url('./dark.jpg');
    }

    body a {
        color: #809fff;
    }
}

/* Media Query for Small Screens */
@media (max-width: 768px) {
    .center {
        width: 80%;
    }
}