:root {
    --color_1: #425A2C;
    --color_2: #E4DFD8;
    --color_3: #A08C4C;
    --color_4: #905532;
    --color_5: #8F947E;
    --color_6: #2B344A;
}

@keyframes logoColorCycle {
    0% { fill: var(--color_6); }
    25% { fill: var(--color_3); }
    50% { fill: var(--color_4); }
    75% { fill: var(--color_1); }
    100% { fill: var(--color_6); }
}

.logo .logo_path {
    animation: logoColorCycle 8s infinite linear;
}

@keyframes backgroundColorCycle {
    0% { background-color: var(--color_2); }
    50% { background-color: var(--color_5); }
    100% { background-color: var(--color_2); }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color_2);
    animation: backgroundColorCycle 20s infinite linear;
}

.logo_container {
    position: fixed;
    top: 48vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    width: max(200px, 20vw);
    height: max(100px, 20vh);
}

.logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.viewport_info {
    position: fixed;
    top: 10px;
    left: 10px;
    background: var(--color_2);
    padding: 10px;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: var(--color_1);
}