:root {
    --x: 0;
    --y: 0;
    --b: 0;
}
body {
    margin: 0;
    padding: 0;
    background-color: #f0f0f8;
    color: #333333;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    font-variation-settings: "width" 100;
}
div.page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Set the height of the viewport */
}
div.page-logo {
    width: 50%;
    height: auto;
    text-align: center;
}
/* Style the image */
img.main-logo {
    width: 100%;
    /* -webkit-filter: drop-shadow(5px 15px 10px rgba(0,0,0,0.5)); */
    /* -moz-filter: drop-shadow(5px 15px 10px rgba(0,0,0,0.5)); */
    /* -ms-filter: drop-shadow(5px 15px 10px rgba(0,0,0,0.5)); */
    /* -o-filter: drop-shadow(5px 15px 10px rgba(0,0,0,0.5)); */
    filter: drop-shadow(calc(15px * var(--x)) calc(15px * var(--y)) calc(10px * var(--b)) rgba(0,0,0,0.5));
}
h1.main-logo-text {
    font-size: 1.8vw;
    font-weight: bold;
    color: #000000;
}