:root{
    --bg: hsl(243, 96%, 9%);
    --btn-clr-darker: hsl(243, 27%, 20%);
    --btn-clr: hsl(243, 23%, 24%);
    --btn-clr-lighter: hsl(243, 23%, 30%);
    --btn-clr-lighter-lighter: hsl(240, 6%, 30%);
    --blue: hsl(248, 70%, 36%);
    --blue-lighter: hsl(233, 67%, 56%);
    --width: min(1000px , 90vw)
}

* {
    font-family: DM Sans , sans-serif;
    padding: 0;
    margin: 0;
}

html{
    background-color: var(--bg);
}

*{
    color: white;
    font-size: 18px;
}

h1{
    margin: 3%;
}

nav{
    display: flex;
    justify-content: space-between;
    width: var(--width);
    margin: 0 auto;
    margin-top: 2vh;
}

#unit-btn{
    background-color: var(--btn-clr);
    border-radius: 3px;
    width: 100px;
    height: 40px;
    border-radius: 10px;
    outline: none;
    border: none;
    cursor: pointer;
}

#unit-board{
    cursor: auto;
    position: absolute;
    
    /* top: 60px;
    right: 5vw; */
    transform: translate(-50% , 5%);


    width: 200px;
    height: 300px;
    padding: 10px 0px;
    background-color: var(--btn-clr);
    border: 1px solid var(--btn-clr-lighter-lighter);
    border-radius: 10px;
    z-index: 1;
    text-align: left;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#unit-board *{
    margin-left: 15px;
}

#unit-board label{
    margin-left: 5px;
    font-size: 0.75rem;
}

.sub-text{
    color: hsl(240, 6%, 70%);
    font-size: 0.75rem;
}

#unit-board hr{
    background-color: var(--btn-clr-lighter);
    border: none;
    height: 2px;
    width: 90%;
}

input[type="radio"]{
    appearance: none;

    margin: 0;
    padding: 0;
    width: 0;
    height: 0;

    position: absolute;
    top: 0px;
    left: 0px;
}

#unit-board input + .label-ctn{
    /* margin-left: 0px; */
    display: flex;
    align-items: center;
    padding: 5px;
    padding-left: 0px;
}

#unit-board input:checked + .label-ctn{
    width: 90%;
    margin-left: auto !important; 
    margin-right: auto !important;
    text-align: left;
    border-radius: 5px;
    background-color: var(--btn-clr-lighter-lighter);
    margin-left: 0px;
}

#unit-board input:checked + .label-ctn label{
    margin-left: 12.5px;
}

#unit-board input:checked + .label-ctn::after{
    content: url(./assets/images/icon-checkmark.svg);
    position: absolute;
    right: 0;
    transform: translateX(-100%);
}


h1{
    text-align: center;
    font-size: 2rem;
}

#search-area{
    text-align: center;
    margin-bottom: 4vh;
}

#search-bar{
    width: min(600px , 70vw);
    height: 40px;
    background-color: var(--btn-clr);
    outline: none;
    border: none;
    background-image: url(./assets/images/icon-search.svg);
    background-repeat: no-repeat;
    background-position: 10px;
    text-indent: 40px;
    border-radius: 10px;
}

#search-ctn{
    position: relative;
    /* border: 2px solid red; */
    width: calc(min(600px , 70vw) + min(100px , 20vw) + 5px);
    margin: 0 auto;
}

#search-btn{
    width: min(100px , 20vw);
    height: 40px;
    background-color: var(--blue);
    outline: none;
    border: none;
    border-radius: 10px;
    border-radius: 10px;
    cursor: pointer;
}

#search-result{
    position: absolute;
    min-height: 50px;
    max-height: 300px;
    width: min(600px , 70vw);
    left: 0;
    top: 50px;
    background-color: var(--btn-clr-lighter);
    border-radius: 10px;
    z-index: 2;

    overflow: auto;
}

.city-card{
    display: flex;
    flex-direction: column;
    align-items: left;
    text-align: left;
    justify-content: center;
    min-height: 20px;
    width: 90%;
    padding: 2.5%;
    margin: 10px auto;
    border: 1px solid transparent;
    border-radius: 10px;
}

.loading-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    min-height: 20px;
    width: 90%;
    padding: 2.5%;
    margin: 10px auto;
    border: 1px solid transparent;
    border-radius: 10px;
}

.city-card:first-of-type{
    margin-top: 10px;
}
.city-card:last-of-type{
    margin-bottom: 10px;
}

.city-card:hover{
    background-color: var(--btn-clr);
    border: 1px solid var(--btn-clr-lighter-lighter);
}

#search-result::-webkit-scrollbar{
    appearance: none;
}

#weather-detail{
    display: grid;
    margin: 10px auto;
    height: 60vh;
    width: var(--width);
    gap: 2%;
    grid-template-columns: 65% 30%;
    grid-template-rows: 45% 15% 7.5% 25%;
    /* border: 2px solid red; */
}

#today-forecast{
    width: 100%;
    height: 100%;
    /* border: 2px solid red;; */
    margin-right: 2.5%;
    margin-bottom: 2.5%;
}

#right-text{
    font-size: 2rem;
    font-style: italic;
}

.board-icon{
    width: 100px;
    height: 100px;
}

#right-text::after{
    content: "o";
    font-size: 50%;
    position: relative;
    top: -1rem;
}

#board{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* margin: 0 auto; */
    background-image: url(./assets/images/bg-today-large.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 20px;
    background-color: var(--btn-clr);
}

#board-inner-text{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

#board-right-text{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.card-wrapper{
    width: 100%;
    height: 100%;
    /* border: 2px solid red; */
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#today-detail .card{
    width: 20%;
    padding-left: 1.275%;
    padding-right: 1.275%;
}

.card{
    overflow: hidden;
    background-color: var(--btn-clr);
    height: 100%;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    position: relative;
}

.big-text{
    font-size: 1.5rem;
}

.big-text.temperature-text::after{
    top: -0.75rem;
}


#daily-forecast-text{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0;
    margin: 0;
}

#daily-forecast{
    width: 100%;
    height: 100%;
}

#daily-forecast .card{
    width: 13%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#daily-forecast .card .card-content{
    width: 90%;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.day-of-the-week{
    /* border: 2px solid red; */
    margin: 0;
    height: 20%;
}

.weather-icon{
    width: 100%;
    height: 40%;
    object-fit: contain;
    
    /* border: 2px solid red; */
}

.card-temperature{
    display: flex;
    width: 90%;
    height: 20%;
    justify-content: space-between;
    /* border: 2px solid red; */
}

.card-temperature p{
    font-size: 0.75rem;
}

.temperature-text{
    --content-after: "o"
}

.humidity-text{
    --content-after: "%"
}
.wind-speed-text{
    --content-after: "km/h"
}
.precipitation-text{
    --content-after: "mm"
}

.temperature-text::after{
    content: var(--content-after);
    font-size: 0.5rem;
    position: relative;
    top: -0.5rem;
}

.humidity-text::after{
    content: var(--content-after);
    font-size: 1rem;
    position: relative;
}

.wind-speed-text::after{
    content: var(--content-after);
    font-size: 1rem;
    position: relative;
}

.precipitation-text::after{
    content: var(--content-after);
    font-size: 1rem;
    position: relative;
}

#hourly-forecast{
    width: 100%;
    height: 100%;
    grid-column: 2/span 1;
    grid-row: 1/span 4;
    /* border: 2px solid red;; */
    background-color: var(--btn-clr);
    border-radius: 10px;
    /* margin-left: 2.5%; */

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#hourly-forecast-top{
    font-size: 0.75rem;
    align-items: center;
    margin-right: 9px;
    /* border: 2px solid red; */
}

#left-text{
    margin-left: 10px;
}

#btn-ctn{
    height: 30px;
    width: 100px;
    border-radius: 5px;
    background-color: var(--btn-clr-lighter);

    margin: auto;
}

#forecast-day-btn{
    height: 100%;
    width: 90%;
    font-size: 0.75rem;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
}

/* This is the content added while on school */

#hourly-forecast{
    display: flex;
    /* align-items: center; */
    justify-content: center;
}

#hourly-forecast-ctn{
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    width: 97.5%;
    height: 95%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* border: 2px solid black; */
}

#hourly-forecast-top{
    display: flex;
    justify-content: space-between;
    height: 10%;
}

#forecast-day-btn{
    background: var(--btn-clr-lighter);
    border: 0;
    outline: 0;
}

#hourly-forecast-content{
    scroll-margin-left: px;
    position: relative;
    height: 90%;
    overflow: auto;
    padding-right: 2.5%;
    padding-left: 0;
    /* border: 2px solid red; */
}

#hourly-forecast-content::-webkit-scrollbar{
    position: absolute;
    width: 2px;
}

#hourly-forecast-content::-webkit-scrollbar-track{
    width: 5px;
}

#hourly-forecast-content::-webkit-scrollbar-thumb{
    width: 5px;
    background-color: var(--btn-clr-lighter-lighter);
    border-radius: 10px;
}

#hourly-forecast-content::-webkit-scrollbar-thumb:hover{
    cursor: grab;
}

.hour-card{
    width: 100%;
    height: 50px;
    margin-bottom: 10px;
    border-radius: 10px;
    /* border: 2px solid red; */
    background-color: var(--btn-clr-lighter);

    display: flex;
    justify-content: center;
    align-items: center;
}

.hour-card:last-of-type{
    margin-bottom: 0px;
}

.hour-card-content{
    width: 95%;
    height: 95%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    /* border: 2px solid red; */
}

.hour-card-content .weather-icon{
    width: 20%;
    height: 20%;
}

.weather-text{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.hour-card .temperature-text{
    margin-right: 0.5rem;
}

/*-------------------------------------------*/

#day-of-the-week-board{
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: left;
    justify-content: space-evenly;

    border-radius: 5px;

    width: 150px;
    background-color: var(--btn-clr-darker);
    transform: translateX(calc(-32.5% - 1px));
    top: 40px;

    z-index: 1;
}

#day-of-the-week-board .label-ctn{
    width: 80%;
    margin: 0 auto;
    /* border: 2px solid red; */
    background-color: inherit;
    padding: 10px 10px 10px 10px;
    border-radius: 5px;
    cursor: pointer;
}

#day-of-the-week-board label{
    cursor: pointer;
}

#day-of-the-week-board .label-ctn:hover{
    background-color: hsla(243, 23%, 30% ,0.6);
}

#day-of-the-week-board .label-ctn{
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    margin-top: 0.5rem;
}

#day-of-the-week-board .label-ctn:last-of-type{
    margin-bottom: 0.5rem;
}

#day-of-the-week-board input:checked + .label-ctn{
    background-color: hsla(243, 23%, 30% ,0.6);
}