@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Roboto Light'), 
         local('Roboto-Light'),
         url('https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2') format('woff2');
}

:root{
    --color-bk: #0d1117;
    --color-sl: #b6dc00;
    --color-bksl: #2e5f00;
    --color-cnt: #000000;
    --cnt-radius: 7px;
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', 'Arial', sans-serif;
    font-weight: 400;
    color: var(--color-sl);
}

.panel{display: flex;}
.panel.column{flex-direction: column;}
body{ 
    background-attachment:fixed;
    background-image: url(/share/img/yv-bg.png); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
    min-height: 100vh; 
}

content{
    max-width: 90vw;
    overflow: hidden auto;
    margin: auto;
}

content.root{
    justify-content: center; 
    align-items: center;
    padding: 50px; 
    gap: 25px; 
    min-height: 100vh;
}

content.root > img{
    height: 100px;
}

.rotating-image {
    animation: rotate3D 5s linear infinite;
    transform-style: preserve-3d;
    filter: drop-shadow(0 0 10px rgba(136, 135, 135, 0.8));
}

@keyframes rotate3D {
    0% {
        transform: rotate3d(0, 1, 0, 0deg);
    }
    100% {
        transform: rotate3d(0, 1, 0, 360deg);
    }
}