/* Import all CSS files from the animation folder */
@import url("./animation.css");
body, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: linear-gradient(180deg, #dbeafe, #eff6ff);
  min-width: 480px;
  min-height: 65em;
  overflow-x: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  transition-duration: 0.25s;
}
/*  */
#loader {
  position: fixed; /* îl face să ocupe toată pagina */
  top: 0;
  left: 0;
  width: 100%;
  height: 65em;
  background-color: #defffc;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* ca să ai cercul și literele pe verticală */
  z-index: 3;
}
#circleLoad {
  width: 8em;
  height: 8em;
  border: 12px solid #77c6ff;
  border-top: 12px solid #2563eb;
  border-radius: 50%;
  background-color: #ffffff;
  animation: load-spin 2s linear infinite;
}
#Wload{
    position: absolute;
    font-size: 80px;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #19429b;
    z-index: 3;
    -webkit-text-stroke:2px black;
}
#Sload{
    position: absolute;
    font-size: 80px;
    margin-top: -0.2em;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #286cfd;
    z-index: 4;
    -webkit-text-stroke:2px black;
}
/*  */
#searchLoader{
  position: fixed; /* îl face să ocupe toată pagina */
  top: -5em;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  backdrop-filter: blur(3px);
  justify-content: center;
  align-items: center;
  flex-direction: column; /* ca să ai cercul și literele pe verticală */
  z-index: 3;
}
#circleSearchLoad{
  width: 8em;
  height: 8em;
  border: 12px solid #77c6ff;
  border-top: 12px solid #2563eb;
  border-radius: 50%;
  background-color: #ffffff;
  animation: load-spin 2s linear infinite;
  scale: 0.65;
}
#WloadSearch{
    position: absolute;
    font-size: 80px;
    margin-left: 0.3em;
    margin-top: 0.2em;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #19429b;
    z-index: 3;
    -webkit-text-stroke:2px black;
}
#SloadSearch{
    position: absolute;
    font-size: 80px;
    margin-left: 0.5em;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #286cfd;
    z-index: 4;
    -webkit-text-stroke:2px black;
}
/* ERRORS */
/* No location found! */
#notFoundLocation{
    display: none;
    position: absolute;
    text-align: center;
    background-attachment: fixed;
    top: -1em;
    width: 100%;
    height: 3em;
    animation-duration: 8s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
    animation-iteration-count: 1;
}
#notFoundLocation h3{
    position: relative;
    top: -0.2em;
    background-color:rgba(138, 0, 0, 0.7);
    width: 100%;
    box-shadow: 0px 2px 5px rgb(40, 8, 8);
}
/* Name of location is to short! */
#toShort{
    display: none;
    position: absolute;
    text-align: center;
    background-attachment: fixed;
    top: -1em;
    width: 100%;
    height: 4em;
    animation-duration: 8s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
    animation-iteration-count: 1;
}
#toShort h3{
    position: relative;
    top: -0.2em;
    background-color:rgba(138, 0, 0, 0.7);
    width: 100%;
    box-shadow: 0px 2px 5px rgb(40, 8, 8);
}
/* ===COMPONENTS=== */
/*==HEADER==*/
#header{
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #ffffff;
  width: 100%;
  height: 5em;
  box-shadow: 0px 0.2px 3px black;
  transition-duration: 0.25s;
}
/* APP-NAME */
#titleContainer{
    position: relative;
    left: 2.5em;
    bottom: 2em;
    padding-top: 0.5em;
    padding-bottom: 0.2em;
    width: 12em;
    height: 4em;
}
#titleEmoji{
    position: relative;
    left: 0.6em;
    font-size: 26px;
    top: 0.9em;
    color: #4b5563;
}
#title{
    position: relative;
    letter-spacing: -0.6px;
    font-weight: 700;
    font-size: 24px;
    color: #2563eb;
}
/*=LANGUAGE=*/
#language{
    position: relative;
    float: right;
    right: 3em;
    bottom: 6.2em;
    width: 2.5em;
    height: 1.5em;
}
/*LANGUAGE-CHOSE*/
#newLanguageChose{
    display: none;
    position: absolute;
    width: 3em;
    height: 4.5em;
    top: 3.8em;
    right: 3.8em;
    background-color: #f3f4f6;
    box-shadow: 0px 2px 3px black;
    border-radius: 20px;
    padding-left: 0.5em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-right: 0.8em;
    animation-duration: 0.8s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    z-index: 2;
    overflow: hidden;
}
#newLanguage{
    position: relative;
    top: 0.2em;
    width: 3em;
    height: 2em;
}
/*ENGLISH*/
#english{
    display: none;
    position: relative;
    width: 2.5em;
    height: 2em;
    bottom: -0.1em;
    left: 0.35em;
    overflow: hidden;
    border-radius: 100%;
}
#english img{
    position: relative;
    width: 3em;
    height: 3em;
    bottom: 0.5em;
    right: 0.25em;    
}
/**/
#english1{
    display: none;
    position: relative;
    width: 3em;
    height: 3em;
    /* background-color: #FFFFFF; */
}
#english1 img{
    position: relative;
    width: 3em;
    height: 3em;
}
/*ROMANIAN*/
#romanian{
    display: none;
    position: relative;
    width: 2.5em;
    height: 2em;
    bottom: -0.4em;
    left: 0.35em;
    overflow: hidden;
    border-radius: 100%;
}
#romanian img{
    position: relative;
    width: 3em;
    height: 3em;
    bottom: 0.5em;
    right: 0.25em; 
}
/**/
#romanian1{
    display: none;
    position: relative;
    width: 3em;
    height: 3em;
}
#romanian1 img{
    width: 3em;
    height: 3em;
}
/* SETTINGS BUTTON */
#setting{
    position: relative;
    float: right;
    right: 1.8em;
    width: 2em;
    bottom: 5.5em;
}
/* BUTTONS CONTAINER */
#BtnContainer{
    display: none;
    background-color: #f3f4f6;
    position: absolute;
    top: 5.05em;
    right: 0.1em;
    padding-left: 0.5em;
    padding-top: 3em;
    height: 7em;
    padding-bottom: 0.5em;
    padding-right: 0.8em;
    border-bottom-left-radius: 20px;
    box-shadow: 0.5px 0.2px 3px black;
    animation-duration: 0.8s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    z-index: 2;
    transition-duration: 0.25s;
}
/* === */
/*THEME*/
#theme{
    position: relative;
    bottom: 1em;
    background-color:#f3f4f6;
    border-radius: 35px;
    box-shadow: 2px 0px 2px black;
    border: none;
    width: 7em;
    height: 1.8em;
    left: 0.5em;
    text-align: left;
    overflow: hidden;
    transition-duration: 0.25s;
}
#themeBtn{
    position: relative;
    scale: 1.4;
    bottom: -1px;
    left: 4px;
    height: 2em;
    width: 2.3em;
    border-style: none;
    background-color: #ffffff;
    box-shadow: 3px 0px 5px rgb(245, 255, 183);
    border-radius: 40px;
    transition-duration: 0.25s;
}
/*AUTO-LOCATE-TEXT*/
#auto-locate-text{
    position: relative;
    top: 1.3em;
    font-weight: 600;
    background-color:#f3f4f6;
    border-radius: 5px;
    padding-left: 6px;
    padding-right: 5px;
    box-shadow: 0px 1px 2px black;
}
/*AUTO-LOCATE*/
#auto-locate{
    position: relative;
    top: 0.2em;
    background-color:#f3f4f6;
    border-radius: 35px;
    box-shadow: 2px 0px 2px black;
    border: none;
    width: 7em;
    height: 1.8em;
    left: 0.5em;
    text-align: left;
    overflow: hidden;
    transition-duration: 0.25s;
}
#auto-locateBtn{
    position: relative;
    font-weight: bold ;
    bottom: -1px;
    left: 4px;
    height: 2.2em;
    width: 3em;
    border-style: none;
    background-color: #ffffff;
    box-shadow: 3px 0px 5px rgb(245, 255, 183);
    border-radius: 40px;
    transition-duration: 0.25s;
}

/*===APP DIV===*/
#app{
    position: relative;
    top: 1em;
    padding-top: 0.8em;
    width: 92%;
    padding-left: 1em;
    padding-right: 1em;
    text-align: center;
    border-radius: 25px;
    border: none;
    z-index: 1;
    overflow: hidden;
}
/*SEARCH-CONTAINER*/
#searchContainer{
    text-align: center;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    height: 3.1em;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    border-radius: 8px;
    z-index: 1;
    transition-duration: 0.25s;
}
/*SEARCH-BAR*/
#searchBar{
    position: relative;
    display: inline-block;
    top: 0.5em;
    width: 60%;
    padding-left: 5px;
    padding-right: 5px;
    height: 32px;
    border-radius: 10px;
    border-style: solid;
    border-color: light;
    color: #1A1A1A;
    border-color: #767676;
    background-color: #ededed;
}
#searchBar:focus{
    outline-color: #2563eb;
}
/*SEARCH-BTN*/
#searchBtn{
    position: relative;
    display: inline-block;
    left: 0.8em;
    width: 6em;
    top: 0.5em;
    height: 38px;
    border: #2563eb;
    color: #ffffff;
    font-weight: bold;
    background-color: #2563eb;
    border-radius: 10px;
    border-style: solid;
    animation-timing-function: ease-in-out;
    animation-duration: 1.8s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    transition-duration: 0.25s;
}
#searchBtn:hover{
    background-color: #1d4ed8;
    box-shadow: 0px 0px 5px 1px #2563eb;
    transition-duration: 0.6s;
    animation-name: blowing;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
}
/*UNITE-BTN*/
#unitsBtn{
    position: relative;
    display: inline-block;
    top: 0.45em;
    right: 0.8em;
    width: 3em;
    height: 36px;
    border-style: solid;
    border-radius: 10px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    color: #374151;
    transition-duration: 0.25s;
    scale: 1;
    font-size: 16px;
    font-weight: bold;
}
#unitsBtn:hover{
    background-color: #e5e7eb;
    transition-duration: 0.6s;
    animation-name: blowing;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
}
/*===LOCATION-WEATHER===*/
#infoContainer{
    position: relative;
    bottom: 1em;
    text-align: center;
}
/*=INFO-LOCATION=*/
#infoLocation{
    position: relative;
    display: inline-block;
    background-color:#ffffff;
    border: 1px solid #e5e7eb;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.5em;
    border-radius: 35px;
    width: 50%;
    height: 15em;
    left: 0.1em;
    top: 2em;
    text-align: left;
    overflow: hidden;
    transition-duration: 0.25s;
    border: 1px solid #d1d5db;
}
#infoLocation.meta-bug{
    text-align: center;
    height: 23em;
    transition-duration: 0.25s;
}
#infoLocation.mobile{
    position: relative;
    display: inline-block;
    background-color:#ffffff;
    border: 1px solid #e5e7eb;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.5em;
    border-radius: 35px;
    width: 90%;
    left: 0.1em;
    top: 1.5em;
    text-align: left;
    overflow: hidden;
    transition-duration: 0.25s;
    border: 1px solid #d1d5db;
}
#infoLocation.mobileOff{
    position: relative;
    display: inline-block;
    background-color:#ffffff;
    border: 1px solid #e5e7eb;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.5em;
    border-radius: 35px;
    width: 90%;
    height: 25em;
    left: 0.1em;
    top: 1.5em;
    text-align: center;
    overflow: hidden;
    transition-duration: 0.25s;
    border: 1px solid #d1d5db;
}
#infoLocation.tablet{
    position: relative;
    display: inline-block;
    background-color:#ffffff;
    border: 1px solid #e5e7eb;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.5em;
    border-radius: 35px;
    width: 95%;
    height: 15em;
    left: 0.1em;
    top: 2em;
    text-align: left;
    overflow: hidden;
    transition-duration: 0.25s;
    border: 1px solid #d1d5db;
}
/*LOCATION-NAME*/
#homeIcon{
    position: relative;
    width: 1.3em;
    left: 1em;
    display: inline-block;
}
#locationBlock{
    position: relative;
    left: 1.5em;
    bottom: 0.2em;
    display: inline-block;
    width: 12em;
    height: 6em;
}
#location{
    display: inline-block;
    position: relative;
    font-size: 20px;
    left: 0.2em;
    font-family: Verdana;
    color: #060a0f;
}
#location.mobileOff{
    right: 1em;
}
#infoLocation hr{
    position: relative;
    bottom: 3.5em;
}
#weatherMain{
    position: relative;
    text-align: center;
    width: 13em;
    bottom: 0.8em;
    left: 25%;
}
/*TEMP-IMG*/
#WeatherImg{
    position: relative;
    animation-timing-function:linear;
    animation-duration: 0.4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    bottom: 0.5em;
    left: 16%;
    width: 1em;
    height: 1em;
    scale: 14;
    top: 1em;
    transition-duration: 0.8s;
}
#WeatherImg:hover{
    scale: 15;
    transition-duration: 0.8s;
}
#WeatherImg.meta-bug{
    left: 0;
    scale: 12;
    transition-duration: 0.25s;
    top: 0;
}
#WeatherImg.mobileOff{
    scale: 12;
    left: 0em;
    top: 0;
}
/*TEMP*/
#temp{
    position: relative;
    bottom: 1.5em;
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    font-family: Verdana;
    transition-duration: 1s;
    left: 1em;
}
#temp.meta-bug{
    top: 2em;
    transition-duration: 0.25s;
}
#temp.mobileOff{
    left: -0em;
    top: 2em;
}
/*  */
#weatherDescription{
    position: relative;
    width: 13em;
    height: 2em;
    bottom: 3em;
    left: 1em;
    font-size: 16px;
    color: #4b5563;
    transition-duration: 1s;
}
#weatherDescription.meta-bug{
    top: 2.5em;
    left: 1.5em;
    transition-duration: 0.25s;
}
#weatherDescription.mobileOff{
    top: 3em;
    left: -0.2em;
}
/*  */
#tempCaracter{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    letter-spacing: 2px;
    word-spacing: 3px;
}
/*===TIME===*/
#time{
    position: relative;
    display: inline-block;
    bottom: 11.5em;
    width: 22em;
    height: 10em;
    left: 38%;
    text-align: center;
    z-index: 0;
    font-family: Verdana;
    transition-duration: 0.6s;
}
#time.meta-bug{
    left: 0;
    top: 2em;
    height: 5em;
}
#time.mobileOff{
    left: 0;
    top: 4em;
    height: 5em;
}
/*SUN-RISE*/
#weatherItem5{
    position: relative;
    display: inline-block;
    text-align: center;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    width: 8em;
    height: 3em;
    left: 10.5em;
    transition-duration: 0.6s;
}
#weatherItem5.meta-bug{
    left: 0;
    transition-duration: 0.25s;
}
#weatherItem5.mobileOff{
    left: 0;
    bottom: 1em;
}
#six{
    position: relative;
    display: inline-block;
    font-size: 15px;
    color: #4b5563;
    left: 0em;
    transition-duration: 0.25s;
}
#six.mobileOff{
    left: 1.4em;
}
#sunrise{
    position: relative;
    top: 0.5em;
    display: inline-block;
    font-size: 15px;
    color: #111827;
    transition-duration: 0.25s;
}
#sunrise.mobileOff{
    top: 1.5em;
    right: 2.25em;
}
/*SUN-SET*/
#weatherItem6.mobileOff{
    left: 0;
    top: -1em;
    
}
#weatherItem6{
    position: relative;
    display: inline-block;
    text-align: center;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    width: 8em;
    height: 3em;
    top: 4em;
    transition-duration: 0.6s;
}
#weatherItem6.meta-bug{
    top: -1.2em;
    transition-duration: 0.25s;
}
#seven{
    position: relative;
    display: inline-block;
    font-size: 15px;
    color: #4b5563;
    left: 1.7em;
    transition-duration: 0.25s;
}
#seven.mobileOff{
    left: 1em;
}
#sunset{
    position: relative;
    top: 1.5em;
    right: 1.8em;
    display: inline-block;
    font-size: 15px;
    color: #111827;
    transition-duration: 0.25s;
}
#sunset.mobileOff{
    top: 1.7em;
    right: 1.8em;
}
/*  */
/*===COMPONENTS===*/
/*=metaInfo=*/
#metaInfo{
    position: relative;
    display: inline-block;
    background-color:#ffffff;
    border: 1px solid #e5e7eb;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.5em;
    border-radius: 35px;
    width: 40%;

    left: 0.5em;
    top: 2em;
    text-align: center;
    overflow: hidden;
    transition-duration: 0.25s;
    border: 1px solid #d1d5db;
}
#metaInfo.mobile{
    width: 90%;
}
#metaInfo.mobileOff{
    width: 90%;
}
#metaInfo p{
    position: relative;
    bottom: 0.2em;
    font-size: 22px;
    font-weight: bold;
    color: #111827;
    font-family: Verdana;
}
/*  */

/*===META-INFO-CSS===*/
@property --p{
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.pie {
  --p:20;
  --b:22px;
  --c:#77c6ff;
  --w:150px;
  
  width:var(--w);
  aspect-ratio:1;
  position:relative;
  display:inline-grid;
  margin:5px;
  place-content:center;
  font-size:36px;
  font-weight:bold;
  font-family:sans-serif;
}
.pie:before,
.pie:after {
  content:"";
  position:absolute;
  border-radius:50%;
}
.pie:before {
  inset:0;
  background:
    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
.pie:after {
  inset:calc(50% - var(--b)/2);
  background:var(--c);
  transform:rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}
.animate {
  animation:p 1s .5s both;
}
.no-round:before {
  background-size:0 0,auto;
}
.no-round:after {
  content:none;
}
@keyframes p {
  from{--p:0}
}
/*UMIDITY*/
#weatherItem1{
    position: relative;
    display: inline-block;
    text-align: center;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    width: 6em;
    height: 7em;
    margin-right: 0.5em;
    bottom: 1em;
    transition-duration: 0.6s;
    overflow: hidden;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif ;
    right: 0.5em;
}
#two{
    position: relative;
    bottom: 4em;
    transition-duration: 0.8s;
    color: #4b5563;
}
.oneD{
    position: relative;
    scale: 0.6;
    right: 1em;
    bottom: 1em;
    display: inline-block;
    background-size: cover;
    color: #111827;
    border-radius: 100%;
}
/*PRESURE-ATM*/
#weatherItem2{
    position: relative;
    display: inline-block;
    text-align: center;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    width: 6em;
    height: 7em;
    margin-right: 0.5em;
    bottom: 1em;
    transition-duration: 0.6s;
    overflow: hidden;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif ;
    right: 0.5em;
}
#three{
    position: relative;
    bottom: 3.2em;
    transition-duration: 0.8s;
    color: #4b5563;
    font-weight: bold;
}
.twoD{
    position: relative;
    scale: 0.6;
    right: 1.5em;
    bottom: 1.5em;
    width: 9em;
    height: 9em;
    display: inline-block;
    background-size: cover;
    color: #111827;
    border-radius: 100%;
    box-shadow: 0px 0px 5px 1px #ff7777;
}
#pressureAtm{
    position: relative;
    bottom: 8.1em;
    color: #111827;
}
/*WIND*/
#weatherItem3{
    position: relative;
    display: inline-block;
    text-align: center;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    width: 6em;
    height: 7em;
    bottom: 1em;
    transition-duration: 0.6s;
    overflow: hidden;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif ;
    right: 0.5em;
}
.threeD{
    position: relative;
    scale: 1.1;
    right: 0.2em;
    top: 0.5em;
    width: 5em;
    height: 5em;
    display: inline-block;
    background-size: cover;
    color: #111827;
    border-radius: 100%;
    box-shadow: 0px 0px 5px 1px #c5e7ff;
}
#for{
    position: relative;
    top: 1em;
    transition-duration: 0.8s;
    color: #4b5563;
    font-weight: bold;
}
#wind{
    position: relative;
    bottom: 4em;
    color: #111827;
    font-weight: bold
}
/*  */
#weatherItem4{
    display: none;
    position: relative;
    text-align: center;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    width: 6em;
    height: 7em;
    left: 4em;
    bottom: 1em;
    transition-duration: 0.6s;
    overflow: hidden;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif ;
    right: 0.5em;
}
/*===PROGNOZA-METEO===*/
#forecastContainer{
    display: inline-block;
    position: relative;
    text-align: center;
    width: 90%;
    top: 3em;
    border-radius: 25px;
    border: none;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    transition-duration: 0.25s;
    overflow:hidden;
    padding-bottom: 1.5em;
}
/*  */
#forecastList{
}
/*===RECENT-SEARCH===*/
#recentSearch{
    display: inline-block;
    position: relative;
    text-align: left;
    width: 92.5%;
    padding-left: 1em;
    padding-right: 1em;
    height: 10em;
    top: 3em;
    scale: 0.9;
    border-radius: 25px;
    border: none;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    transition-duration: 0.25s;
}
#recentSearch button{
    font-size: 18px;
}
#locationBtn{
    position: relative;
    display: inline-block;
    top: 0.5em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.8em;
    padding-bottom: 1.8em;
    left: 0.3em;
    margin-right: 0.8em;
    height: 36px;
    border-style: solid;
    border-radius: 10px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    color: #374151;
    transition-duration: 0.25s;
    scale: 1;
    font-size: 16px;
    font-weight: bold;
}
#mesage{
    position: relative;
    font-size: 22px;
    font-weight: bold;
    color: #060a0f;
    font-family: Verdana;
    transition-duration: 0.25s;
}
#clearHistory{
    position: relative;
    display: inline-block;
    bottom: 6em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.8em;
    padding-bottom: 1.8em;
    float: right;
    right: 8%;
    margin-right: 0.8em;
    height: 36px;
    border-style: solid;
    border-radius: 10px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    color: #374151;
    transition-duration: 0.25s;
    scale: 0.85;
    font-size: 16px;
    font-weight: bold;
}
#clearHistory:hover{
    background-color: #8a0000;
    color: white;
    transition-duration: 0.6s;
}
/*  */
#forecastErr{
    display: none;
    position: relative;
    top: 1em;
    font-size: 28px;
    font-family: Verdana;
    font-weight: bold;
    color: tomato;
    
}
#forecastErrEmoji{
    display: none;
    position: relative;
    color: tomato;
    scale: 8;
    top: 6em;
}
/*  */
.forecast-day{
    position: relative;
    display: inline-block;
    text-align: center;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    width: 7em;
    height: 9em;
    margin-right: 3%;
    margin-top: 1em;
    left: 0.5em;
    top: 0.5em;
    transition-duration: 0.6s;
    overflow: hidden;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif ;
    font-weight: bold;
}
.forecast-date{
    color: #111827;
    font-weight: bold;
    font-size: 18px;
}
.forecast-temp{
    position: relative;
    top: 6em;
    color: #4b5563;
    font-weight: bold;
    font-size: 18px;
}
.forecast-icon{
    position: relative;
    animation-timing-function:linear;
    animation-duration: 0.4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    bottom: 0.5em;
    width: 1em;
    height: 1em;
    scale: 10;
    top: 1em;
    transition-duration: 0.8s;
}