@font-face {
    font-family: "Blazma-Regular";
    src: url("../../fonts/Blazma-Regular.ttf") format("truetype");
    font-display: swap;
}

:root{
    --font-sans: "Blazma-Regular", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

html, body { height: 100%; }
body{
  margin:0;
  background-repeat:no-repeat;
  background-size:cover;
  font-family:var(--font-sans);
  background-color:#030615;
}

/* nappal */
.theme-day{
  background-image:url("../../img/backgrounds/bg_01.png");
}

/* éjjel */
.theme-night{
  background-image:url("../../img/backgrounds/bg_02.png");
}

/* továbbra is mehet a fókusz landscape-ben */
@media (min-width: 1200px) and (orientation: landscape){
  .theme-day, .theme-night{
    background-position:70% 70%;
  }
}

.panel {
    background-color: rgba(0, 238, 217, 0.50);
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    padding: 0 5.25rem;
    font-size: 10rem;
}

.hpa-panel {
    background-color: rgba(0, 238, 217, 0.50);
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    padding: 0 5.25rem;
    font-size: 5rem;
}

.bottom-panel{
    background-color: rgba(0, 238, 217, 0.50);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    text-align: center;
    padding: 1.25rem;
    font-size: 3.5rem;
}

.metric-subtitle {
    font-size: 1.5rem;
}

.icon {
    width: 10rem;
    height: 10rem;
}

.hpa-icon {
    width: 10rem;
    height: 10rem;
}

.circle {
    width: 3rem;
    height: 3rem;
}