:root {
  --bg-color: #191e19;
  --bg-color-a: rgba(25, 53, 47, 0.8);
  --gold-color: #e4c136;
  --date-color: rgb(135, 227, 199);
}

@font-face {
  font-family: 'Jost';
  src: url('../fonts/Jost-VariableFont_wght.ttf') format('truetype-variations');
  font-optical-sizing: auto;
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('../fonts/Jost-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-optical-sizing: auto;
  font-weight: 100 900;
  font-style:italic;
  font-display: swap;
}
html, body { padding:0; margin:0; }
/* TIMES */
body { font-family: "Jost", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; 
  background: var(--bg-color); min-height: 100vh; 
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  display:flex; align-items: center; justify-content: center;
} 
.logo { 
  flex:0.2;
  background-size:contain !important; background:url('../i/dragon.svg') no-repeat center center; 
  animation: show 5s ease-in-out;
  transform-style: preserve-3d;
  width:100%;
  height:100%;
  z-index:9;
}

.plate { background-size:cover !important; background:url('../i/plate.svg') no-repeat center center; position:fixed; top:0; right:0; bottom:0; left:0; display:flex; align-items: center; justify-content: center;  }

#animated-logo path { fill:#7de03b !important; }

#animated-logo2 path {
    animation: colorShift 30s infinite alternate;
}

@keyframes show {
  from {
    opacity:0.5;
    transform: scale(0.9);
  }
  to {
    opacity:1;
    transform: scale(1);
  }
}

@keyframes colorShift {
    0% {
        fill: rgba(253, 112, 61, 0.765);
    }
    33% {
        fill: rgb(30, 217, 120);
    }
    66% {
        fill: rgba(84, 150, 250, 0.804);
    }
    100% {
        fill: rgba(227, 56, 175, 0.783); /* Можно добавить другие цвета */
    }
}