:root {
    --primary-sunny: #6dc7cf;
    --secondary-sunny: #e0f2f2;
    --text-sunny: #0d0d0d;
    --primary-dark: #E0F2F2;
    --secondary-dark: #1C2A39;
    --text-dark: #36454F;
}

body {
    overflow-x: hidden;
    /* padding: 1rem !important; */
    font-family: Helvetica;
    padding-bottom: 10rem;
}

#main {
    width: 96dvw;
    /* margin: 1rem; */
    margin: auto;
    transition: all .4s;
}

.grid {
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: repeat(3, 1fr);
}

.weatherSunny {
    background-color: var(--primary-sunny) !important;
}

.weatherDark {
    background-color: var(--primary-dark) !important;
}

.whiteText {
    color: var(--secondary-sunny);
}

.darkText {
    color: var(--text-dark);
}

.weatherVisualSunny {
    background-color: var(--secondary-sunny);
}

.weatherVisualDark {
    background-color: var(--secondary-dark);
}

.details {
    background-color: var(--secondary-sunny);
    font-size: 12px;
    /* display: flex;
    justify-content: space;
    align-items: center; */
}

.detailsDark {
    background-color: #BCC4D1;
    font-size: 12px;
}

.add {
    position: relative;
    font-size: 10dvw;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 10dvw;
    min-height: 10dvw;
    transition: all 1s;
}

.addBox {
    transition: all 1s;
    /* transition-delay: .5s; */
}

.errMsg {
    background-color: var(--secondary-dark);
}

.errFlex {
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

.errImgBox {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.errImg {
    width: 100%;
    color: red;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 6rem;
    padding: 2rem;
}

.addBox:hover {
    transition: all 1s;
    position: relative;
    top: -.5rem;
    transition-delay: .5s;
}

#fix {
    position: fixed;
    z-index: 99;
    top: 50%;
    left: 50%;
    background-color: white;
    transform: translate(-50%, -50%);
    animation: scrollUp 1s forwards;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#alert,#alertMsg{
    position: fixed;
    z-index: 99;
    top: 50%;
    left: 50%;
    background-color: white;
    transform: translate(-50%, -50%);
    animation: scrollUp 1s forwards;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#citySelect option{
    overflow: hidden;
}

@keyframes scrollUp {
    from{
        top: 100%;
    }
    to{
        top: 50%;
    }
}
@media (max-width:1080px) {
    .detailsText {
        font-size: 8px;
    }

    .minorDate {
        display: none !important;
    }
}

@media (max-width:960px) {
    .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .details span:nth-child(1) {
        display: none;
    }

    .detailsText {
        font-size: 8px;
    }
}

@media (max-width:560px) {
    .grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .minorDate {
        display: block;
    }

    .detailsText {
        font-size: 12px;
    }
    /* #fix{
        width: 80dvw;
        height: 80dvw;
    } */
}