/* css for the weather app */

/* flexbox layout and alignment*/
*           {text-align:center; align-items:center;}
#cdata,.fc  {text-align:left;}
body        {display:flex; flex-direction:column;}
#current    {display:flex; flex-direction:row;}
#clock      {display:flex; flex-direction:row;}
#forecast   {display:flex; flex-direction:row;}
.fc         {display:flex; flex-direction:column; flex:1;}

/* size, margins, padding */
body        {margin:1%;}
#current    {width:90%; gap:3% ;margin-left:10%;}
#clock      {width:100%;}
#time       {width:80%; margin:0%;}
#date       {width:20%; margin:0%;}
#forecast   {width:96%; height:40%;gap:0.5%;}
.ficon      {max-width:66%; height:auto;}
#cicon      {max-height:100%; width:auto;margin-right:1%;}
.fc         {height:100%; padding:1%; gap:2%; overflow:hidden;}
.fname      {width:100%; }

/* fonts and colors.  Scale all fonts based on viewport size */
html    {background-color: Black; color: White;}
#clock>*{font-family: Arial, Helvetica, sans-serif;}
#title  {font-size:6vmin; color:Lightgreen;}
#time   {font-size:20vmin;color:Gold;}
#date   {font-size:6vmin; color:Orange;}
#cdata  {font-size:5vmin; color:LightGreen;}
.fc     {font-size:2.5vmin; color:White;}
.fname  {font-size:3.0vmin; color:Orange;}

/* Misc. styles*/
#forecast   {bottom:2%; position:absolute;} /*pin to viewport bottom */
img         {border:1px solid Blue; border-radius:2vmin;}
.fc         {border:2px solid DarkOrange; border-radius:2vmin;}