.WeatherHolder .box {
    height: 60vh;
    border-radius: 5px;
    box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
    background: #a5bbdd;
    position: relative;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    min-width: 200px;
    min-height: 350px;
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-top: 20px;
}
.WeatherHolder{position:relative; display:flex; flex-direction:column;}
@media (min-width: 1335px) {
    .WeatherHolder .box {
        margin-left: 10px;
        flex-grow:1;
        min-width:20vw;
    }
    .Forecast {
        margin-left: 10px;
    }
}

    .wave {
        opacity: 0.3;
        position: absolute;
        top: 120%;
        left: 50%;
        background: white;
        width: 500px;
        height: 500px;
        margin-left: -250px;
        margin-top: -250px;
        transform-origin: 50% 48%;
        border-radius: 43%;
        animation: drift 3000ms infinite linear;
        z-index: 1;
    }

        .wave.-three {
            animation: drift 5000ms infinite linear;
            z-index: 2 !important;
            opacity: 0.2;
        }

        .wave.-two {
            animation: drift 7000ms infinite linear;
            opacity: 0.1;
            z-index: 3 !important;
        }

.WeatherHolder .box:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
    transform: translate3d(0, 0, 0);
}

    @keyframes drift {
        from {
            transform: rotate(0deg);
        }

        from {
            transform: rotate(360deg);
        }
    }

    .info {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 45%;
        z-index: 4;
    }

    .location {
        text-align: center;
        font-weight: 800;
    }

    .date {
        text-align: center;
        margin-top: 5%;
        color: #9a9a9a;
        font-size: 70%;
    }

    .temp {
        margin-top: 10%;
        text-align: center;
    }
.Forecast {
    display: flex;
    flex-direction: row;
    position: relative;
    bottom: 0;
    height: auto;
    justify-content: space-evenly;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 1px solid rgba(250,250,250,1);
    background-color: rgba(250,250,250,1);
    margin-bottom:20px;
}
    .Forecast .Day {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding:10px;
    }
    .Forecast .Day .datef{
        font-size:12px;
        color:#333;
    }
    .Forecast .Day .weatherconf {
        font-size: 1.5em;
        color: #333;
    }
    .Forecast .Day .tempf {
        font-size: 12px;
        color: #333;
        text-align:center;
    }

.weathercon {
    height: 55%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3em;
}
.weathercon {
    font-size: 5em;
}
.Forecast .weathercon {
    font-size: 1em;
    margin:5px;
}
@media (max-width: 600px) {
    .box {
            width: 90vw;
            height: 80vh;
        }

        .wave {
            top: 85%;
        }

   

        .info {
            font-size: 1.5rem;
        }
    }

    @media (max-height: 500px) {
        .box {
            height: 80vh;
        }

        .wave {
            top: 115%;
        }
    }

    body > span {
        width: 100vw;
        text-align: center;
        color: grey;
    }




.button-wrap {
    position: absolute;
    text-align: center;
    top: 20px;
    margin-top: 0;
    width:100%;
    z-index:10;
}



.button-label {
    display: inline-block;
    padding: 1em 2em;
    margin: 0.5em;
    cursor: pointer;
    color: #292929;
    border-radius: 0.25em;
    background: #efefef;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.22);
    transition: 0.3s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .button-label h1 {
        font-size: 1em;
        font-family: "Lato", sans-serif;
    }

    .button-label:hover {
        background: #d6d6d6;
        color: #101010;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.32);
    }

    .button-label:active {
        transform: translateY(2px);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0px -1px 0 rgba(0, 0, 0, 0.22);
    }

@media (max-width: 40em) {
    .button-label {
        margin: 0.25em;
    }
}

#yes-button:checked + .button-label {
    background: #2ECC71;
    color: #efefef;
}

    #yes-button:checked + .button-label:hover {
        background: #29b765;
        color: #e2e2e2;
    }

#no-button:checked + .button-label {
    background: #29b765;
    color: #e2e2e2;
}

    #no-button:checked + .button-label:hover {
        background: #c21b15;
        color: #e2e2e2;
    }

#maybe-button:checked + .button-label {
    background: #4183D7;
    color: #efefef;
}

    #maybe-button:checked + .button-label:hover {
        background: #2c75d2;
        color: #e2e2e2;
    }

.hidden {
    display: none;
}