@font-face {
    font-family:"Bricolage";
    src: url("./assets/fonts/Bricolage_Grotesque/BricolageGrotesque-VariableFont_opsz\,wdth\,wght.ttf");
}
@font-face {
    font-family: "DM-sans";
    src: url("./assets/fonts/DM_Sans/DMSans-Italic-VariableFont_opsz\,wght.ttf");
}
*{
    box-sizing: border-box;
}
html{
    transition: 0.5s;
}
ul{
    padding: 0;
    margin: 0;
    list-style: none;
}

:root{
    --body-background-900: hsl(243, 96%, 9%);
    --main-background-800:hsl(243, 27%, 20%);
    --sec-background-700:hsl(243, 23%, 24%);
    --sec-background-600:hsl(243, 23%, 30%);
    --wihet-300 :  hsl(240, 6%, 70%);
    --wihet-200 :hsl(250, 6%, 84%);
    --wihet-0 : hsl(0, 0%, 100%);
    --orange-500: hsl(28, 100%, 52%);
    --Blue-500: hsl(233, 67%, 56%);
    --Blue-700: hsl(248, 70%, 36%);
}
body{
    font-family: "Bricolage";
    margin: 0;
    padding: 0;
    background-color: var(--body-background-900);
    font-size: 18px;
    color: var(--wihet-0);
    transition: 0.5s;
}

nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin: 20px;
    margin-bottom: 0;
}

nav .units {
    position: relative;
}
nav .units .top{
background-color: var(--main-background-800);
display:flex;
flex-direction: row-reverse;
width: 140px;
padding: 0px 5px;
justify-content: space-evenly;
border-radius: 20px;
cursor: pointer;
transition: 0.3s;
outline: 1px solid transparent;
color: var(--wihet-0);
}

nav .units .top:hover,
nav .units .top:focus{
    outline: 1px solid var(--wihet-0);
    transition:outline 0.3s ease ;
}
nav .units .top:focus .ic-drop{
    transform: rotate(180deg);
}
nav .units  .dropdown1{
    color: var(--wihet-0);
}

@media (max-width:720px){
    nav .logo{
        width: 150px;
    }
}

.dropdown1{
    position: absolute;
    background-color: var(--main-background-800);
    flex-direction: column;
    font-size: 15px;
    text-align: left;
    padding: 5px 10px;
    max-height:500px ;
    width: 200px;
    left: -60px;
    border-radius: 15px;
    z-index: 99;
    display: none;
}

.dropdown1 ul{
position: relative;
display: flex;
flex-direction: column;
}

.dropdown1 ul p{
    color: var(--wihet-300);
}
.dropdown1 ul label,
.dropdown1 ul input{
    padding: 10px  0px;
}
.dropdown1 .check{
    display: flex;
    justify-content: space-between;
}

/* The End Nav bar   */
@media (max-width:720px) {
    nav{
        width: 90%;
        padding: 0px;
        margin: 10px;
    }
    nav .units .top{
        width: 100px;
        
    }
    .dropdown1{
        left: -105px;
    }
}

/* Start Header    */

header{
    text-align: center;
    margin-bottom: 30px;
}
header h1{
    margin-top: 0;
}
header  form{
    position: relative;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
}
header form input{
    background-color: var(--main-background-800);
    border: none;
    padding: 10px;
    width: 300px;
    border-radius: 5px;
    padding-left: 30px;
    color: var(--wihet-200);
}
header form input:focus{
    outline: 2px solid var(--Blue-500);
}
header form img{
    position: absolute;
    left: calc(50% - 195px + 10px);
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    opacity: 0.5;   
}
/* header form input:focus + ul{
    display: flex;
    z-index: 9999;
} */
header form ul{
    position: absolute;
    display: none;
    flex-direction: column;
    background-color: var(--main-background-800);
    height: auto;
    left: 47%;
    transform: translate(-50%);
    bottom: -100px;
    width: 300px;
    z-index: 99;
    text-align: left;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
}
header form ul li{
    background-color: var(--sec-background-700);
    margin-bottom: 5px;
    padding: 5px;
    border-radius: 10px;
}
header form button{
    background-color: var(--Blue-500);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    color: var(--wihet-0);
    cursor: pointer;
    transition:  0.5s ease;
    outline: 1px solid transparent;
}
header form button:hover{
    outline: 1px solid var(--wihet-200);
    transition: 0.5s ease;
}
@media (max-width:720px){
    header form{
        flex-direction: column;
        gap: 5px;
        margin: 5px 10px;
    }
    header form input{
        width: 100%;
        padding-left: 40px;
    }
    header form img{
        left: 5%;
        top: 20px;
        transform: translateY(-50%);
    }
    header form ul{
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        bottom: -50px;
    }
}
/* Start thhe Section Weathr  */
section{
    display: grid;
    grid-template-columns: repeat(10,1fr);
    grid-template-rows:  auto auto   auto auto   ;
    grid-template-areas: 
    ". bg_today bg_today bg_today bg_today bg_today bg_today article  article ."
    ". info info info info info info article article ."
    ". h3 h3 h3 h3 h3 h3 article article ."
    ". Daily Daily Daily Daily Daily Daily article article .";
    gap: 10px;
}
@media (max-width:720px) {
    section{
        display: flex;
        flex-direction: column;
    }
    .bg_today{

        flex-direction: column;
        padding:10px;
    }

}
.bg_today{
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
grid-area: bg_today;
background-image: url(./assets/images/bg-today-large.svg);
background-size: cover;
background-repeat: no-repeat;
background-color: var(--main-background-800);
height: 100%;
padding: 30px;
border-radius: 15px;
}

.bg_today .timedate{
color: var(--wihet-300);
}
.bg_today .side-right{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.side-right p{
    font-size: 90px;
    margin: 0;
    font-family: "DM-sans";
}
.bg_today .bg_today_icon{
width: 150px;
}

@media (max-width:920px){
    .bg_today{
        background-image: url(./assets/images/bg-today-small.svg);
        padding: 10px;
        margin: 5px;
    }
    .side-right {
        width: 70%;
    }
    .side-right p{
    font-size: 50px;
    margin: 0;
    font-family: "DM-sans";
}
.bg_today .bg_today_icon{
width: 100px;
}
}
.info{
display: flex;
justify-content: space-between;
gap: 10px;
grid-area: info;
}
.info div{
background-color:var(--main-background-800);
width: 25%;
border-radius: 15px;
padding: 10px;
}
.info div h5{
    margin: 10px;
    color: var(--wihet-300);
    padding-left: 15px;
}
.info div p {
    font-size: 25px;
    padding-left: 15px;
    margin: 10px;
}

@media (max-width:920px){
    .info{
        flex-wrap: wrap;
    }
    .info div{
        width: 45%;
    }
}
.head-Daily{
    grid-area: h3;
    margin: 5px;
font-weight: 300;
}

.Daily_forecast{
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
grid-area: Daily;
height: 150px;
}
.Daily_forecast img{
    width: 70px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
}
.Daily_forecast div{
    position: relative;
    background-color: var(--main-background-800);
    width: calc(100% / 7);
    border-radius: 15px;
    height: 90%;
}
.Daily_forecast div h5{
margin: 5px;
margin-top: 10px;
text-align: center;
}
.Daily_forecast div div{
    display: flex;
    justify-content: space-between;
    align-items: end;
    width: 100%;
    height: 80%;
    padding: 5px;
    font-size: 15px
}
@media (max-width:720px){
    .Daily_forecast{
        flex-wrap: wrap;
        margin-bottom: 425px;
        align-items: center;
        justify-content: space-evenly;
    }
.Daily_forecast div{
    width: calc(100% / 3);

}
}
article{
grid-area: article;
background-color: var(--main-background-800);
border-radius: 15px;
width: 300px;
}
article h3{
    margin: 5px 5px 5px 0;
    text-align: left;
}
article button {
outline: 5px solid transparent;
background-color: var(--sec-background-600);
color: var(--wihet-0);
border-radius: 15px;
padding: 10px 20px;
margin-left: 25px;
border: none;
cursor: pointer;
}
article button:focus{
    outline:1px solid var(--wihet-0);
    border-radius: 15px;
}
article ul {
position: absolute;
display: none;
flex-direction: column;
gap: 10px;
right: 15px;
top: 50px;
z-index: 999;
width: 50%;
background-color: var(--sec-background-600);
padding: 10px;
border-radius: 15px;
}
article ul li{
    width: 100%;
    text-align: left;
    padding: 5px;
}
article ul li:hover{
    background-color: var(--sec-background-700);
}
article img {
    width: 60px;
}
article div{
    position: relative;
    display: flex;
    flex-direction: column;
    height: 90%;
}

article div div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: var(--sec-background-700);
    margin: 5px;
    border-radius: 15px;
    
}
article div div p {
    margin: 2px;
}
article div div span{
    padding-right: 10px;
}
@media (max-width:720px){
article{
width: 100%;
}    
}

/* Show Or Hidden */
.disflex{
display: flex;
}
.disnone{
display: none;
}