@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');


* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1.25em;
    font-family: "Josefin Sans", sans-serif;
    font-size: 1em;
    font-weight: 400;
}

h1 {
    font-size: 4em;
    margin: 0;
}

h2 {
    font-size: 3em;
    margin: 0;
}

.day-date {
    font-size: 2em;
    margin: 6px 0;
    font-weight: 700;
}

h4 {
    font-size: 1em;
    margin: 0;
}

.condition {
    font-size: 1.6em;
    line-height: 1.8;
    margin: 0;
    font-weight: 700;
}

.basic_text {
    font-size: 1.2em;
    margin: 0;
    font-weight: 400;
}

body {
    margin: 0;
    width: 100%;
    height: 100vh;
    background-color: #343d4b;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

}

.container {
    border-radius: 25px;
    -webkit-box-shadow: 0 0 70px -10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 70px -10px rgba(0, 0, 0, 0.2);
    background-color: #222831;
    color: #ffffff;
    width: 300px;
    height: auto;
}

.basic_wrapper {
    border-radius: 25px;
    -webkit-box-shadow: 0 0 70px -10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 70px -10px rgba(0, 0, 0, 0.2);
    background-color: #8ca3c5;
    color: #ffffff;
    height: auto;
    padding: 2em;
    background-image: linear-gradient(135deg, rgba(114, 237, 242, 0.5) 10%, rgba(81, 81, 229, 1) 100%),
        url("https://images.unsplash.com/photo-1559963110-71b394e7494d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80");
    background-repeat: no-repeat;
    background-size: cover;
}


.details {
    height: auto;
    padding: 2em;

}

.details div {
    display: flex;
    justify-content: space-between;
}

.details div span {
    text-transform: capitalize;
    font-size: 1.1em;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.8;
}


.temp {
    margin-top: 40px;
    text-align: right;
}

.temp p {
    margin: 0 auto;
}