style.css

@font-face {
    font-family: "Invasible";
    src: 
    url("fonts/Invasible.ttf") format("truetype"),
    url("fonts/Invasible.otf") format("opentype"),
    url("fonts/Invasible\ Inline.ttf") format("truetype"),
    url("fonts/Invasible\ Inline.otf") format("opentype");
}
@font-face {
    font-family: "Techno";
    src: 
    url("fonts/Techno\ Space.ttf") format("truetype")
    url("fonts/Invasible\ Inline.otf") format("opentype");
}
* {
    box-sizing: border-box;
    border: 0;
    outline: 0;
    transition: all 0.25s ease-in-out;
}


/*   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   */


a {
    text-decoration: solid ;
}
body {
    width: inherit;
    height: 97vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    border-radius: 0.8em;
    box-shadow: 0 0 1em rgba(188, 244, 255, 0.54);
    background-color: rgb(241, 248, 249);
}


/*   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   */


header {
    top: 0%;
    position: absolute;
    display: flex; 
    font-size: 0.9em;
    font-family: Invasible;
    justify-content: space-between;
    min-width: 500px;
    width: 74%;
    max-height: 620px;
    margin: 0 12cqmax;
    padding: 0 4vw 0 5vw;
    box-shadow: 0 0 0.5em 0 rgba(0, 98, 130, 0.18);
    border-radius: 0 0 0.5em 0.5em;
    background-color: rgba(53, 221, 255, 0.3);
}
header>h1>a {
    color: rgba(241, 248, 249, 0.913);
}
header>a {
    top: 1.35rem;
    font-size: 1.5em;
    font-weight: 400;
    font-family: Techno;
    position: relative;
    height: fit-content;
    color: rgba(255, 255, 255, 0.612);
}


/*   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   */


main {
    width: 75%;
    min-width: 500px;
    max-height: 620px;
    margin: 16vh 12cqmax;
    border-radius: 5em;
    box-shadow: 0 0 3em 0 rgba(0, 107, 117, 0.281);
    background-color: aqua;
    background-color: color-mix(in hsl shorter hue, #35ddff 36%, #effcff 78%); 
    padding: 8% 25%;
}


/*   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   */


#cityInput {
    padding: 0.78em;
    justify-content: center;
}
#cityInput>input {
    box-sizing: border-box;
    border-radius: 50em;
    background-color: rgb(238, 254, 255);
    min-height: 3em;
    max-height: 4.8em;
    padding: 0 2em;
    margin: -0.4em 0;
    font-size: 1.12em;
}
#cityInput>div {
    width: 4.6em;
    height: 4.6em;
    border-radius: 50em;
    text-align: center;
    background-color: rgb(242, 254, 255);
}
#cityInput>div>h3 {
    visibility: hidden;
}
#searchLogo {
    margin: 1.25em;
    width: 3em;
    opacity: 90%;
}


/*   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   */


#weatherDisplay {
    text-align: center;
    justify-content: space-evenly;
    border-radius: 1.5em;
}
#weatherDisplay>h2 {
    font-size: 5em;
    margin: 0;
}
#weatherDisplay>h3 {
    font-size: 2.5em;
    margin: 0;
}


/*   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   */


#otherDetails {
    display: flex;
    justify-content: center;
}
#otherDetailsInside {
    display: flex;
    min-width: 360px;
    max-width: 1000px;
    padding: 2em 8em;
    justify-content: space-evenly;
}
#otherDetailsInside>h4 {
    font-size: 15em;
}
.detailContainer {
    display: flex;
}
.detailContainer>img {
    margin: 1em 0.5em;
    position: relative;
    width: 3.5em;
    height: 3.5em;
}
.detailContainer>h3 {
    font-size: 2em;
}
.otherDetail {
    display: flex;
    margin: 0 5%;
    flex-direction: column;
}
.otherDetail>h4 {
    margin: 0;
    font-size: 1.25em;
}


/*   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   */


@media screen and (min-width: 360px) and (max-width: 1200px) {
    #cityInput {
        display: flex;
    }
    #cityInput>input {
        width: 50vw;
    }
}


/*   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   */


@media screen and (min-width: 1201px) {
    #cityInput {
        display: flex;
    }
    #cityInput>input {
        width: 600px;
    }
}


/*   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   */


@media screen and (max-width: 720px){
    header {
        margin: 0 calc(43.5% - (12cqmax + 15%));
    }
    main {
        margin: 16vh calc(43.5% - (12cqmax + 15%));
        margin-left: 10% + (720px - 100vw);
    }
    .detailContainer>img {
        margin: 1em 0.5em;
        position: relative;
        width: 3em;
        height: 3em;
    }
    .detailContainer>h3 {
        font-size: 1.75em;
    }
    .otherDetail>h4 {
        font-size: 1.125em;
    }
}


/*   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   */


@media screen and (max-width: 560px){
    html {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    body {
        padding-inline: 2.5%;
        width: 100vw;
    }
    header {
        min-width: 0px;
        width: 95%;
        margin: 0 2vw;
    }
    main {
        min-width: 0px;
        width: 100%;
        height: 75%;
        padding-inline: 0;
        margin: 16vh calc(43.5% - (12cqmax + 15%));
        margin-left: 10% + (560px - 100vw);
    }
    #weatherDisplay>h2 {
        font-size: 4.25em;
    }
    #weatherDisplay>h3 {
        font-size: 2.125em;
    }
    #cityInput>input {
        width: 50vw;
    }
    #otherDetailsInside {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .detailContainer>img {
        margin: 0.5em 0.5em 0 0.5em;
        width: 3.125em;
        height: 3.125em;
    }
    .detailContainer>h3 {
        font-size: 1.75em;
        margin-top: 12%; 
    }
    .otherDetail {
        margin-bottom: 18%;
        translate: 0 -10%;
    }
    .otherDetail>h4 {
        margin-top: -10%;
    }
}


/*   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   ~   */


@media screen and (max-width: 360px) {
    header {
        font-size: 0.75em;
    }
    header>a {
        top: 1em;
    }
    main {
        padding-top: 5%;
        padding-bottom: 5%;
        max-height: 100%;
    }
    #cityInput>input {
        width: 100%;
    }
    #cityInput>div {
        width: 85%;
        height: 2.8em;
        margin: 0 8% ;
        display: flex;
        border-radius: 1em;
        justify-content: space-around;
        background-color: rgba(255, 255, 255, 0.749);
    }
    #searchLogo {
        margin: 0.25em 0.8em;
        width: 2.2em;
        height: 2.2em;
        opacity: 90%;
    }
    #cityInput>div>h3 {
        visibility: visible;
        font-size: 1.4em;
        margin: 0.4em 0;
        opacity: 80%;
    }
}