* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-family: "Open Sans", sans-serif;
    font-weight: 300;
    color: white;
}

:root {
    --color-glass: rgba(255, 255, 255, 0.3);
    --color-black-glass: rgba(70, 70, 70, 0.2);
    --color-black-shadow: rgba(0, 0, 0, 0.5);
}

body {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 1.5rem;
    gap: 3rem;

    background-image:
        linear-gradient(rgba(0, 38, 50, 0.5), rgba(0, 7, 8, 0.5)),
        url("./img/landscape.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: repeat;
}
    

.main-div {
    background: var(--color-black-shadow);
    backdrop-filter: blur(10px);
    border-radius: 25px;
    box-shadow: 0 4px 6px var(--color-black-shadow);
    padding: 1.5rem;

    width: 100%;
    height: 25.5rem;
    max-width: 700px;
    max-height: 500px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 1.5rem;
}

.image-and-humidity-div {
    width: 2rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.input-and-search-div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: auto;

    gap: 20px;
}

.weather-icon {
    width: 10rem;
    height: auto;
}

.city-input {

    width: 100%;
    height: 100%;

    padding: 1rem;

    border: none;
    outline: none;
    background: var(--color-glass);
    /* Cor branca semitransparente */
    backdrop-filter: blur(10px);
    /* Desfoque do fundo */
    border-radius: 25px;
    /* Bordas arredondadas */
    box-shadow: 0 4px 6px var(--color-black-shadow);
    /* Sombra suave */
    font-size: 1rem;
}

.city-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
    /* branco mais suave (opcional) */
}

.search-button {
    border: none;
    outline: nome;
    padding: 20px;

    width: 60px;
    height: 60px;

    cursor: pointer;

    background: var(--color-glass);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    box-shadow: 0 4px 6px var(--color-black-shadow);

    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.search-button:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(115, 115, 115, 0.2);
}

.search-button:active {
    transform: scale(0.9);
}

.temperature {
    font-size: 100px;
    font-weight: 1000;
    background: linear-gradient(180deg, rgba(0, 234, 255, 0.9), rgba(255, 255, 255, 0.9));
    background-clip: text;
    -webkit-text-fill-color: transparent;

}

.weather-description{
    text-transform: capitalize;
}

.pierry-mark{

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    color: gray;
}

.contact-div{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.github-button{

    border: none;
    outline: none;

    border-radius: 50px;
    padding: 10px;

    height: 45px;
    width: 45px;
    background-image: url("./img/contact/github-ico.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    opacity: 30%;

    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.github-button:hover{
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(115, 115, 115, 0.2);
}

.github-button:active {
    transform: scale(0.9);
}

.linkedin-button{

    border: none;
    outline: none;

    border-radius: 50px;
    padding: 10px;

    height: 45px;
    width: 45px;
    
    background-image: url("./img/contact/linkedin-ico.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    opacity: 30%;

    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.linkedin-button:hover{
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(115, 115, 115, 0.2);
}

.linkedin-button:active {
    transform: scale(0.9);
}

.call-button{

    border: none;
    outline: none;

    border-radius: 50px;
    padding: 10px;

    height: 45px;
    width: 45px;
    
    background-image: url("./img/contact/call-ico.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    opacity: 30%;

    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.call-button:hover{
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(115, 115, 115, 0.2);
}

.call-button:active {
    transform: scale(0.9);
}

.made-by-and-contact-div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.music-button{
    width: 4rem;
    height: 4rem;
    background-color: transparent;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 50px;
    padding: 0.5rem;

    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.music-button:hover{
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.music-button:active {
    transform: scale(0.9);
}