@font-face {
  font-family: 'Ubuntu';
  src: url('fonts/Ubuntu-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Ubuntu';
  src: url('fonts/Ubuntu-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: block;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
::-webkit-scrollbar { display: none; }

html, body {
  height: 100%; width: 100%; overflow: hidden;
  background-color: #003366; 
  color: #ffffff;
  font-family: 'Ubuntu', sans-serif;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
}

.container {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
  -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;
  height: 96%; width: 96%;
  max-width: 100vh;
  margin: 0 auto;
}

.glass-panel {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(149, 202, 219, 0.3); 
  border-radius: 8px;
  padding: 3vmin;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
  overflow: hidden; 
}

.top-section {
  -webkit-box-flex: 1.618; -webkit-flex: 1.618 1 0%; flex: 1.618 1 0%;
  min-height: 0;
  width: 100%; 
  -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start;
  -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
  padding: 4vmin 6vmin;
  margin-bottom: 2vh;
}

.bottom-section {
  -webkit-box-flex: 1; -webkit-flex: 1 1 0%; flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-orient: horizontal; -webkit-flex-direction: row; flex-direction: row;
  -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;
}

.side-card { 
  -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; 
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
  position: relative;
}

.bottom-section .side-card:first-child { 
  margin-right: 2vh;
}

.greeting {
  color: #BE880B; 
  font-weight: 700; font-size: 4vmin; 
  letter-spacing: 0.1vw; margin-bottom: 0; text-transform: uppercase;
  white-space: nowrap; line-height: 1;
}

.time {
  font-size: 18vmin; font-weight: 700; line-height: 0.9; 
  color: #ffffff; margin-left: -0.5vmin; letter-spacing: -0.5vmin;
  margin-top: 1.5vmin; margin-bottom: 1.5vmin;
}

.date {
  font-size: 4vmin; color: #FFFFFF; 
  font-weight: 400; text-transform: capitalize;
  line-height: 1.2;
  margin-bottom: 2.5vh;
}

.namedays {
  width: 100%; padding-top: 2.5vmin; 
  border-top: 4px solid #BE880B; 
  display: -webkit-box; display: -webkit-flex; display: flex; 
  -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; 
  -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start;
}

.nameday-label {
  display: block; font-size: 2.5vmin; text-transform: uppercase;
  font-weight: 700; color: #95CADB; margin-bottom: 0.8vh;
}

.nameday-names { font-size: 3.5vmin; font-weight: 700; color: #FFFFFF; line-height: 1.2; }

.weather-container {
  height: 14vmin; 
  display: -webkit-box; display: -webkit-flex; display: flex; 
  -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; 
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  margin-bottom: 1vh;
}

.weather-icon { height: 14vmin; width: auto; filter: drop-shadow(0 0 5px rgba(0,0,0,0.3)); }
.temp { font-size: 8vmin; font-weight: 700; margin: 0; line-height: 1; color: #FFFFFF; }
.city { font-size: 2.5vmin; color: #95CADB; text-transform: uppercase; font-weight: 700; margin-top: 1vh; }

.logo-img { max-width: 80%; max-height: 80%; object-fit: contain; }
.logo-text { display: none; font-size: 6vmin; font-weight: 700; color: #ffffff; }