@font-face {
  font-family: 'nirmala'; 
  src: url('Nirmala.ttf') format('truetype'); 
  font-weight: normal;
  font-style: normal;
}

body {
top: 0;
width: 50vw;
left: 25vw;
position:relative;
}

header {
  background-color: #025f99;
  color: white;           
  padding: 5px;  
width: 100vw;     
 position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  border-right: 2px solid #000;
  z-index: -2;   

}

.top-bar {
display: flex;
container-type: size;
width: 23vw; 
aspect-ratio: 7.5/1; 
position:absolute;
top: 8px;
background-color: Yellow;
z-index: 10;
left: 75.7vw;
align-items: center;
justify-content:center;

}


.bar-text{
  text-decoration: none; 
color: black;       
font-size: 8cqw; 
position: relative;

}


.headerpanel {
display: flex;
width: 100vw;     
container-type: size;
aspect-ratio: 1/10; 
 position: fixed;
  top: 0;
  left: 0;
  height: 100%;

}


.logo {

height: 10vw;
aspect-ratio:1/1;
position: relative;
left: 1vw;
top: 1vw;

}


.topline {
display: inline-block;
font-size: 2vw; 
font-family: 'nirmala', sans-serif;
position: absolute;
top: 3.5vw;
left: 12.5vw;

}


.topline2 {
display: inline-block;
font-size: 2vw; 
font-family: 'nirmala', sans-serif;
position: absolute;
top: 6vw;
left: 14vw;

}

.navbar {
display: flex;
flex-direction: column;
width: 25vw;    
container-type: size;
position:relative;
left: 74vw;
top: 2.5vw;
align-items: center;


}


.navlink {
text-decoration: none; 
color: inherit;       
font-size: 2vw; 
position: relative;
margin: 1vw;


}


.nameline {
display: inline-block;
font-size: 4vw; 
font-family: 'nirmala', sans-serif;
position: absolute;
left: 3vw;
top: 12vw;

}


.currents-line {
display: flex; 
flex-direction: column;
width: 25vw;
height: 50vw;
container-type: size;
position:fixed;
left: 1vw;
top: 18vw;
z-index: 10;
flex-direction: column;
align-items:center;

}


.bluelogo {
display: none;
position: absolute;
height: 30cqw;
aspect-ratio:1/1;
left: 65cqw;
top: 3cqw;

}


.whitelogo {
display: block;
position: absolute;
height: 55cqw;
aspect-ratio:1/1;
left: 20cqw;
top: 15cqw;

}


.currenticon {
display: block;
height: 20cqw;
aspect-ratio:1/1;
position: absolute;
left: 65cqw;
top: 20cqw;

}


.currenttemp {
font-size: 15cqw; 
font-family: 'nirmala', sans-serif;
font-weight: bold;
position: absolute;
color: white;
top: 18cqw;
left: 15cqw;


}


.currents-box {
display: flex; 
container-type: size;
width: 100cqw;
height: 50cqh;
position:relative;
top:10cqw;
z-index: 50;
flex-direction: column;
align-items: center;
}


.rightnow {
font-size: 2.5vw; 
font-family: 'nirmala', sans-serif;
position: relative;
font-weight: bold;
color: white;
top: -40cqw;



}


.currentsky {
font-size: 8cqw; 
font-family: 'nirmala', sans-serif;
position: relative;
color: white;
top: 20cqw;
z-index:51;

}


.currentwind {
font-size: 8cqw; 
font-family: 'nirmala', sans-serif;
position: relative;
color: white;
top: 25cqw;
left: 0cqw;
}


.weekday-line {
display: flex; 
container-type: size;
aspect-ratio: 15/1; 
position:relative;
background-color: white;
margin: 0px;

}


.weekday {
font-size: 70cqh; 
font-family: 'nirmala', sans-serif;
font-weight: bold;
position: absolute;
color: #025f99;
left: 2cqw;


}


.daypart-line {
display: flex; 
container-type: size;
aspect-ratio: 18/1; 
background-color: rgba(255,255,255,1);
border-bottom: 1px solid black;
border-top: 1px solid black;
margin-top: -2px;
position:relative;

}


.icon {
display: inline-block;
height: 80cqh;
aspect-ratio:1/1;
position: absolute;
left: 55cqw;
top: 10cqh;


}

.daypart {
display: inline-block;
font-family: 'nirmala', sans-serif;
font-size: 70cqh; 
position: relative;
left: 2cqw;


}

.arrow {
display: inline-block;
font-family: 'nirmala', sans-serif;
font-size: 40cqh; 
position: relative;
left: 3cqw;
top: 25cqh;

}

.is-flipped {
display: inline-block;
font-family: 'nirmala', sans-serif;
font-size: 40cqh; 
position: relative;
left: 3cqw;
top: -15cqh;
rotate: 180deg;
}

.temp {
display: inline-block;
font-size: 65cqh; 
font-family: 'nirmala', sans-serif;
position: absolute;
left: 70cqw;
bottom: 10cqh;

}

.pmtemp {
display: inline-block;
font-size: 80cqh; 
font-family: 'nirmala', sans-serif;
font-weight: 900;
position: absolute;
left: 69cqw;
bottom: 2cqh;


}

.pop {
display: inline-block;
font-size: 60cqh; 
font-family: 'nirmala', sans-serif;
position: absolute;
left: 40cqw;
bottom: 14cqh;


}

.panel {
  container-type: inline-size;
  position: relative;
  display: none;
  max-width: 1500px;                 
  background-color: white; 
border-bottom: 1px solid black;
margin-top: -2px; 
}


.is-hidden {
  display: flex;
}

.toggle-btn {
opacity: 0%;
width: 100cqw;  
height: 100cqh; 
padding: 0px;
position: absolute;
left: 0 px;

}


.paneltext{
font-size: 4cqw;
font-family: 'nirmala', sans-serif;
margin-left: 2cqw;
margin-top: 2cqh;
}

footer {
font-size: 1vw;
color: white;
}