/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 :root {
    --trasnition-all: all 0.4s ease-in-out; 
    --trasnition: 0.4s;
    --scale: scale(1.025);
    --shadow: 2px 2px 10px #00000085;
    --shadow-hover: 4px 4px 20px #00000085;
}

 /* Weather content */
.weather-container p:nth-child(2) {
    font-size: 1.2em !important;
    color:black;
    font-weight: bold;
    text-transform: uppercase;
}

.weather-container p:not(:nth-child(2)) {
    font-size: 0.8em;
}

.weather-container div:last-child, .weather-container-en div:last-child {
    width: 100%; 
    text-align: right;
    margin-top: 20px;
}

.weather-container .link-button, .weather-container-en .link-button {
    background: var(--ast-global-color-0); 
    color:white;
    font-weight: bold;
    padding: 10px 20px;
    transition: var(--trasnition-all);
}

.weather-container .link-button:hover, .weather-container-en .link-button:hover {
    transform: var(--scale);
    box-shadow: var(--shadow-hover);
}

.weather-container-en h1 {
    text-transform: uppercase;
    font-size: 1.2em;
}

.weather-container-en p {
    font-size: 0.8em;
}

@media (max-width: 425px) {
    .weather-container div:last-child {
        text-align: center;
    }
    .weather-container .link-button {
        width:100%;
    }
}

/* SEARCH BAR */
.header-search-form {
    position: relative;
}

.header-search-form i {
    color: var(--ast-global-color-0);
    cursor: pointer;
    margin-right:20px;
}

.header-search-form form {
    position: absolute;
    top:0px;
    left:0px;
    z-index: 100;
}

.header.search-grid-box-single {
    margin-top: 20px;
    padding: 20px;
    background-color: var(--ast-global-color-0);
}

.header.search-grid-box-single a {
    color: white;
}

.header.search-grid-box-single a p {
    margin: 0px;
    font-size: 1.2em;
}